Custom cart attributes issues with Apple Pay, Google Pay, Shop Pay

Store Design
1

We use custom cart attributes for one of my clients. They’re very important. We found out that if a customer uses Apple Pay, Google Pay, or Shop Pay, the cart attributes do not come through at all.

The problem is that when users click on one of those quick payment buttons, the cart form is not submitted like if they clicked on the standard Check Out button.

That means if the user fills out or edits the custom cart attributes, they were never saved first.

The “order notes” come through fine, because if you watch carefully, any changes to that field triggers a form submit action (you can see the page update as soon as you leave that field).

The solution, we found, is to mimmic the order notes field and trigger a form update whenever the custom cart attributes change, like this:

That leaves one more problem. If the user does not change any of your custom cart attributes, then our form.submit() is not issued. This might be a problem if you depend on the default custom cart attributes and their respective default values to be added to the order. To get those default custom cart attributes to always come through, we add this JS hack to cart-template.liquid which I’m not too crazy about but it works:

{%- if cart.attributes["My-Custom-Cart-Attribute-1"] == blank -%}

{%- endif -%}

The idea is that if the custom form attribute has not been set, then submit the form right away on page load so they are registered. USE THIS WITH CAUTION and test or you might suffer an infinite loop.

I hope Shopify fixes the problem with the quick-pay buttons - the form should be submitted first those button are clicked to register those custom cart attributes. Looks like they knew about the problem so they force the order notes to save on change. But that seems to be a dirty / unfinished fix.

Gary

2

This is really useful thank you.

I have the same problem and in fact even the ‘order notes’ do not always come through.

My knowledge of coding is pretty basic - could you tell me where the first bit of code you refer to above is/should go?

Also - have you come across any updates of fixes since reporting this?

Many thanks

Fidelma

3

You can add the code to your custom attribute INPUT fields. The code to add is simply:

onblur="this.form.submit();"

So if you have a custom cart attribute like this (most likely in cart-liquid.template):

then you would change to be like this:

I hope that helps!

4

Thank you!

5

Is this solution still valid in 2024 or do cart attributes now work for all payment methods?

6

Hi,

Thanks for asking this question.

The answer is no, I don’t think so.

My custom attribute is adding a dispatch date and recently someone ordered via shop pay and no dispatch date was included. She hadn’t been given the option to choose one. With my normal check out it is required.

Thanks
Fidelma

7

Did you try the solution from above with onblur=“this.form.submit();”?

In case payment by Google Pay, PayPal, … doesn’t get rid of the custom cart note, I think this should still work.

But I couldn’t figure out yet which mechanism they use for the custom cart note and whether it’s still the onblur thing.

8

hello there, is this code effective if i’m using a third-party app to collect information from the user?