Adding subscription products to a custom React storefront (using Shopify checkout)

[natatat]

I'm trying to add subscription products to my custom, API-driven React storefront that uses the Storefront API (so I'm not using a Shopify theme).

I've added Recharge to my Shopify store, but am running into an issue where subscription-only products in Shopify are only available on the Shopify Online Store and don't show up in my custom storefront. I also can't get the subscription product to show up when I create a checkout through the Storefront API.

Help!

[martinfotp]

I believe it depends on when you installed ReCharge.

If you’re on a version of ReCharge that uses the Shopify Checkout, it currently is not possible to add checkout line items with selling plans using the Storefront API. The Shopify Subscriptions API roadmap says that this should become available H2 this year.

EDIT: I am wrong, it’s now H1 2022. https://shopify.dev/concepts/apps/subscriptions-faq

If you’re on an older version of ReCharge that uses the external ReCharge checkout then you can use the ReCharge Pro Checkout API to create a ReCharge checkout with subscription items. You’ll then need to redirect to the ReCharge checkout in order to complete the transaction. You’ll need to build a backend wrapper for the API as the Checkout API is not a public API and should not be exposed to the internet - you can do things like set line item prices to zero through this API!

[hoanginnomize]

I am also trying to associate a selling plan to a checkout (created from my custom React app) using Storefront API. However, I cannot find any references to do that. The checkout method seems not support the ability to assign a selling plan. I am using PayWhirl for our subscription payment

[martinfotp]

It's in the product roadmap. Looks like since my last post it has moved up to Q3 21. Expect support later in the year.

https://shopify.dev/concepts/apps/subscription-apps#product-roadmap

[hoanginnomize]

Yeah. hopefully, they can start this earlier next month

[martinfotp]

We're continuing to use the ReCharge Checkout API for our headless storefront and will look to migrate once support arrives. Looking at the roadmap, there's quite a features we may hold off for later this year / early next year.