How do I set up my Shopify checkout with Nacelle?

Nacelle’s NPM Package for Shopify Checkout

Nacelle offers a NPM package that leverages Shopify checkout client for headless storefronts. This is not a required package, but is offered to merchants needing to set up a seamless connection to Shopify for checkout. 

The package information is shared here: https://www.npmjs.com/package/@nacelle/shopify-checkout

If you are using a custom Shopify endpoint - please be sure to read through the information below (also provided in the documentation): 

If you'd prefer to specify a Shopify Storefront GraphQL API endpoint directly, without supplying a myshopifyDomain or storefrontApiVersion, you may do so by specifying a customEndpoint when initializing the checkout client. For example:

const checkoutClient = createShopifyCheckoutClient({

  storefrontCheckoutToken: '<your-storefront-api-token>',

  customEndpoint: '<your-storefront-api-endpoint>'});

Suggested Checkout Error Logging

Errors when checking out can be a main frustration for customers and a huge loss for merchants. Nacelle suggests setting up logging using a tool like Sentry.io to log key errors in the checkout process. Sentry’s documentation is available here. 

Once Sentry is installed (JS SDK), it will automatically capture any exceptions thrown that are unhandled and log them to the dashboard for further review and action for you. As long as errors are truly unhandled, they will get captured by Sentry right away.. 

You are also able to manually add errors to Sentry too. Anywhere there's a `try catch` or `.catch()` Sentry wont do anything with those errors because they are considered “caught” errors. For example:

You have a component that customers click on to go to checkout and that file contains a catch{} block that catches errors that come back from trying to create a checkout.  In the event of an error, this catch block sets the loading state of the checkout button back to normal so that customers don’t know if something went wrong. In this instance, because this is a caught error, Sentry does not log it for you automatically. In this instance, you have to explicitly send an error to Sentry using an approach as described in the Sentry documentation.

If the catch block passes the error to the application state, it is recommended you do something with that state to indicate to the user as to why the checkout failed - such as a pop up with the error. This will be useful in customer reports and could show up in other tools like Hotjar in the event of an error. 

Next.js: https://docs.sentry.io/platforms/javascript/guides/nextjs/

NuxtJS: https://sentry.nuxtjs.org/