Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hi everyone. First time posting here, and (hopefully) first time building out a Shopify-based payment system.
I am building a React Native cross-platform application. We are selling physical products, and intend to use a combination of Stripe and Shopify for payment/inventory/order management.
I have spent several days now trying to make sense of the Shopify documentation and various APIs. Here's what I've realised:
1) The REST Admin API is not fully-featured. There is no concept of a cart or checkout process. This makes it rather useless for a custom shopping experience inside a native app, as there is no way to perform cart calculations (tax, shipping, totals), not any way to put a temporary hold on inventory while the user proceeds through the checkout process. Inventory control is an important issue for me - I would rather notify my users of a lack of inventory before the checkout process, not at the end when there is an order-creation failure.
2) While the Mobile Buy SDK is probably fantastic, I am building a JavaScript-based RN application and am extremely averse to getting into platform-specific SDKs, especially for something as core as payment processing. On the flip side, the JavaScript Buy SDK does not seem like it was intended for a NodeJs environment at all, and seems rather poorly built - I experienced several incoherent errors just trying to get it set up. Additionally, the JavaScript Buy SDK seems to use a different ID format than the rest of the Shopify ecosystem. The IDs look like this: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='. No idea what's going on there. Morever, and more importantly, it seems like the end goal of the JavaScript Buy SDK is to produce a Shopify URL, to which you then redirect the user for the checkout process. Meaning, the JavaScript Buy SDK is not really a "buying" SDK, but more of a "cart" SDK, at the end of which you redirect to Shopify anyways. I need a way to actually process orders programmatically.
In short, how is it possible to build a custom checkout flow in a non-browser JavaScript environment? This isn't even really specific to React Native, except that I am averse to using the Mobile Buy SDKs.
This seems like a very common use case for more complex applications that require a greater level of control over their checkout flows.
As far as I can tell, the Checkout API endpoints are only available with the Sales Channel SDK. No idea why that is, but I do not need to build some application to installed in other Shopify stores, I just need to manage my own sales internally.
On a side note, I also need to support iDEAL payments. This seems possible via Mollie, but I do not see any way to manually mark orders as complete via the Mobile Buy SDKs. There does not seem to be any official flow for accepting iDEAL payments via Shopify in a native environment.
I'm really hoping there's a robust solution hiding somewhere out there. It took a good deal of research to arrive at Shopify as a provider, and I've become pretty disheartened at this apparent lack of a full-featured API.
Storefront API would be your solution. The mobile buy sdk is based on that api. I use it for a react js web app and i'm working on a react native app as well. It's fairly straight forward to consume a graphql api in react (both js and native) using Apollo.
And also:
Base64 decode this id and voila:
Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ= -> gid://shopify/Product/7857989384
@Gunnar Þorleifsson
Are you saying that the Storefront API is consumable entirely via REST? Including carting, checkout, orders, etc?
No not exactly its not REST. But it is the answer to "how is it possible to build a custom checkout flow in a non-browser JavaScript environment?"
The Storefront API is a graphql api (they go over why here: https://help.shopify.com/api/custom-storefronts/storefront-api/graphql). We use apollo ( https://www.apollographql.com/client ) to consume the storefront api for various frameworks because it's awesome.
@Gunnar Þorleifsson
Yes, sorry, I'm well aware of GraphQL. What I meant to ask is if the Storefront GraphQL API is fully-featured, because the JavaScript Buy API is not. Can you manage user's carts and progress them in a step-by-step manner through a checkout process (eg adding shipping address, adding payment method, etc)?
How is credit card tokenization handled? I want to handle most of these Shopify steps on my own server, but definitely do not want to send CC data across the wire. Can a token be procured from the client itself via the Storefront GraphQL API, and then used to pay for an order?
And I assume it's possible to manually mark an order as paid (in my case, iDEAL payment will have to happen separately via a webview)?
Thank you very much for your help!
Update: every single example (as far as I can tell) in the storefront-api-examples repo depends upon redirecting to the webUrl inevitably, and having the Shopify web-app handle the actual payment process.
This is not what I'm looking for, as this is for a native app.
Take a look at the Checkout object definition:
https://help.shopify.com/api/custom-storefronts/storefront-api/reference/object/checkout
And also all possible mutations:
https://help.shopify.com/api/custom-storefronts/storefront-api/reference/mutation
It really does not seem like it is intended or possible to manually process a payment. I need to know if this is indeed the case.
Hi Isaac,
I'm sorry - I see your point. I'm afraid I cant help you beyond the webUrl - which all roads seem to lead to. Things get a bit fuzzy in the docs when you get closer to the point where you need to transform the checkout into an order. Everything up to that step obviously is suppored in the Storefront Api - cart calculations, shipping info etc. This three month old answer seems to be pretty clear though:
https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/payment-with-storefront-api-497786
However, when scanning the docs I can see that a lot of objects reagrading the payment step have been added - CreditCard - Payment - Transaction - which leads me to believe that a full checkout is either supported and badly documented (mutation exist but not in the docs?) or soon to be supported.
Some threads mention mutations that I don't see in the docs and some referr to them as features only available for few customers (maybe shopify plus merchants?):
https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/how-to-complete-native-checkout-using-...
https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/storefront-api-checkoutcompletewithtok...
Good luck!
Thanks again @Gunnar Þorleifsson.
I started working with the Storefront GraphQL API, and ran into a case of unclear docs regarding discounts being applied to a existing checkout. I could apply a discount to a checkout via the checkoutDiscountCodeApply mutation, but I cannot figure out a way to view discount codes which were previously applied to checkouts. There is no discount (or anything similarly named) field on checkout objects, yet the discount is present on the webUrl - so it's definitely stored somewhere.
I again sent this simple inquiry to Shopify support, and was told I would have to pay a Shopify Expert to get an answer to this basic question about API functionality. Keep in mind we are already paying 30usd per month.
I've lost all patience for Shopify as a company and will be moving on to another provider.
For any future dev reading this, wondering how to incorporate Shopify into a React Native app - I would strongly urge you to avoid this company like the plague!
I completely agree with this... The docs are a mess for the most part...
I hope you were able to complete this. I am struck at a similar point like what you have mentioned. I am using the Buy SDK and to have control over the checkout experience, I am using Credit card checkout so that I can go with Shopify supported gateways (https://github.com/Shopify/mobile-buy-sdk-android#credit-card-checkout-). But when it comes to considering gift codes, shipping rates, order creation, not sure of how it is done. Please let me know if you have got any additional inputs or documents on this, that would help me to proceed.