This is a full-stack TypeScript powered swag shop using:

• Frontend:

  • Next.js and SWR
  • react-stripe-js for Donating
  • use-shopping-cart for Stickers

• Backend

  • Next.js API routes
  • stripe-node with TypeScript

Included functionality

• Global CSS styles
• 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

Required configuration

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

cp .env.local.example .env.local

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.local file.

NEXT_PUBLIC_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

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.local file.

Setting up a live webhook endpoint

After deploying, copy the deployment URL with the webhook path (https://your-url.now.sh/api/webhooks) and create a live webhook endpoint in your Stripe dashboard.

Once created, you can click to reveal your webhook's signing secret. Copy the webhook secret (whsec_***) and add it as a new environment variable in your Vercel Dashboard:

• Select your newly created project.
• Navigate to the Settings tab.
• In the general settings scroll to the "Environment Variables" section.

After adding an environment variable you will need to rebuild your project for it to become within your code. Within your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy".

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Original Template Authors

• @thorsten-stripe
• @lfades