Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hey everyone,
I work for a client who currently has a classic Shopify online store, with a payment system (vivawallet) and a delivery system (post office) managed through the respective Shopify modules of each service. Finally they use one of the themes offered by Shopify.
My role in this project is to create a React application (Next.js) in order to have a custom front end and to use Shopify as an e-commerce interface (stock management, site content management, etc...).
My questions are the following :
- I started experimenting JS Buy SDK (Shopify Buy) with my React app: I have good access to the products and their details (price, qty...). However, I would like to have the possibility to allow a user to "connect" by accessing the CustomerAccessToken and thus retrieve all the information inherent to it. However, in the JS Buy SDK, there is no method that stipulates the possibility to do so. Is it possible to get this kind of information via the JS Buy SDK or is it necessary to go through the Storefront API?
- For justified reasons, the customer wishes to use a third party payment service: payGreen. Is it possible to implement this service so that when the user makes the payment, it is taken into account within the Shopify interface? The same applies to a delivery service (courier on bets).
I specify that payGreen is not part of the Shopify partners and does not benefit from an integrable module.
- Does the use of Storefont API absolutely require the use of a node.js server? Or can a simple graphQL request be sufficient?
Thank you for your answers 🙂
Have a nice day !
The Storefront API requires Apollo for easily connecting and pulling data from the store. You can also do mutations with it where you create a checkout and add items to it.
For the Javascript Buy Sdk you need to use the unoptimized version to have access to CustomerAccessToken. This is not recommended because it's slow and pulls a bunch of metadata that you don't need.
That being said you can use Apollo Boost for connecting to the Storefront API and get any info you need and none you don't. GraphQL is efficient because it only queries the info you need and none of the metadata.
Apollo is an npm package and runs on Node. Since these APIs are Javascript and JSON they work better on Node.
hey @michaeltheodore thanks for your response!
Can I just use `fetch()`, built-in with JS and avoid to have a larger bundle?
I'm currently using it with GraphQL query and it works like a charm.
Of course you can use what you're most comfortable with. 🙂
You may use any JS client and do not need to run node. I personally rewrote an entire store then deployed to JAMSTACK using the Storefront API as the client was not satisfied with Shopify's non-commerce features (pages, blogs)
Apollo is great however the stack is pretty hefty. So we implemented all queries and mutations through axios (though you could use fetch for all that matters) as long as everything is formatted properly the how doest really matter.
Regarding the payment method, unless you can integrate that payment as a gateway in shopify you would have to create a separate checkout and then "create" the order afterwards marked as PAID in shopify, it would be a bit convoluted to be fair...