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