README.md

Example using Stripe with TypeScript and react-stripe-js 🔒💸

• Demo: https://nextjs-typescript-react-stripe-js.now.sh/
• CodeSandbox: https://codesandbox.io/s/nextjs-typescript-react-stripe-js-rqrss
• Tutorial: https://dev.to/thorwebdev/type-safe-payments-with-next-js-typescript-and-stripe-4jo7

This is a full-stack TypeScript example using:

• Frontend:
  • Next.js and SWR
  • react-stripe-js for Checkout and Elements
• Backend
  • Next.js API routes
  • stripe-node with TypeScript

Included functionality

• Making .env variables available to next: next.config.js
  • NOTE: when deploying with Now you need to add your secrets and specify a now.json file.
• Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via loadStripe helper: components/Layout.tsx.
• Stripe Checkout
  • Custom Amount Donation with redirect to Stripe Checkout:
    • Frontend: pages/donate-with-checkout.tsx
    • Backend: pages/api/checkout_sessions/
    • Checkout payment result page that uses SWR hooks to fetch the CheckoutSession status from the API route: pages/result.tsx.
• Stripe Elements
  • Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect):
    • Frontend: pages/donate-with-elements.tsx
    • Backend: pages/api/payment_intents/
• Webhook handling for post-payment events
  • By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add micro-cors and verify the webhook signature of the event. All of this happens in pages/api/webhooks/index.ts.
• Helpers
  • utils/api-helpers.ts
    • helpers for GET and POST requests.
  • utils/stripe-helpers.ts
    • Format amount strings properly using Intl.NumberFormat.
    • Format amount for usage with Stripe, including zero decimal currency detection.

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npm init next-app --example with-stripe-typescript with-stripe-typescript-app
# or
yarn create next-app --example with-stripe-typescript with-stripe-typescript-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript
cd with-stripe-typescript

Required configuration

Copy the .env.example file into a file named .env in the root directory of this project:

cp .env.example .env

You will need a Stripe account (register) to run this sample. Go to the Stripe developer dashboard to find your API keys and replace them in the .env file.

STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>

Now install the dependencies and start the development server.

npm install
npm run dev
# or
yarn
yarn dev

Forward webhooks to your local dev server

First install the CLI and link your Stripe account.

Next, start the webhook forwarding:

stripe listen --forward-to localhost:3000/api/webhooks

The CLI will print a webhook secret key to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env file.

Deploy it to the cloud with ZEIT Now

Install Now (download)

Add your Stripe secrets to Now:

now secrets add stripe_publishable_key pk_***
now secrets add stripe_secret_key sk_***
now secrets add stripe_webhook_secret whsec_***

To start the deploy, run:

now

After the successful deploy, Now will show you the URL for your site. Copy that URL (https://your-url.now.sh/api/webhooks) and create a live webhook endpoint in your Stripe dashboard.

Note that your live webhook will have a different secret. To update it in your deployed application you will need to first remove the existing secret and then add the new secret:

now secrets rm stripe_webhook_secret
now secrets add stripe_webhook_secret whsec_***

As the secrets are set as env vars in the project at deploy time, we will need to redeploy our app after we made changes to the secrets. Run now again to redeploy with the new secret value.