saleor / saleor-checkout Goto Github PK

Migrated into a monorepo: https://github.com/saleor/react-storefront | The first fully open source and production-ready checkout experience.

Home Page: https://saleor-checkout.vercel.app

TypeScript 98.79% JavaScript 0.63% HTML 0.01% CSS 0.54% Shell 0.02%

checkout saleor-checkout graphql nextjs react saleor tailwindcss

saleor-checkout's Introduction

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-checkout's People

Contributors

Stargazers

Watchers

saleor-checkout's Issues

Checkout Order Summary Images not showing

Images for the Order Summary section of the checkout page are not displaying correctly.

Next.js not loading environment variables in browsers

Steps to reproduce the problem

Make sure env variables are defined in .env.local or in the root of monorepo in .env
Run saleor-app-checkout on main brach with pnpm run dev
Visit the app at localhost:3000

Current result

NEXT_PUBLIC_SALEOR_API_URL is not exposed to the client: undefined in browser, OK in node.

Expected behavior

NEXT_PUBLIC_* variables are loaded correctly in browsers

Environment

System:

OS: macOS 12.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 174.21 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh

Binaries:

Node: 18.2.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.9.0 - /usr/local/bin/npm
Watchman: 2022.05.16.00 - /usr/local/bin/watchman
pnpm: 7.5.2

Browsers:

Brave Browser: 103.1.40.113
Chrome: 103.0.5060.134
Firefox Developer Edition: 101.0
Safari: 15.5

Checkout: ShippingMethods.tsx missing key prop

Console error ShippingMethods.tsx missing key prop should be added to the map function around line 63

Missing key values and onChange handlers.

Console complaining about missing keys in:
ShippingMethods.tsx - <Radio /> component
AddressFrom.tsx - <TextInput /> component
UserAddressSectionContainer.tsx - <option />

Console complaining about no onChange props in:
Checkbox.tsx <input />
Radio.tsx <input />

Checkout: mising module '@saleor/ui-kit'

All UI Components are thowing compile errors when you run dev.

Cannot find module '@saleor/ui-kit' or its corresponding type declarations.
    3 |   Button as UiKitButton,
    4 |   ButtonProps as UiKitButtonProps,
  > 5 | } from "@saleor/ui-kit";

Checkout: AddressForms.tsx missing key prop

Console error AddressForm missing key prop. AddressForms.tsx in map function around line 122

How to fix websocket connection error ?

Hello,

How could i fix websocket connection error which is showing from browser console?

WebSocket connection to 'wss://checkout-shop.abc.com:8001/ws' failed: 
WebSocketClient @ WebSocketClient.js:16

Thank you.

Checkout: Country Area should be State for US region

When adding a billing or shipping address the Country Area field should be named State. Country area is going to be very confusing to anyone in the US.

checkout .env template

There is no provided .env template or instructions on how to properly setup the checkout project.

Checkout: PasswordInputComponent TextInputComponent changing from uncontrolled to controlled.

Console error PasswordInputComponent TextInputComponent changing from uncontrolled to controlled.

Shows when logging into user account on checkout.

Use JWS to check Saleor webhook signature

Use logic form saleor-app-template in saleor-app-checkout.

Implement RFC #137: `checkout` and `checkout-app` merger

Discussed in #137

^{Originally posted by mmiszy July 12, 2022}

Objective

Merge checkout and checkout-app into checkout-app Next.js application.

Goals:

simplify the repo
simplify workflow
simplify deployment

Non-goals:

change behaviour of these apps apart from what’s necessary

Motivation

Currently, in order to deploy Saleor Checkout, one needs to:

Fork saleor-checkout
Import & deploy checkout-app to Vercel
Configure it in Saleor
Update env variables & redeploy to Vercel
Import & deploy checkout to Vercel

By merging checkout and checkout-app into a single app, we’ll be able to drop the last step.

This is particularly important because, as our onboarding experience shows, the existence of two apps and their similar names are confusing to our users.

Things to keep in mind

Why the apps were divided

These two apps were divided in order to make it easier for our users to keep track of remote changes in their forks of saleor-checkout. The idea was for them to easily pull changes into checkout-app while being able to modify checkout without any concerns.

Unfortunately, this goal is not really met right now: users still face merge conflicts in checkout when they pull from the upstream repository to update checkout-app.

`checkout` is an SPA

checkout-app is a Next.js application while checkout is a Single Page Application based on CRA. This distinction was introduced in order to make it easier for our users to reuse checkout, host on static hostings or embed it inside existing applications simply by using a component.

Design Proposal

Merge checkout into checkout-app.

We’ll keep the structure of checkout-app as is but create a separate directory just for checkout:

.
├── apps
│   ├── checkout
│   │   └── (…)   ⬅ render `checkout-storefront` package for backward compatibility
│   └── saleor-app-checkout
│       ├── README.md
│       ├── backend
│       ├── frontend
│       ├── (…) existing checkout-app folders
│       └── pages
│           └── checkout-spa.tsx   ⬅ this page renders Checkout SPA
└── packages
    └── checkout-storefront
        ├── (…)   ⬅ other files moved from existing `checkout`
        └── index.tsx   ⬅ export a single component

