Stripe Developer Office Hours - Checkout with QR code

🎬 Watch on YouTube

Deployed demo app

Requirements

• Node + Express backend
• React frontend
• Create a Stripe account
• API keys for your account
• Accept payments with Stripe Checkout

How to run Server

This project uses Express web framework for Node.js as its server. Here's how to run it after cloning.

1. Create and populate a .env file. There's a sample .env file in server/. Paste in the API keys for your account and 3 price IDs.

2. Install dependencies, and start up the backend server.

cd server/
npm install
npm start

How to run Client

This project uses React as its client. Here's how to run it after cloning.

1. [Customize the look and feel of Checkout in the Stripe Dashboard] by going to Brand Settings(https://stripe.com/docs/payments/checkout/customization#branding).

2. Create 3 products and prices using the Stripe Dashboard.

3. Install dependencies, and start up the React client.

cd client/
npm install
npm start

5. Go in your browser http://localhost:3000 to see the demo

Note

If you would like to try this out end-to-end using your own phone, you would need to either 1) deploy this app (e.g. using Heroku) so it has an publically accessible url, and update this info in the .env file. Or 2) use tools such as ngrok.

More resources

• Node.js Express Starter
• Getting started with React Stripe.js
• Official Accept a payment guide