Custom checkout in JavaScript

Building a custom checkout flow allows you to tailor the customer's checkout experience to your exact needs, delivering a unique, branded journey that can help to boost conversions and improve customer satisfaction.

Creating a custom checkout is made possible by interacting with the Afosto GraphQL API, which can be accessed at afosto.app/graphql. This API encompasses all necessary queries and mutations to modify the required information for the cart, enabling it to progress through the checkout process and initiate payment.

Thanks to the versatility of the GraphQL API, you can construct a checkout flow in virtually any environment, ensuring you can provide the optimal experience to your customers.

To interact with the GraphQL API for the following guides, we'll be using the @afosto/storefront package. This involves setting up the client in a similar way to what you've seen in previous sections:

1import StorefrontClient from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

However, it's important to note that the client itself does not natively include all methods needed for the checkout process. When the method does not exist, we will employ the query method of the client to build and execute custom queries and mutations, providing a direct interface with the GraphQL API.

In the following guides we will explain the checkout process based on the flow that the Hosted Checkout uses.