This is a full stack TypeScript PoC to test the feasibility of stripe checkout and product delivery via Tebex API.
This project is running in test mode, use 4242424242424242
as a test card number with any CVC and future expiration date.
Use the 4000000000003220
test card number to trigger a 3D Secure challenge flow.
Read more about testing on Stripe at https://stripe.com/docs/testing.
Checkout payment result page that uses SWR hooks to fetch the CheckoutSession status from the API route: pages/result.tsx.
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 for GET and POST requests utils/api-helpers.ts.
Copy the .env.local.example
file into a file named .env.local
in the root directory of this project:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<replace-with-publishable-key>
STRIPE_SECRET_KEY=<replace-with-secret-key>
Now install the dependencies and start the development server.
pnpm install
pnpm dev
First install the Stripe CLI and link a 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 the .env.local
file.