[Checkout UI] Extension selling plan doesn't work with express checkout

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/app": "^3.50.0",
"@shopify/cli": "^3.50.0",
"@shopify/ui-extensions": "^2023.10.0",
"@shopify/ui-extensions-react": "^2023.10.0",
"@shopify/shopify-api": "^7.3.1",
"@shopify/shopify-app-express": "^2.1.3",
"@shopify/shopify-app-session-storage-mysql": "^1.1.13",

Describe the bug

When applying a selling plan on the checkout page, if the store has express checkouts installed (shop pay, google pay, paypal etc), they all crash. The selling plan is still applied but the user isn't able to use the express checkouts. Also, if the user decides to use an express checkout like shop pay, and they are already signed in, if the selling plan is applied afterwards, it still crashes and reroutes with an error to a new checkout page without the express checkouts. The type of selling plan applied does one payment now and another in the future.

Our testing suggests that this isn't a bug limited to selling plans being applied to a checkout at the point of checkout. If you generate a checkout with a selling plan applied, there are no express checkouts available to the user. All express checkouts don't work with selling plans.

Steps to reproduce the behavior:

Install express checkouts on your shop
Apply a selling plan to a product and checkout.
Notice that the selling the express checkouts aren't visible.

Expected behavior

We expect the express checkouts to be visible and useable when the cart has a selling plan applied to it.

Screenshots

When a selling plan is applied at the point of checkout, using a checkout extension app, the page crashes (as seen in the screenshot) and then automatically redirected to the checkout page with the selling plan applied but the express checkouts not there:

Screenshot 2023-11-02 at 10 25 14 am

Additional context

The below code snippet is causing the crash. Specifically, applyCartLinesChange. We have checked that type, id and sellingPlanId are all correct.

Here's the link to the docs: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cart-lines#checkoutapi-propertydetail-applycartlineschange

const sellingPlan: CartLineChange = {
type: "updateCartLine",
id: cartLineId,
sellingPlanId: sellingPlanId,
};
const api = useApi();
await api.applyCartLinesChange(sellingPlan);

Hi @algoad I am not able to reproduce this issue on my end. I created an extension that adds/removes a selling plan to a line item, and am able to successfully do this with no errors or disappearing accelerated checkouts. I'm also able to add and remove the selling plan in the Shop Pay checkout without any issues.

If you are still experiencing the issue could you please supply the full code of an extension that reproduces the error? With any additional setup/information to reproduce.

Hi @Steve-D-Powell ,

Perhaps your selling group is specified slightly differently to ours. Currently we have the selling plan group that is created with the following mutation. You can tweak it slightly, however the idea is that the customer pays X% now and the remaining balance due in 14 days.

This allows us to achieve the following goals. The customer enters into an agreement where they pay a discount up front and they will be charged at a later date. However, if the customer performs action XYZ via our external system, we will mark their order as paid so they can keep their discount. If not, they will be charged the remaining balance.

We apply the selling plan to the cart by looping through the cart line item and attaching each selling plan to the item. Then then applying the selling plan to that item. The code to apply the selling plan looks like this:

const sellingPlan: CartLineChange = {
  type: "updateCartLine",
  id: cartLineId,
  sellingPlanId: sellingPlanId,
};
const api = useApi();
await api.applyCartLinesChange(sellingPlan);

Side note: We use script tags to hide the selling plan on the product page.

Please visit the following document that has videos and explanations. Feel free to email me at gidi@uselava.com and I would be happy to explain further. We have spoken to shopify support and do believe there is an active issue that needs resolving. Please visit the following link and request access. https://docs.google.com/document/d/1krWviOGJsPLEmX19AV26auLcgO6zPhZPwbBojKJz320/edit

const mutation = `
  mutation {
    sellingPlanGroupCreate(
      input: {
        name: "test-selling-plan-group"
        merchantCode: "test-selling-plan"
        options: [
          "Pre-order"
        ]
        sellingPlansToCreate: [
          {
            name: "Placeholder Group Name (50%)"
            category: PRE_ORDER
            options: [
              "50% deposit"
            ]
            billingPolicy: {
              fixed: {
                checkoutCharge: {type: PERCENTAGE, value: {percentage: 50}}
                remainingBalanceChargeTrigger: TIME_AFTER_CHECKOUT
                remainingBalanceChargeTimeAfterCheckout: "P14D"
              }
            }
            pricingPolicies: [
              {
                fixed: {
                  adjustmentType: PERCENTAGE
                  adjustmentValue: { percentage: 0 }
                }
              }
            ]
            deliveryPolicy: {fixed: {fulfillmentTrigger: UNKNOWN}}
            inventoryPolicy: {reserve: ON_FULFILLMENT}
          },
        ]
      }
    ) {
      sellingPlanGroup {
        id
      }
      userErrors {
        field
        message
      }
    }
  }
  `;

@Steve-D-Powell - Please let me know if I can provide you with further details.

Shopify / ui-extensions