Post-purchase upsells within Shopify checkout

dev00x
Visitor
1 0 2

Hello All,

I am wondering how https://carthook.com/ is doing post-purchase upsells within native Shopify's checkout.

I was not able to find any API documentation on that. Are they doing redirect scripts on thank-you page?

Or this is upcoming Shopify's API to allow us to do such thing?

Will love to get insights on this,

 

Thanks alot,

dev00x

Replies 26 (26)

Not applicable

Did you actually get to see this in action?

ALPHA_Developer
Shopify Partner
14 0 3

yes i noticed it today i'm also seeking for these functionality API.

 

 

banned
Mets
Shopify Partner
12 0 4

Have been searching for information too...

 

It was announced as new integration feature for apps? About 8 apps already use this and I guess they have been invited a while back. But apparently it is now available in the API? But where? Couldn’t find it...

 

Any ideas?

Not applicable

I cant find any documentation. I tried shopify support but no clear answer so far.

KarlOffenberger
Shopify Partner
1873 184 900

Hi @all

Oh boy I am glad you mention this.

So let me recap what's happened regarding this entire announcement from 11/02.

  • Shopify announces Subscriptions API and mentions Upsell API (only a few noticed, no real info yet)
  • Shopify begins accepting applications for a public beta of Subscriptions API which are set for GA somewhere 01/2021
  • Shopify announces select app vendors are shipping their apps using still in beta Subscriptions API and some app vendors using Checkout extensions / Upsell API which is still closed beta and there never was a public invite for app devs / partners. They reason that the selection criteria was based on experience, market fit and exposure yada yada... when you put it through corporate lingo translator it yields "you're not a celebrity or rich so suck it up and wait"

