This example features a sample e-commerce store that uses Stripe Elements, PaymentIntents for dynamic authentication, and the Sources API to illustrate how to accept card payments on the web.

The frontend code for the app is in the public/ directory.

The core logic of the Stripe integration is mostly contained within two files:

1. public/javascripts/payments.js creates the payment experience on the frontend using Stripe Elements.
2. server/node/routes.js defines the routes on the backend that create Stripe charges and receive webhook events.

You’ll need the following:

• Node.js >=10.0.0
• Modern browser that supports ES6 (Chrome to see the Payment Request)
• Stripe account to accept payments (sign up for free).
• Stripe CLI for webhook testing. Follow these installation steps to install the Stripe CLI

After the installation has finished, authenticate the CLI with your Stripe account:

stripe login --project-name=stripe-integration

Some payment methods require receiving a real-time webhook notification to complete a charge. We're using the Stripe CLI to forward webhook events to our local development server. Additionally this app is bundled with ngrok, to serve the app locally via HTTPS, which is required for the Payment Request API.

-Fork this repo and then clone locally

-Copy the environment variables file from the root of the repository:

cp .env.example .env

Update .env with your own Stripe API keys and any other configuration details. These environment variables are loaded and used in server/node/config.js, where you can review and edit other options such as the app currency and your Stripe account country.

Install dependencies using npm:

npm install

To start the webhook forwarding run:

npm run webhook

The Stripe CLI will let you know that webhook forwarding is ready and output your webhook signing secret:

> Ready! Your webhook signing secret is whsec_xxx

Please copy the webhook signing secret (whsec_xxx) to your .env file.

In a separate terminal window, start the local server:

npm run start

Lastly, you will see the ngrok URL to serve our app via HTTPS. For example:

https://<example>.ngrok.io

Use this URL in your browser to start the app. Use test card numbers to test the implementation. (https://stripe.com/docs/testing)

• Code: Romain Huet and Thorsten Schaeff
• Design: Tatiana Van Campenhout