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).
After finishing this guide, you'll have accomplished the following:
Install saleor CLI
with npm i -g saleor
.
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.
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.
In Dashboard -> Configuration -> Shipping Methods, click on Europe and on the right side of the panel pick Global under Warehouse.
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.
saleor storefront create my-storefront-with-checkout
For now, you can stop the server with CTRL+C
.
Thanks to the CLI, the deployment process is very straightforward.
saleor checkout deploy my-checkout
Saleor Checkout consists of two projects:
my-checkout-app
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.
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.
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.Restart the development server.
You need to enable shipping methods for Europe region to be able to choose them in your checkout. So, go to your Dashboard and:
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.
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.
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.
For the purpose of this tutorial, we will focus on integration with Mollie.
Apps
click on the Checkout
app.Mollie
payment gateway for each payment option.Settings
icon at the channel configuration page.Done! You can now test the functionality of the Mollie gateway in your storefront's checkout.