Dynamic checkout buttons no longer support line item properties
Context
We are developing an app that uses app blocks (theme app extensions). It adds a checkbox to the product form that sets a line item property.
Overview of the issue
The dynamic checkout buttons no longer correctly apply line item properties. It was working correctly until sometime in the past few months. Specifically we have been testing the "unbranded" dynamic checkout button.
In the compatibility section, there is no mention that the dynamic checkout buttons do not support line item properties. This, along with the fact that it used to work (plus some technical details I'll get into below), leads me to believe this is a bug.
How we expect it to work
We expect line item properties to be applied and visible on the checkout page after using the "unbranded" dynamic checkout button.
Specifically, when the form contains an input such as the following (ref this thread)
{%- form 'product' -%}
<!-- snip -->
<input type="hidden" name="properties[foo]" value="bar">
<!-- snip -->
{{ form | payment_button }}
{%- endform -%}
We would expect the product in checkout to display the properties "foo: bar" as below:
How it actually works
The above code does not apply the line item properties as expected. Interestingly, however, it does pass through the data!
Upon clicking the "unbranded" dynamic checkout button we are redirected as follows:
`https://${shopDomain}/cart/${variantId}:${quantity}?properties=${propertiesString}`
The interesting part is that the line item properties are in fact passed through. Specifically here is how they are encoded:
// 1. All inputs with a key that matches `properties[<key>]` are added to some json
// For example, <input key="properties[foo]" value="bar"> would result in:
'{"foo": "bar"}'
// 2. This json is then url encoded, so for example:
'%7B%22foo%22%3A%20%22bar%22%7D'
// 3. This url encoded string is then base64 encoded, so for example:
'JTdCJTIyZm9vJTIyJTNBJTIwJTIyYmFyJTIyJTdE'
// 4. The result is added as the value of the properties string
`?properties=JTdCJTIyZm9vJTIyJTNBJTIwJTIyYmFyJTIyJTdE`
This /cart/ endpoint appears to be a checkout link. Checkout links do not mention this properties query parameter at all, they do forward it to the checkout however.
So, finally we end up at the following checkout url:
`https://${shopDomain}/${shopId?}/checkouts/${checkoutId}?properties=${propertiesString}`
Outcomes
We are hoping for clarification and one of two outcomes:
1. Clarify that line item properties are not supported by dynamic checkout buttons (and note that in the compatibility section of the docs)
2. Clarify that this behaviour is a bug and will be fixed at some time in the future
Notes
We have spoken to support about this issue, and they directed us to post in this section of the forum.
We are aware that we can work around this issue in a few ways. However they would all slow down the customers checkout experience and increase complexity. This would be the simplest solution.
Other threads:
- https://community.shopify.com/c/shopify-apis-and-sdks/buy-it-now-button-not-saving-line-item-propert...
- https://community.shopify.com/c/shopify-discussions/dynamic-checkout-and-line-item-properties/m-p/13...
- https://community.shopify.com/c/shopify-discussions/dynamic-checkout-and-line-item-properties/m-p/13...
- https://community.shopify.com/c/technical-q-a/how-to-apply-line-item-property-to-product-in-checkout...
