How can I add items to a user's checkout during the payment process?

Technical Q&A
1

We utilize a Shopify Online Store. I am trying to create an upsell offer during a user’s Checkout flow; in short, all I am trying to do is add an item to a user’s current checkout - without requiring them to leave the checkout process.

I have tried utilizing the Cart API within the checkout flow to do this (/cart/add.js), and it does work if the user is on the contact information step of Checkout (if I use the Cart API to add an item on the first page of checkout, and then refresh the page, the new items are in the Checkout). However, this does not appear to work if a user is on the payment information step of Checkout. The API request comes back 200, but I do not see any changes (and placing an order after doing so does not include the added item).

I have no problem using the Cart API on the non-checkout part of the store.

How can I add an item to a user’s current checkout? Is there some other API I can use? Some other consideration? Thank you.

2

Assuming your on Plus the payment step is tendering basically so it’s not just gonna change like that you need to make them go back a step.

Or you need to have an intermediary step before payment that gets the info you need to make the decision to upsell.

If a modal a blurred out static image of the next step page can serve as the background, then when the selection is made then shunt them to the payment step.

3

Hello Paul,

Thank you for your reply!

Could you elaborate on what you mean by “the payment step is tendering”? Does that in essence “lock” a user’s checkout at that point?

Our goal is to show the pop-up when they click “Pay now” while on payment_method, have them choose whether or not to add the item, and then process the resulting order. To the best of your knowledge, is something like that possible?

We are open to workarounds. I’d possibly be open to automatically forcing them back a step, adding the item, automatically forcing them back to payment_method, and then processing the order, but I fear 1. the UX could be compromised 2. they’d have to re-input credit card details and 3. seems to have quite a few points of failure for a business-critical piece of functionality (Checkout).

Would love to hear your thoughts. Thanks again for your response! Would gladly buy you a coffee if you can help me get this working.

4

I did mean tendering in the cashing-out sense, everythings ready to be processed as at some point the order can’t keep changing.

These nuances of checkout aren’t really documented so IDK the exact phrasing, underlying cause or what the actual technical limitation is or any workaround it’s just inferred from the behavior and other checkout systems. I’m sure there have been some threads touching on this but I cannot recall specific ones, apologies.

Hit up the stores MSM as well to try and crystalize things.

Without a clearer process you don’t really want to take on an opaque problem head on.

If you want to only trigger the “Pay now” while on the payment_method step , but you cannot modify the cart then that means the customer cannot really be on that step at all can they? And draft order swapping isn’t really a fit at this point in the process either.

So emulate a strip-down version of the desired step, or introduce a psuedo intermediary step; that makes sense that would still get clicked through.

Like choose a “payment method” step that doesn’t actually collect information.

Basically sleight of hand where they are in the steps so redirects are needed less.

Seems like ALOT of work and would be messy smoothing it out.

Before going more extreme and building a payment form inside checkout, confirm with a MSM if that’s copacetic/possible. Note here how it’s super hinky to try and build something that collects everything the checkout process knows how to collect , if you tried you would miss/break something. But if you did you may need to try and trigger the final pay now for them, I’ve never done that so uncertain of the behavior there ; though consumers are somewhat used to having to click something again after a modal closes.

seems to have quite a few points of failure for a business-critical piece of functionality (Checkout)

Yes so unless you have budget and time to invest in testing,ab-testing,tweaking, monitoring, etc really consider ditching that for post-sale upsells, or before payment_method.

That is at least until someone has insight on how to modify the order insitu on the payment_method step in a seamless way.

5

Now I remember a bit better the hypothetical workaround I’d though of , though I can’t seem to find the original post where I talked about it /shrug.

Of course not a full answer for the payment_method update cart problem.

Right so when a button is clicked grab the page as a screenshot, and background it , while the actual underlying page is changed when ajax is an option, or the section rendering api*.

With that background being aggressively closable to avoid what would seem like a frozen UI.

An unvetted screenshot lib with unknown security http://html2canvas.hertzen.com/

Of course this also doesn’t account for offsite payment providers or having to fill in information if it’s blanked since we cannot prefill payment details as that would be like you can the payment method for checkout-urls as that would kinda be a no-no.

  • Is checkout even part of the section rendering api letting you plunk {{ content_for_layout }} where you need it?