saleor-checkout

Migrated into a monorepo: https://github.com/saleor/react-storefront

Extensible, checkout and payment integrations powered by Saleor API.

Project is in active development (see backlog).

Setup

This monorepo uses PNPM as a package manager and Turborepo for building packages.

Monorepo structure

Here's the list of each app and shared package in the monorepo (click to see a README of that project)

Apps

apps/saleor-app-checkout: a Next.js Saleor app with dashboard for managing settings and theme, backend for Checkout, and the Checkout Storefront – ready to be extended/modified
apps/checkout: an SPA React 18 checkout app, currently deprecated (kept for backward compatibility)

Packages

packages/ui-kit: UI kit for checkout and React Storefront
packages/config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
packages/tsconfig: tsconfig.jsons used throughout the monorepo
packages/checkout-storefront: Checkout store front component
packages/checkout-common: Common types and utils

Install dependencies

pnpm i

Build

To build all apps and packages, run the following command:

pnpm run build

You can also build a specific app or package by running this command:

pnpm run build --filter=checkout

In this example, we'll only build apps/checkout

Develop Saleor App

Create a tunnel for saleor-app-checkout:

cd apps/saleor-app-checkout && npx saleor app tunnel 3001

Note: the process needs to be running in the background

Before you start the server, you need to change default environment variables. Create .env.local file in each app:

apps/saleor-app-checkout

To run the development server for all the apps, use the following command:

pnpm run dev --filter=saleor-app-checkout...

Develop Checkout Storefront

When in dev, a special development server is also running for checkout-storefront on port 3002. Check out localhost:3002?checkout= and add the your token to the url.

Other

You can also run only a specific app by running this command:

cd apps/checkout && pnpm dev

Deployment

GraphQL Schema

To generate GraphQL code based on latest schema from Saleor instance defined in SALEOR_API_URL env variable run this command:

pnpm run generate

You need to run this command after each change in *.graphql files

Env variables

Change environment variables inside .env file:

SALEOR_API_URL — GraphQL endpoint of your Saleor

Example:
```
https://my-env.eu.saleor.cloud/graphql/
```
To run sandbox Saleor environment in Saleor Cloud use this command:
```
npx saleor project create && npx saleor environment create
```
You can also run Saleor locally. See Saleor docs for more instructions
CHECKOUT_APP_URL — URL of deployed Checkout App

Example:
```
https://saleor-app-checkout.vercel.app
```
See guide below on how to deploy the Checkout App

There are more environment variables available in each app. Go to their README's to learn more

Vercel

Read Vercel deployment guide in docs/vercel.md

Payment gateways configuration

Checkout app supports two payment gateways that you can configure:

Payment gateways can be configured in the Checkout app inside Saleor dashboard. Go to Apps > Third party apps > Checkout.

You can toggle, which payment gateway handles each different payment options per channel:

To use payment gateway, you need to provide its credentials. You can do that by clicking settings icon in channel configuration page

Mollie

Read setup guide in docs/mollie.md

Adyen

Read setup guide in docs/adyen.md

FAQ

Read FAQ in docs/faq.md

Ports

apps/react-storefront: 3000
apps/saleor-app-checkout: 3001
packages/checkout-storefront: 3002
apps/checkout: 3003
packages/ui-kit storybook: 6006

saleor/saleor-checkout