{"id":13632590,"url":"https://github.com/stripe-archive/nextjs-typescript-react-stripe-js","last_synced_at":"2025-04-18T02:33:49.934Z","repository":{"id":37684044,"uuid":"240291448","full_name":"stripe-archive/nextjs-typescript-react-stripe-js","owner":"stripe-archive","description":"Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.","archived":true,"fork":false,"pushed_at":"2022-02-02T17:44:04.000Z","size":5021,"stargazers_count":328,"open_issues_count":2,"forks_count":65,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-08-01T22:53:53.065Z","etag":null,"topics":["react-stripe-js","stripe-checkout","stripe-elements","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-typescript-react-stripe-js.now.sh/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stripe-archive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-13T15:18:39.000Z","updated_at":"2024-07-16T17:59:45.000Z","dependencies_parsed_at":"2022-08-23T23:41:02.163Z","dependency_job_id":null,"html_url":"https://github.com/stripe-archive/nextjs-typescript-react-stripe-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Fnextjs-typescript-react-stripe-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Fnextjs-typescript-react-stripe-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Fnextjs-typescript-react-stripe-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Fnextjs-typescript-react-stripe-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stripe-archive","download_url":"https://codeload.github.com/stripe-archive/nextjs-typescript-react-stripe-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223772290,"owners_count":17199976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-stripe-js","stripe-checkout","stripe-elements","typescript"],"created_at":"2024-08-01T22:03:07.941Z","updated_at":"2024-11-09T00:31:43.329Z","avatar_url":"https://github.com/stripe-archive.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","NextJS"],"sub_categories":["Stripe"],"readme":"\u003e \u003cimg src=\"https://stripe.dev/images/badges/archived.png\" width=\"250\"\u003e\n\u003e\n\u003e This project is deprecated and is no longer being actively maintained.\n\u003e\n\u003e See [vercel/next.js/examples/with-stripe-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript) for an alternative sample.\n\n# Sample using Next.js, TypeScript, and react-stripe-js 🔒💸\n\nThis is a full-stack TypeScript example using:\n\n- Frontend:\n  - Next.js and [SWR](https://github.com/zeit/swr)\n  - [react-stripe-js](https://github.com/stripe/react-stripe-js) for [Checkout](https://stripe.com/checkout) and [Elements](https://stripe.com/elements)\n- Backend\n  - Next.js [API routes](https://nextjs.org/docs/api-routes/introduction)\n  - [stripe-node with TypeScript](https://github.com/stripe/stripe-node#usage-with-typescript)\n\n## Demo\n\n- Live demo: https://nextjs-typescript-react-stripe-js.now.sh/\n- CodeSandbox: https://codesandbox.io/s/github/stripe-samples/nextjs-typescript-react-stripe-js\n- Tutorial: https://dev.to/thorwebdev/type-safe-payments-with-next-js-typescript-and-stripe-4jo7\n\nThe demo is running in test mode -- use `4242424242424242` as a test card number with any CVC + future expiration date.\n\nUse the `4000000000003220` test card number to trigger a 3D Secure challenge flow.\n\nRead more about testing on Stripe at https://stripe.com/docs/testing.\n\n\u003cdetails open\u003e\u003csummary\u003eShopping Cart Checkout Demo\u003c/summary\u003e\n\u003cimg src=\"./public/shopping_cart_demo.gif\" alt=\"A gif of the Shopping Cart Checkout payment page.\" align=\"center\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eCheckout Donations Demo\u003c/summary\u003e\n\u003cimg src=\"./public/checkout_demo.gif\" alt=\"A gif of the Checkout payment page.\" align=\"center\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eElements Donations Demo\u003c/summary\u003e\n\u003cimg src=\"./public/elements_demo.gif\" alt=\"A gif of the custom Elements checkout page.\" align=\"center\"\u003e\n\u003c/details\u003e\n\n## Deploy your own\n\nOnce you have access to [the environment variables you'll need](#required-configuration) from the [Stripe Dashboard](https://dashboard.stripe.com/apikeys), deploy the example using [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example):\n\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/select-scope?c=1\u0026s=https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript\u0026id=70107786\u0026env=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY\u0026envDescription=Enter%20your%20Stripe%20Keys\u0026envLink=https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript%23required-configuration)\n\n## Included functionality\n\n- [Global CSS styles](https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets)\n- Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via `loadStripe` helper: [components/Layout.tsx](components/Layout.tsx).\n- Stripe Checkout\n  - Custom Amount Donation with redirect to Stripe Checkout:\n    - Frontend: [pages/donate-with-checkout.tsx](pages/donate-with-checkout.tsx)\n    - Backend: [pages/api/checkout_sessions/](pages/api/checkout_sessions/)\n    - Checkout payment result page that uses [SWR](https://github.com/zeit/swr) hooks to fetch the CheckoutSession status from the API route: [pages/result.tsx](pages/result.tsx).\n- Stripe Elements\n  - Custom Amount Donation with Stripe Elements \u0026 PaymentIntents (no redirect):\n    - Frontend: [pages/donate-with-elements.tsx](pages/donate-with-checkout.tsx)\n    - Backend: [pages/api/payment_intents/](pages/api/payment_intents/)\n- Webhook handling for [post-payment events](https://stripe.com/docs/payments/accept-a-payment#web-fulfillment)\n  - 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](https://stripe.com/docs/webhooks/signatures) of the event. All of this happens in [pages/api/webhooks/index.ts](pages/api/webhooks/index.ts).\n- Helpers\n  - [utils/api-helpers.ts](utils/api-helpers.ts)\n    - helpers for GET and POST requests.\n  - [utils/stripe-helpers.ts](utils/stripe-helpers.ts)\n    - Format amount strings properly using `Intl.NumberFormat`.\n    - Format amount for usage with Stripe, including zero decimal currency detection.\n\n## How to use\n\n### Using `create-next-app`\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-stripe-typescript with-stripe-typescript-app\n# or\nyarn create next-app --example with-stripe-typescript with-stripe-typescript-app\n```\n\n### Download manually\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript\ncd with-stripe-typescript\n```\n\n### Required configuration\n\nCopy the `.env.local.example` file into a file named `.env.local` in the root directory of this project:\n\n```bash\ncp .env.local.example .env.local\n```\n\nYou will need a Stripe account ([register](https://dashboard.stripe.com/register)) to run this sample. Go to the Stripe [developer dashboard](https://stripe.com/docs/development/quickstart#api-keys) to find your API keys and replace them in the `.env.local` file.\n\n```bash\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\u003creplace-with-your-publishable-key\u003e\nSTRIPE_SECRET_KEY=\u003creplace-with-your-secret-key\u003e\n```\n\nNow install the dependencies and start the development server.\n\n```bash\nnpm install\nnpm run dev\n# or\nyarn\nyarn dev\n```\n\n### Forward webhooks to your local dev server\n\nFirst [install the CLI](https://stripe.com/docs/stripe-cli) and [link your Stripe account](https://stripe.com/docs/stripe-cli#link-account).\n\nNext, start the webhook forwarding:\n\n```bash\nstripe listen --forward-to localhost:3000/api/webhooks\n```\n\nThe CLI will print a webhook secret key to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file.\n\n### Setting up a live webhook endpoint\n\nAfter 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](https://stripe.com/docs/webhooks/setup#configure-webhook-settings).\n\nOnce 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](https://vercel.com/dashboard):\n\n- Select your newly created project.\n- Navigate to the Settings tab.\n- In the general settings scroll to the \"Environment Variables\" section.\n\nAfter 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\".\n\n### Deploy on Vercel\n\nYou can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n#### Deploy Your Local Project\n\nTo deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example).\n\n**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n\n#### Deploy from Our Template\n\nAlternatively, you can deploy using our template by clicking on the Deploy button below.\n\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/select-scope?c=1\u0026s=https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript\u0026id=70107786\u0026env=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY\u0026envDescription=Enter%20your%20Stripe%20Keys\u0026envLink=https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript%23required-configuration)\n\n## Get support\nIf you found a bug or want to suggest a new [feature/use case/sample], please [file an issue](../../issues).\n\nIf you have questions, comments, or need help with code, we're here to help:\n- on [Discord](https://stripe.com/go/developer-chat)\n- on Twitter at [@StripeDev](https://twitter.com/StripeDev)\n- on Stack Overflow at the [stripe-payments](https://stackoverflow.com/tags/stripe-payments/info) tag\n- by [email](mailto:support+github@stripe.com)\n\nSign up to [stay updated with developer news](https://go.stripe.global/dev-digest).\n\n## Authors\n\n- [@thorsten-stripe](https://twitter.com/thorwebdev)\n- [@lfades](https://twitter.com/luis_fades)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe-archive%2Fnextjs-typescript-react-stripe-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstripe-archive%2Fnextjs-typescript-react-stripe-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe-archive%2Fnextjs-typescript-react-stripe-js/lists"}