We’ll add one new page to checkout-app/pages folder – it’ll only render the <Root /> components from packages/checkout-storefront.

Why?

This way, users have a way to use checkout SPA without Next.js if they need to:

They can copy it to their own react apps
They can install the repo via npm or git submodules and use the <Root /> component
They can next export to get a static website (I was able to get this working by using some hacks in Next.js – see below)

It’s also way simpler to deploy to Vercel and develop: there’s just a single application to deploy.

Example next.config.js

const withTM = require("next-transpile-modules")();

const exportCheckoutSpa = Boolean(process.env.EXPORT_CHECKOUT_SPA);

/**
 * @type {import('next').NextConfig}
 */
const checkoutSpaConfig = {
  images: {
    loader: "custom",
  },
  exportPathMap: async () => {
    return {
      "/": { page: "/checkout-spa" },
    };
  },
};

/**
 * @type {import('next').NextConfig}
 */
const checkoutAppConfig = {
  i18n: {
    locales: ["en-US", "pl-PL"],
    defaultLocale: "en-US",
  },
  images: { domains: ["localhost"] },

  // eslint-disable-next-line require-await
  async redirects() {
    return [
      {
        source: "/",
        destination: "/channels",
        permanent: true,
      },
    ];
  },
  experimental: {
    esmExternals: false,
  },
};

/**
 * @type {import('next').NextConfig}
 */
module.exports = withTM({
  ...(exportCheckoutSpa ? checkoutSpaConfig : checkoutAppConfig),
  reactStrictMode: true,
  eslint: {
    dirs: ["pages", "backend", "frontend", "config"],
  },
});

Unable to checkout

Hello,

I am getting following error from console when trying to checkout.

checkout:dev: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!../../node_modules/.pnpm/[email protected]_ophkbroklgd6jdvupnp5h6xq4i/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!../../node_modules/.pnpm/[email protected][email protected]/node_modules/source-map-loader/dist/cjs.js!./src/index.css 26.3 KiB [built] checkout:dev: ../../packages/ui-kit/dist/esm/index.js 79 KiB [built] checkout:dev: webpack 5.72.0 compiled successfully in 2568 ms checkout:dev: No issues found. checkout-app:dev: wait - compiling /channels (client and server)... checkout-app:dev: wait - compiling... checkout-app:dev: event - compiled client and server successfully in 2.6s (953 modules) checkout-app:dev: Material-UI: The fadecolor utility was renamed toalphato better describe its functionality. checkout-app:dev: checkout-app:dev: You should useimport { alpha } from '@material-ui/core/styles'checkout-app:dev: Material-UI: the createMuiTheme function was renamed to createTheme. checkout-app:dev: checkout-app:dev: You should useimport { createTheme } from '@material-ui/core/styles' checkout-app:dev: wait - compiling /_error (client and server)... checkout-app:dev: wait - compiling... checkout-app:dev: event - compiled client and server successfully in 1081 ms (954 modules)

When trying to access the checkout page manually, i get following error (screenshot)

To reproduce issue

Clone and install checkout repo
start dev mode
checkout any product from storefront.

Is there anyway to fix it?
Thank you.

We need to add a Dockerfile to implement rapid deployment using docker

It would be great if a Dockerfile could be added

Checkout: Payment providers not listing.

Payment providers are commented out and not listing. CheckoutForm.tsx

checkout fails on pnpm run dev

Checkout fails to run on port 8001 when running pnpm run dev

Download the source and unzip.
run pnpm i
run pnpm run dev
watch the console logs

checkout:dev: > [email protected] dev C:\saleor-checkout-main\apps\checkout
checkout:dev: > PORT=8001 craco start
checkout:dev:
checkout:dev: 'PORT' is not recognized as an internal or external command,
checkout:dev: operable program or batch file.
checkout:dev:  ELIFECYCLE  Command failed with exit code 1.
checkout:dev: Error: command finished with error: command (apps\checkout) pnpm run dev exited (1)

ERROR turbo run build failed

The following error occurs in some cases, such as building an image using git submodule in docker, and the ERROR disappeared after I used "turbo": "1.2.4"

#vercel/turbo#1257

=> ERROR [15/15] RUN pnpm run build 0.8s

[15/15] RUN pnpm run build:
#19 0.801
#19 0.801 > [email protected] build /checkout
#19 0.801 > turbo run build
#19 0.801
#19 0.821 ERROR failed to calculate global hash: error hashing files. make sure that git has been initialized failed to hash files /checkout/pnpm-lock.yaml, /checkout/package.json: git hash-object exited with status: exit status 128. Output:
#19 0.821 fatal: Not a git repository: ../.git/modules/checkout
#19 0.821
#19 0.824 ELIFECYCLE Command failed with exit code 1.

executor failed running [/bin/sh -c pnpm run build]: exit code: 1
ERROR: Service 'checkout' failed to build : Build failed