Now then, those lucky few who were part of the closed beta not only had the toys to play around with before everyone else, they also get to use them +2 months sooner than anyone else. Not only the Subscriptions API, but the all elusive Upsell API or whatever it will be (uses Argo with the Checkout extensions which Shopify isn't giving away to mere mortals here).

Wait what?

Yeah, so we as developers, as partners and as app vendors are put at a considerable disadvantage and loss of opportunity which translates in to $$$. Not only are the apps that can already use Subscriptions API or Checkout Extensions available for use on app store, Shopify even created specific app categories and labels (works with Shopify Checkout) to promote them on the app store. And if you thought that wasn't enough, Twitter, Shopify blogs, Shopify documentation have all been plastered with the big news and promotions for the very few select apps which can use APIs that have not yet been released.

Great going Shopify :applauding: Love you dearly but you sure know how to hurt real well.

Here's what I'd suggest:

  • Shopify retract general availability of the apps using these non public features as it's creating unfair market conditions.
  • Of course, some vendors may be better suited for closed betas and that's fine. I fully understand that. Have their apps with the Subscriptions API and Checkout Extensions only work for some of their customers upon request so that Shopify can test the new bits and collect feedback, fix issues, improve the developer, merchant and customer experience.
  • Once ready do a public beta so the rest of us have time to catch up.
  • Then go for GA

But what's been done here and been celebrated so cheerfully is quite a let down... I can't even be happy that these features are actually arriving or mention all the friggin' amazing work done by @lemonmade aka Chris Sauve and others with remote-ui, argo, argo-admin-host, argo-checkout and tying it all up with Shopify CLI for a great DX. Dammit, it's such nice code and architecture it makes me want to cry... yet here I am sort of crying in the forums because of all I mention above.

Meh!

Not applicable

It sucks that they would do that.

Thanks for all the info.

Mets
Shopify Partner
12 0 4

Thank you for the information!

 

Typical. The ecosystem seems to be getting segmented into insiders who are preferred and the rest. Wouldn’t be surprised if even search results in the app store are influenced by some unofficial insider status, but we’ll never find out.

 

At the same time, it’s Shopify’s own platform, so they can do as they please. Seems natural development, the bigger a platform becomes. 

 

KarlOffenberger
Shopify Partner
1873 184 900

Now let me be a little less critical and hurt and summarise what we can do.

We can use Subscriptions API beta if we have filed for public beta access and have been granted access for one of our dev apps. This API is well documented in GraphQL Admin API reference docs and the developers portal tutorials provide fantastic step-by-step walk throughs how to get going with subscriptions.

Subscriptions are basically a few parts we as app devs must be aware of:

  1. Create an Argo admin extension for the subscriptions extension point using Shopify CLI, register it with your app that's been granted beta access, push it and go publish it in your app dashboard. Under the hood, Argo for admin uses argo-admin-host which in turn uses several bits of remote-ui facilitating the entire architecture where Argo extensions are assembled on a a separate thread (web worker) and then pushed to the UI thread of the host i.e. the extension you created, registered, pushed and published before is actually run within Shopify admin and hosted by Shopify. Very cool stuff! Depending on the extension points, we will be able to have our app specific UIs mingling directly within product forms, order forms etc. I mean this is really really cool not just in terms of Shopify. remote-ui is simply a marvellous piece of code with use-cases far beyond the Shopify ecosystem!
  2. This should allow merchants to configure subscription groups, plans and associate them to products. Of course, you should also provide merchants the ability to manage not just subscription groups, plans but also actual subscriptions. That's up to your app and go crazy with Subscriptions API et al.
  3. Next, the theme itself must enable subscriptions i.e. the product page section must have some extra Liquid to pickup on subscription plans available to that product to display the options to the customer. How you handle that is also entirely up to you and classic Liquid fidgeting around with. Or your app provides a more up to date UI using JS. Up to you. If the product can only be sold as aa subscription it doesn't matter as the subscription will be automatically created if the product is added and checked out.
  4. Any subscription app should also provide the means for customers to view and edit their subscriptions so they can review or change them.

Anyhow, that's a short recap for Subscriptions API and Argo for Admin with subscriptions.

It is still in public beta, ETA for GA is sometime early 2021 unless you're one of the privileged app vendors already using it because... oh never mind :cringe:

Then there's post-purchase upsell or Upsell API or Argo for Checkout - no idea what they're all officially called. They're closed beta i.e. the stuff I am angry about for how Shopify has handled it for the rest of us.

This little beauty essentially allows customers to receive product offers right within checkout after they've entered their card details but before the thank you (order status) page. What's real neat about this is if they opt-in to the offer, they do not need to enter their payment details again (as is possible now using Order Edit API). This ladies & gents is true upselling that rocks aand is why this is such a BIG deal. You just had your customer buy something, you already have their card details, you peddle them another offer, a cool upsell that makes sense and has a good discount. One click is all it takes for them!

This in turn, as far as I am able to tell for now largely uses  Argo for Checkout i.e. we now have a host in checkout that can display Argo extensions at a predefined checkout extension point. It can display within right / left or footer, has a bunch of useful pre-defined UI components for vanilla JS or comes with React wrappers, Preact is being worked on because React is heavy and there's nothing stopping you using whatever you like (hypertext tagged markup, svelte, whatever). You can call your apps APIs and do something to add that offer to the existing order. It is that something which is elusive because current Edit Order API cannot capture another payment without the customer having to go through a new payment card entry. I suppose this is some API feature we know nothing of yet.

Anyhoo... if you want to play around with Argo for Checkout you cannot because... oh never mind, I'd be repeating myself :cringe:

But if you want to simulate playing with Argo for Checkout you can because somewhere within the Argo docs there was a link to the Argo sandbox environment which can be found and used (Shopify dev confirmed this) at https://argogogo.dev/. That at least hosts your little argo for checkout extension for the Checkout::PostPurchase::Render extension point (that's that page in-between payment details form and thank you page).

So just fire up Shopify CLI and 

> shopify create extension
... select 'Checkout Post Purchase'
... enter extension name 'my-cool-checkout-extension'
... pick React + TS or whatever floats your boat
... sip some coffee
> cd my-cool-checkout-extension
> shopify register
... authenticate yourself
... selected one of your dev apps
... all good so far... have another sip of coffee
> shopify push
... says all is good and get some link to follow to version and publish your extension but it won't work

 

Ah yes it won't work because... you know by now.

So just hit

> shopify serve

 

to serve the extension locally, open up an HTTPS tunnel in ngrok and run over to argogogo.dev to check it out.

Let's just document this as much as we can here and share info / learn together since we aren't celebrities or rich enough to have been invited to the party.

 

Enjoy

Derek_Morin
Shopify Expert
216 1 34

I think you guys made a good recap of how every other plebs developers feel right now. Anyone knows when the next API release will be available, and the Upsell API docs (currently hidden to plebs like us)

KarlOffenberger
Shopify Partner
1873 184 900

@Derek_Morin Subscriptions API should be 01/2021 or early 2021. Argo Checkout should be sometime in 2021 but no dates have been dropped yet.

I'll be updating this thread with new discoveries documenting what I can and how to use Argo Checkout. My last post is a little out of date as I've recently figured Argo Checkout is all that's needed for checkout up-sell / cross-sell and there is no "Upsell API". It's just a few methods available within Argo Checkout extension points. Will posts more.

KarlOffenberger
Shopify Partner
1873 184 900

Using Argo Checkout (aka post-purchase upsell) without closed beta invite

Sort of. Truth is we do not have access to the extension point in checkout on our dev stores and therefor cannot use Argo Checkout within the context of a real host.

Good news is that as far as I could tell so far, there isn't any API we need access to. Argo Checkout is a set of JS components (with React wrappers) and extension points with methods to calculate and apply changes to na order within checkout (right after the payment step, but before the order status view). To get going I would advise thoroughly looking through following links:

  • Argo Checkout repository over on Github - read the code, read the README's
  • Post purchase Argo extensions can only use components provided by Argo Checkout. That is, you can't even use a <div /> etc. in your extension. I understand this is to keep the checkout experience as native to Shopify UX as possible. The list of currently available components can be found here.
  • The post purchase extension point API has a few methods facilitating the actual post purchase order mutation. With Checkout::PostPurchase::ShouldRender inputData and storage are of interest where inputData returns data on order if I understand correctly and storage allows you to read / update the extensions "state" i.e. useful for fetching your data such as items you wish to offer the buyer and determine whether (if any are available) you should proceed to the next extension point. Checkout::PostPurchase::Render, in addition to aforementioned inputData and storage, also has calculateChangeset, applyChangeset and done methods. A Changeset is an array of product variant or shipping line additions and serve as input arguments to calculateChangeset and applyChangeset. Former simply takes the changeset, calculates the new purchase and returns that which has properties such as subtotal, totala price, tax, line items, shipping lines and the outstanding amount to be paid. Latter actually applies the changeset and with that charges the buyer. Once done, you should call done() which redirects to the order status page in checkout. Documentation on this is scarce but the code is well documented, typed and straight forward to follow by looking at code here.
  • I would also advise anyone interested in more details to checkout remote-ui which is the underpinning stack enabling Argo.

As far as using these bits, I have only been using the React lib so your mileage may vary if you decide to go Vanilla JS. To get started we need a host for the Argo Checkout extension and that's where the limitations of not being part of closed beta begin. Besides picking up remote-ui and writing your own remote environment mocking parts of Checkout::PostPurchase::* (which you can by reading through here and looking at this example) we will have to make dos with what is publicly available. The only remote environment I am aware of that devs can use right now and Shopify devs (thanks Chris Sauve) confirmed we can use is https://argogogo.dev/.

You can quickly bootstrap an extension using any of the following:

  • Shopify CLI using the Argo Checkout template - this is quite easy and will likely be used later on once public, but the template is a little dated (not using latest packages) and doesn't link to argo-run with argogogo.dev though that's easy to add.
  • npx argogogo which is what I've preferred since stumbling across it.

The main drawback of either is that you will anyway rely on argogogo.dev which is really only useful for checking out your UI rather than doing anything with calculateChangeset or applyChangeset as these promises always return unprocessed state and we don't get to the meat of it. Even so, can be worked around. What I haven't quite worked around is storage updates between Checkout::PostPurchase::ShouldRender and Checkout::PostPurchase::Render.

 

Issues / Feedback

Let's look at a simple extension for Argo Checkout

Screenshot 2020-11-04 at 00.57.12.png

 

  1. Images are weird using Argo Checkout component <Image />. I haven't figured out a way to control size other than providing the image in the right size to begin with. A simple width, height prop and maybe aspectRatio would be great.
  2. CalloutBanner is and does what it says in the box. Good for making sure the buyer knows where they are, why they are seeing what they are seeing, adding some context details here or a countdown timer if that floats your boat.
  3. A summary of the changeset I talked about before i.e. here I am showing the result of the calculateChangeset so the buyer is always aware of changes that will be applied and the resulting charges. The not so great part is that in terms of other React component libraries, text layout is quite obtuse using Argo Checkout components - juggling between View, TextContainer, TextBlock, Text etc. just isn't all that intuitive from a DX point of view IMHO. I'd much prefer a simple View or Box component and one Text component with a few props to set flex/grid, spacing, alignment, size etc.
  4. Not sure if the Select component is only broken in the sandbox environment or not, but it is wonky for sure. To begin with, Select and TextInput are overly chunky yet the label, value and marker icon are squished together and out of place.
  5. Generally form inputs such as Select and TextField don't play well with inline buttons as can be seen - Button is larger than the Select, cannot be properly aligned and though I could use a plain button (i.e. displays as link) that one is even more out of line.
  6. As is common with offers, you will have discounts and want to make buyers aware of how much they're saving. I couldn't figure out how to apply a simple strikethrough though I see some of the apps already using Argo Checkout were able to. Not sure how?
  7. Most if not all post purchase apps currently using the beta bits have single offer upsells i.e. they show one product variant to add. This works well for the "chunky" nature of the checkout Ui and thus Argo Checkout components but falls short for multiple offers as can be seen in this example. Lists (via BlockStack) are not terribly visually pleasing and I'd be very careful not to confuse buyers at this point. Another issue is we only have the one Button albeit primary (blue here), subdued (grey outline with blue text here) or plain (just blue text link). Not good or enough IMHO because the primary action (CTA) button should never be repeated elsewhere, the subdued version is already used as a "cancel / skip" i.e. you do not want to use it elsewhere in the UI for adding offers or doing other confirmative actions. Also no overflow scroll so you do want to beware of how long you make these or where you place your CTAs.
  8. Yeah, buttons. Didn't figure out what ButtonGroup really does but hey, never mind. Here I had a callback handler for No Thanks executing done() and a callback handler for Buy Now! executing applyChangeset and then upon resolving done().

    Generally I can also mention that using Layout component is pretty straightforward but not sure why there's FormLayout as well? Need to play around more with these. Initial thoughts are too many components for layout-ing and you still cannot nail layout the way you'd normally do. Having a few more props on each component akin to some React styled-system or MUI's @material-ui/system would be great if we can keep the constraints in check so that the Checkout experience remains as native as possible.

As for the changeset (calculate and apply) I only really see this being useful for cross-selling NOT up-selling. At least I haven't figured how aa changeset can actually upgrade the initialPurchase.lineItems? So while adding new items is great, that effectively translates in to cross-selling strictly speaking. Maybe a combination of such an extension and Edit Order API would work as long as the calculatedOrder doesn't bump up the total? Need to look in to that sometime.

The good bits

Yeah, I think the developer experience is / will be great. It really doesn't get any simpler than 

Shopify App CLI

 

> shopify create extension
... select 'Checkout Post Purchase'
... enter extension name 'my-cool-checkout-extension'
... pick React + TS or whatever floats your boat
> cd my-cool-checkout-extension
> shopify register
... authenticate yourself
... select one of your dev apps
> shopify push
... or
> shopify serve

 

 

Argogogo

 

> npx argogogo my-cool-checkout-extension --typescript --react
> cd my-cool-checkout-extension
> yarn start
... even opens up a new browser tab with argogogo already loading your extension 🙂

 

 

The way Argo extensions (whether for subscriptions or checkout post-purchase or all future extension points that will follow for admin and/or checkout) are developed, registered, pushed and then later published and versioned from within the partner app dashboard is absolutely gorgeous and well done by Shopify!

 

Hope this helps y'all and hope there's some good feedback for Shopify as well (even though I am still **** how this closed beta was handled).

chenster
Shopify Partner
134 5 29

I had similar question. Here what I go back from the support:

"order editing API" which will allow for post-purchase edits, so you wouldn't be able to build a custom checkout experience. What you can do with the API is add post purchase upsell offers on the thank you page of our checkout since the thank you page is customizable and the order is created at that point in the checkout experience.

Can't we already customize  thank you page to include upsells with existing API? 

Cartoo
KarlOffenberger
Shopify Partner
1873 184 900

@chenster Yes we can use the usual Additional scripts / application proxies and yes we can use Edit Order API though that will create a calculated order and if the total price has increased, the buyer will need to be redirected to checkout payment again to settle the difference.

Argo Checkout falls in between checkout payment and thank you page and has the ability to add to the order without the buyer having to re-enter their payment details after having accepted upsell offers.

chenster
Shopify Partner
134 5 29

I see your point. Not have to re-enter their payment details after having accepted upsell offers removes a friction for customers. What Argo or the new order edit API are doing is probably use the same token during checkout to process the additional upsell items.  

Cartoo
chenster
Shopify Partner
134 5 29

@KarlOffenberger I'm still picking up Shopify cli. The previous app was developed without Cli.  How would one setup Shopify CLI using the Argo Checkout template?  I was able to setup both in  separate folder. They are not interacting with each other. 

Cartoo
chenster
Shopify Partner
134 5 29

You already had the answer but I wasn't reading thoroughly, so it's an extension not an app, the cmd is "shopify create extension --type=CHECKOUT_POST_PURCHASE"

Cartoo
Derek_Morin
Shopify Expert
216 1 34

Is there a launch date for this Argo Checkout and Argo extensions stuff?

if someone manages to reverse engineer it, can he publish it live in an app?

KarlOffenberger
Shopify Partner
1873 184 900

@Derek_Morin I'm afraid the answer to both questions is a no.

8tomo8
Shopify Partner
5 0 3

Thanks @KarlOffenberger  for taking the time to put this all together. I am too extremely frustrated Shopify took this stance after I've been on their case from the time they rolled out Shopify payments and their ability to vault card information through Stripe. This was a totally unfair stance taken by Shopify. At the very least they should have had a public submission so we could plead our case.

Have you managed to get any update on when we'll have access to the extension point in the checkout? As it's not part of any API release I guess they could open it up at any moment (here's hoping)

KarlOffenberger
Shopify Partner
1873 184 900

@8tomo8 

Hi, I am not aware of any announcements regarding release dates beyond what has already been said by Shopify. Their product teams are working hard to get this feature published and there's a discussion channel on partners #slack too. I am sure they'll make announcements in due time.

嵩さん
Visitor
1 0 0

 

嵩さん_0-1609728634724.png

I filled out this form, But shopify hasn't passed my application and I can't get any reply. 😭 

 

jql194
Tourist
15 0 3

Are there any updates on the release of this API functionality?

I didn't see anything in the docs and that form looks like it's closed.

Rishabh_Tayal
Shopify Partner
21 0 4

@KarlOffenberger When creating the shopify extension using the `shopify create extension` command, I don't see the Checkout Post Purchase option in the list.

yuchen1
Visitor
2 0 0

Me too, do you have any solutions now

KarlOffenberger
Shopify Partner
1873 184 900

@Rishabh_Tayal and @yuchen1 Right now the shopify-cli will only show extension options if your paired store has the appropriate feature flag enabled by Shopify - that is currently still being tested in beta so isn't available to everyone just yet.

I'd hold on just a little longer as Shopify improve some bits and bobs around checkout and post purchase extensions - once it's released it'll rock!

adnan-mallik
Tourist
5 1 4

they doing with this

https://shopify.dev/apps/checkout/post-purchase/ux-guidelines-post-purchase-offers

at start this API was not available now you can do the same work with above mentioned Post Purchase Checkout Extension