Hi there,
We're seeing a bug with dynamic checkout buttons, i.e. the buy now button that's rendered with the
{{ form | payment_button }} liquid filter.
This button has had support for selling plans since about summer 2023. So on the product page, when a customer clicks the button and there is a corresponding input[name="selling_plan"] within the product <form>, the customer is taken to checkout for that product with the selling plan applied.
However on some stores, the button does not work, and instead tries to take the customer to checkout without the selling plan attached. When the product is only available for sale with a selling plan, this breaks checkout - the customer is shown an error that "Variant can only be purchased with a selling plan".
We've attempted to narrow down this issue. As I mentioned it only shows on some shops. Issues like that are tricky so we've tried to narrow down the differences and isolate what's going on. We haven't gotten to the root of the issue, but I've written down some notes below that might offer some clues that may be helpful for finding a fix.
Below are two products from two different stores:
Working Buy Now: https://handfashioned.myshopify.com/products/handmade-white-speckled-oval-bowl
Broken Buy Now: https://downpaythemetester.myshopify.com/products/the-3p-fulfilled-snowboard (use 'downpay' to access storefront)
Both stores have Dawn (latest, 12.0) as their theme. Both stores have similar payment settings. Both products are only available for sale through a selling plan. Both product theme templates render {{ form | payment_button }} in the same place, and when I compare the diffs between the output snippets they are identical. Notably, for both of them the wrapper is rendered with:
<div data-shopify="payment-button" data-has-selling-plan="true" data-has-fixed-selling-plan="true" class="shopify-payment-button">
This seems to imply that buttons of both pages are aware that the product has fixed selling plans.
The Buy Now button on the first product works, while on the second one it doesn't. As far as I can tell the only difference is:
For the working page:
- Clicking Buy Now results in a POST call to /wallets/checkouts.json, with a payload that includes the selling_plan_id attribute on the one line item that includes the product.
For the broken page:
- Clicking Buy Now results in a GET /cart/45144833065279:1?traffic_source=buy_now, which returns a "410 Gone (from disk cache)" error.
The broken page is requesting a cached cart and redirecting the customer to check out with that (non-existent) cart. Notably no other calls happen between clicking the button and those calls above. The javascript that executes the calls is part of Shopify's own bundle and we have no visibility into it, so it's very hard to say what code is making a determination on whether to POST to the checkout endpoint or whether to redirect the user to a cached cart. It seems to me like a case of over-optimisting caching.
Please advise.
