Shopify is one of the most popular e-commerce platforms and is regularly preferred by our clients. In my last encounter with this module, I had a chance to work on the Shopify React Native app for a cosmetics brand.
The mobile app was designed to allow the purchase of products. To further this process, Shopify even features a Storefront API with which we can customize the buying experience.
Smooth checkout process for one-time products?
In the simplest scenario, after creating a ‘checkout’ object in our app, Shopify will generate a checkout URL for us to use. After redirecting to it, we can finalize purchases through Shopify’s web checkout form thereby preventing us from implementing payments from scratch in our app. It was also the method that we have chosen in our project.
But if any problems hadn’t have appeared, I wouldn’t have written this article.
The point is, that besides regular orders of one-time products, we had to implement subscription orders. In addition to this, it should be possible to buy one-time products and subscriptions in a single checkout process.
Checkout process: an overview
When I started to work on subscriptions, I had already prepared the entire checkout process for regular products. In short, through a Storefront API, that procedure appeared like this:
- checkoutCreate – create a Checkout object on Shopify. Besides the checkout line items, it's possible to send the shipping address as a payload here.
- checkoutLineItemsUpdate – to handle all product changes in the cart.
- checkoutCustomerAssociate – if a user has an account, associate them with the Checkout object.
- checkoutGiftCardApply, checkoutGiftCardRemove – our app was supposed to allow for applying gift cards and discount codes.
- checkoutShippingAddressUpdate – after choosing products, the next step in the app was to collect shipping data.
- As mentioned before, to finalize the payment I made a redirection to Shopify’s web checkout.
- To restore the checkout process in case a user leaves the app before payment:
- For registered customers – together with all user data which I asked for in-app initialization, I received the customer’s lastIncompleteCheckout.
- For unregistered users – I asked for a ‘checkout’ based on the saved ID found in storage, and was able to recognize if it’s completed, thanks to the completedAt
Subscription management
For managing subscriptions, our client chose one of the Shopify plugins – ‘Recurring Billing by Recharge.’ It’s very easy to set up if you create a website with one of the provided Shopify themes, but it turned out to be far more difficult to figure out how to use it in our React Native app.
I added some initial test subscription products in the Recharge plugin admin panel, opened Recharge API documentation, and followed my first thought. The plan seemed to be perfect: find a subscription product ID and just add it to the Checkout, as you would with other products. I fetched the subscription products, looked up an ID, and made my first try. It didn’t work, with the error citing something about the wrong product ID. I checked subscription response once again, and besides the ID, I also found shopify_product_id - “that's what I need” – I thought. Yet, I still had no success with adding the product to the Checkout module.
Enable subscription products
I thought that maybe I’m using the Recharge API unnecessarily, as I found that subscription products added in Recharge were also visible on the list of all Shopify products in the admin panel. But when I fetched all products as I did so far, the subscription products were not there. After a long search, I discovered that I should enable subscription products for the proper sales channel in the Shopify admin panel.
That’s when they started to appear on the list, so I tried to add a subscription to Checkout once again. However, this time, I did so with the product ID received from the Shopify Storefront API. “It worked!” But... the subscription was added to checkout as a one-time product. “End of ideas, time to Google.”
Select the ‘Cart’
There wasn’t too much information that could be helpful in my case. That made me feel like the first person on earth trying to implement Shopify subscriptions using a mobile app. I wasn’t so far from the truth – as I read on the Shopify site that Shopify Subscription APIs are quite a new feature. And to be able to go through the whole checkout process with both ‘subscription and regular products’ instead of the Checkout object, I should use the ‘Cart’ which was released with the latest Storefront API version from October 2021.
“It’s only October 2021 – that explains why Google didn’t want to help me! “
Examining the Cart process
Fortunately, after discovering that I should switch to the Cart, things started to move in the right direction. But Cart doesn’t have all methods of Checkout, and some changes were required. I’ll point out all steps for Cart as I did above for the Checkout process.
- cartCreate – no surprises here, similar like before we can pass cart items here. For subscription products besides quantity and ID, we have to pass sellingPlanId. It’s not possible to add a shipping address, but it is possible to pass discount codes.
- cartLinesUpdate, cartLinesRemove, cartLinesAdd – to modify cart products.
- cartBuyerIdentityUpdate – to establish a connection between the cart and customer.
- It’s not possible to add or remove gift cards with the Storefront API. Users can add them after redirecting to Shopify’s web checkout.
- Same as with gift cards – it's only possible to modify the shipping address only after redirection to checkoutUrl.
- As mentioned above, apply Cart returns to checkoutUrl.
- Shopify Cart doesn’t have any status which can tell us if payments have already been completed. In case when a user leaves the app and returns, by using the Storefront API only, it was impossible to detect if I should show him the old Cart. To handle this, on the backend, we had to use Shopify webhooks to recognize the payment state and prepare our custom endpoint to verify the Cart status.
Process completion
Finally, after making all those changes we were able to finish the whole checkout process for one-time and subscription products. Subscriptions are increasingly popular, especially in the United States, and there’s a significant chance that more clients would like to have a similar feature in their apps or on websites. I hope that this article will prove helpful. I think it has all the information I was looking for in October 2021 that I couldn’t find in one place.
