Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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
Did you actually get to see this in action?
yes i noticed it today i'm also seeking for these functionality API.
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?
I cant find any documentation. I tried shopify support but no clear answer so far.
Hi @all
Oh boy I am glad you mention this.
So let me recap what's happened regarding this entire announcement from 11/02.
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:
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!
It sucks that they would do that.
Thanks for all the info.
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.
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:
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
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)
@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.
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:
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:
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
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).
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?
@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.
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.
@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.
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"
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?
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)
@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.
I filled out this form, But shopify hasn't passed my application and I can't get any reply. 😭
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.
@KarlOffenberger When creating the shopify extension using the `shopify create extension` command, I don't see the Checkout Post Purchase option in the list.
Me too, do you have any solutions now
@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!
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