Subscriptions with a headless setup - using the Shopify checkout

Retired Boards Appdev Custom Storefronts
1

Currently, I am testing out how to setup subscriptions on a Shopify store with a headless setup. I connect my Nuxt frontend to the store through the Storefront API with GraphQL.
I have been looking at several subscription apps (eg. ReCharge and Native Subscriptions), but I am facing problems when sending the line items to the checkout. I use the checkoutLineItemsAdd mutation (https://shopify.dev/api/storefront/reference/checkouts/checkoutlineitemsadd) but cannot send the selling plan along to pick up the subscription (and subscription discounts) in the checkout.

Can you help me clarify whether it is possible at the current state of Storefront API/headless setups for Shopify stores or not.

Looking forward to hearing from you.

2

I’ve been battling with this question too and found out, that Checkout API does not and will not support subscriptions.

Cart API does support subscriptions, but the cart API redirects users to cart checkout url. Programmatically completing cart like completing Checkout is not supported as of now.

It is as of now not possible to build a headless subscription setup.

What i’ve come up with to provide headless subscription setup (but not put in action yet), is to:

  1. Create customer with shippingAddress and paymentMethod

  2. Create subscription contract

  3. Associate customer with subscription contract

  4. Create subscription billing attempt

  5. Create order

Something similar what Shopify does backend when a subscription product is bought.

Not sure if this will work, but kind of sounds legit :slightly_smiling_face:

Hope someone from Shopify could comment.

3

Hi Kaiako,

Did the solution you outlined end up working out for you? Did you find a solution?

Thanks,

Kevin

4

Hi,

You can use ReCharge for the subscription.

Pull down the Product from the Store Front Products API, and use the Selling Plan Groups (this is the subscription part)

You need to use the Storefront Cart API (The checkout API will not work)

  1. Create a cart (Storefront Cart API)

  2. Add products to the cart (Storefront Cart API)

  3. Redirect the user to the checkout URL that was originally provided with the Cart API.

5

H_dev were you able to add the subscriptions in your project? I’m able to pull my sellingplangroups and see the percentage discount, but how do I add the product to the card with the discount applied?