Architecture Overview

Integrating React Storefront with Saleor Checkout [ DEPRECATED]

Heads up!

This article is deprecated. Starting from Saleor 3.5, the Saleor React Storefront (SRS) is fully integrated with Saleor Checkout out of the box. You can install the SRS by running saleor storefront create --demo or visit the repository here.

Saleor platform comprises many powerful parts that can be easily combined and integrated using CLI tool. This guide will show you how you can swiftly add Saleor Checkout to an existing Saleor React Storefront (SRS).

What will I learn?

After finishing this guide, you'll have accomplished the following:

  1. Created an instance of Saleor React Storefront.
  2. Deployed Saleor Checkout SPA and Saleor Checkout App to Vercel.
  3. Configure a custom payment gateway to be used with the Checkout App.

Prerequisites

  1. Install saleor CLI with npm i -g saleor.

  2. Integrate CLI with Vercel and Github. In your Terminal, run:

    saleor vercel login
    
    saleor github login
    

    In each case, you will be redirected to a dedicated page where you can finish the integration process.

  3. If you wish to integrate the Checkout with a third-party payment gateway, Saleor enables that with two payment gateways: Mollie and Adyen. Please follow their Getting Started pages and make sure to set up test accounts.

  4. In Dashboard -> Configuration -> Shipping Methods, click on Europe and on the right side of the panel pick Global under Warehouse.

Click Global under Warehouse in Shipping Methods for Europe.
Click Global under Warehouse in Shipping Methods for Europe.

Step 1. Creating Saleor React Storefront (SRS).

You can integrate Saleor Checkout with any existing storefront. Yet, for the simplicity sake let us use a ready-made React Storefront instance provided by Saleor.

  1. Open your Terminal in the directory you want to install your storefront.
  2. Run saleor storefront create my-storefront-with-checkout
Saleor React Storefront installed in your Terminal.
Saleor React Storefront installed in your Terminal.

For now, you can stop the server with CTRL+C.

Step 2. Deploying Saleor Checkout App and Checkout SPA. Installing Checkout App in Dashboard.

Thanks to the CLI, the deployment process is very straightforward.

  1. Being in your Terminal, type in: saleor checkout deploy my-checkout
Deploying Checkout to Vercel.
Deploying Checkout to Vercel.
  1. In the installation wizard, select your Saleor organization and the environment.

Saleor Checkout consists of two projects:

  • a Next.js Saleor App installed in Dashboard for managing settings and theme and backend for checkout SPA, in this tutorial named my-checkout-app
  • the frontend part - a SPA React 18 project, in this tutorial named my-checkout

The script creates a project in Vercel and deploys the Checkout App. The URL of the deployed Checkout App is then set in the environment variable inside the Checkout App. Next, the Checkout App is redeployed. It is also installed in your Dashboard. Lastly, the script creates a project in Vercel for Checkout SPA and deploys it.

After a while, you will have both apps deployed to Vercel, and the Checkout App will also be installed in your Saleor Dashboard.

Checkout SPA and Checkout App deployed to Vercel.
Checkout SPA and Checkout App deployed to Vercel.
Checkout App installed in Dashboard.
Checkout App installed in Dashboard.

The CLI will inform you about some useful links, i.e. to your Dashboard and GraphQL Playground. Also, it will print out the steps for connecting the SRS with the Saleor Checkout.

Saleor CLI deploy summary message.
Saleor CLI deploy summary message.
  1. Copy the url of your Checkout SPA from the CLI summary message and paste it into the .env file in the SRS code under NEXT_PUBLIC_CHECKOUT_URL= variable.
Paste the environment variable into .env file in SRS.
Paste the environment variable into .env file in SRS.

Restart the development server.

Step 3. Setting the shipping methods for Europe region.

You need to enable shipping methods for Europe region to be able to choose them in your checkout. So, go to your Dashboard and:

  1. Click the Configuration button.
Dashboard configuration button.
Dashboard configuration button.
  1. Scroll down to Shipping methods and click the card.
Shipping methods.
Shipping methods.
  1. On the list of Shipping Zones click Europe.
Europe Shipping Zone.
Europe Shipping Zone.
  1. In the right bottom corner, select Global from the Select Warehouse list.
Global warehouse.
Global warehouse.

Got to your storefront and try to go through the process of adding a product to cart. After clicking the Checkout button you'll be redirected to the checkout SPA view, where you can fill in the form and select the shipping methods.

The default dummy payment gateway.

Saleor React Storefront ships with a pre-built simple test payment gateway that will always return a successful payment. Just type in any card number and other random payment details and click pay.

Dummy payment gateway.
Dummy payment gateway.

However, having set the NEXT_PUBLIC_CHECKOUT_URL environmental variable in the SRS you are able to integrate it with a third-party payment gateway with the use of the Checkout App.

Step 4. Configuring a custom payment gateway.

For the purpose of this tutorial, we will focus on integration with Mollie.

  1. Go to your Dashobard and inside the Apps click on the Checkout app.
  2. Toggle, Mollie payment gateway for each payment option.
Toggle Mollie payment gateway.
Toggle Mollie payment gateway.
  1. Click the Settings icon at the channel configuration page.
Checkout App configuration cogwheel.
Checkout App configuration cogwheel.
  1. Provide the credentials obtained from your Mollie account.
Mollie credentials.
Mollie credentials.
Mollie credentials in the Checkout.
Mollie credentials in the Checkout.
  1. Go to your Mollie Dashboard and in Settings -> Website Profiles -> Payment methods, toggle Payment methods.
Enable payment methods in Mollie Dashboard.
Enable payment methods in Mollie Dashboard.

Done! You can now test the functionality of the Mollie gateway in your storefront's checkout.


Help us improve our docs. Edit this page on GitHub