https://github.com/rwieruch/react-express-stripe

💰 Minimal Boilerplate for Stripe used in React and Express. Charge payments from your customers with this project.
https://github.com/rwieruch/react-express-stripe

express express-js react reactjs stripe stripe-api stripe-checkout stripe-payment stripe-payments

Last synced: 9 days ago
JSON representation

💰 Minimal Boilerplate for Stripe used in React and Express. Charge payments from your customers with this project.

• Host: GitHub
• URL: https://github.com/rwieruch/react-express-stripe
• Owner: rwieruch
• License: mit
• Created: 2017-06-12T07:22:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-12T08:19:12.000Z (over 4 years ago)
• Last Synced: 2025-01-16T09:32:57.144Z (17 days ago)
• Topics: express, express-js, react, reactjs, stripe, stripe-api, stripe-checkout, stripe-payment, stripe-payments
• Language: JavaScript
• Homepage: https://www.robinwieruch.de
• Size: 195 KB
• Stars: 244
• Watchers: 9
• Forks: 67
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stripe Server Checkout with React and Express

[![Build Status](https://travis-ci.org/rwieruch/react-express-stripe.svg?branch=master)](https://travis-ci.org/rwieruch/react-express-stripe) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/)



- **Deprecated due to SCA:** ~[A full walkthrough tutorial of implementing this boilerplate project.](https://www.robinwieruch.de/react-express-stripe-payment/)~

- SCA ready Tutorials: 

  - [Stripe Server Checkout](https://stripe.com/docs/payments/checkout/server#create-one-time-payments)

  - [Stripe Webhook Fulfillment](https://stripe.com/docs/payments/checkout/fulfillment#webhooks)

## Installation

- `git clone [email protected]:rwieruch/react-express-stripe.git`

- `cd react-express-stripe`

**Important:** Setup works only with backend hosted somewhere reachable via an IP or domain. Stripe's Webhooks are not going to work on a localhost backend. The frontend application can run locally though.

### Stripe Registration and API Keys

- Register at [Stripe](https://stripe.com/) and Setup a Payment Account to access the Dashboard

- Find your API Keys:

- Replace frontend 

  - API keys: `YOUR_STRIPE_PUBLIC_KEY`

- Replace backend 

  - API keys: `YOUR_STRIPE_SECRET_KEY`

  - Webhook secret: `YOUR_STRIPE_WEBHOOK_SECRET`

    - needs a [Webhook setup on your Stripe dashboard](https://stripe.com/docs/payments/checkout/fulfillment#webhooks)

### Frontend

- `cd frontend`

- `npm install`

- `npm start`

- visit http://localhost:3000/

### Backend

- `cd backend`

- `npm install`

- `npm start`

- visit http://localhost:8888/

## Usage

When using it in production, you have to use a real credit card. Otherwise, in development mode, you can use a [Stripe's test credit cards](https://stripe.com/docs/testing#cards):

- Email: Any Email

- Number: 4242 4242 4242 4242

- Date: Any Date in the Future

- CVC: Any 3 Numbers