{"id":20974221,"url":"https://github.com/thirdweb-example/thirdweb-stripe","last_synced_at":"2025-05-14T12:31:09.336Z","repository":{"id":37611551,"uuid":"504993176","full_name":"thirdweb-example/thirdweb-stripe","owner":"thirdweb-example","description":"Subscription based payments for web3 apps using thirdweb authentication and stripe","archived":false,"fork":false,"pushed_at":"2024-04-12T00:35:47.000Z","size":2458,"stargazers_count":47,"open_issues_count":0,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T18:22:40.132Z","etag":null,"topics":["auth","stripe"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdweb-example.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-19T02:19:09.000Z","updated_at":"2024-12-31T11:14:25.000Z","dependencies_parsed_at":"2024-04-12T01:50:47.755Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/thirdweb-stripe","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/thirdweb-example%2Fthirdweb-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/thirdweb-stripe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254142247,"owners_count":22021488,"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":["auth","stripe"],"created_at":"2024-11-19T04:27:16.966Z","updated_at":"2025-05-14T12:31:08.982Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"\u003e [!Important]  \n\u003e This repository is referencing the `mumbai` chain.\n\u003e \n\u003e `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.\n\u003e\n\u003e You can still use this repository, however you will have to switch any references to `mumbai` to another chain.\n\n\n## Thirdweb Stripe\n\nThis project demonstrates an example flow for setting up subscription based payments for web3 apps using thirdweb [auth](https://portal.thirdweb.com/auth) and [Stripe](https://stripe.com).\n\nIt enables traditional SaaS business models for web3 apps where products can offer protected services that require subscriptions to access.\n\nBelow is a visual breakdown and explanation of how the whole flow works:\n\n![Subscription Diagram](public/stripe.png)\n\nThis is an example of the power that the wallet authentication flow offers for web3 apps as it allows any web3 application to use any web2 service without any added dependency on third party services.\n\n## Runnning the Example\n\nIn order to run this example project, we'll need to setup a few pieces. First, we'll need to store environment variables for the admin wallet to use for authentication on the backend (to learn more about how wallet authentication works, you can checkout the [Auth Documentation](https://portal.thirdweb.com/auth)). Additionally, we'll need to setup a Stripe account and configure a product on the Stripe dashboard to use for our subscription.\n\n### Setup Thirdweb\n\nTo run the project, first clone this repository, and then run one of the following commands to install the dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\nNext, you need to create a `.env.local` file and add the `THIRDWEB_AUTH_PRIVATE_KEY` variable to it with the private key of the wallet you want to use as the admin wallet to generate and verify payloads. Your file should use something like the following:\n\n```.env\nTHIRDWEB_AUTH_PRIVATE_KEY=...\n```\n\nSince we are using the `thirdweb authentication` flow, we'll also need to specify a domain in our environment variables for both our client and server sides to use. This domain should be the url of your client side application and is used to prevent phishing attacks. We can add it to the `NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN` variable in our `.env.local` file.\n\n```.env\nNEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN=...\n```\n\nFinally, you can run the project with one of the following commands:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nNow, you can navigate to [http://localhost:3000](http://localhost:3000) to visit the client side page where you can connect a wallet and authenticate.\n\n### Setup Stripe\n\nNow that we've setup our thirdweb app with authentication, we need to setup Stripe to handle payments.\n\n**1. Setup Stripe Account**\n\nThe first step to setting up our payments is to create an account with [Stripe](https://stripe.com). From here, you can log in to the Stripe dashboard and find your `Stripe Secret Key` (your publishable and secret keys should be on the main page of the dashboard, and should start with `pk_test_` and `sk_test_` respectively).\n\nYou can paste the secret key into the `.env` file as well:\n\n```.env\nSTRIPE_SECRET_KEY=...\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=...\n```\n\n**2. Setup Stripe Product**\n\nNext, we need to setup a new product in Stripe with a default subscription price. You can do this by heading to the stripe dashboard and navigating to `Payments \u003e Subscriptions \u003e Create Pricing` and follow through the flow.\n\nNow we can find the ID of our new product pricing by navigating to the `Products` tab and clicking into the newly created product, where there should be a setup price obejct with an `API ID` to copy (the ID should start with `price_`).\n\nWe can add this price ID to our `.env` file as well:\n\n```.env\nSTRIPE_PRICE_ID=...\n```\n\n**3. Subscribing**\n\nNow everything we need is setup to use our application. We can run `yarn dev` or `npm run dev` to start the application and then navigate to `localhost:3000`. From here, we can connect our wallet, login, and then click the subscribe button to subscribe to our product and go through stripes flow. Once we are redirected back to the original page, we can verify that the subscription was created successfully by clicking the check subscription button, and the subscription should also show up in the Stripe dashboard.\n\n## Browse the Source Code\n\nAs previously mentioned, this project uses `wallet authentication` along with Stripe to enable subscriptions to web3 apps. All the important code in this project is fully documented to help you understand how it works. The following are the relevant files for each piece of the flow to help you understand everything:\n\n- [`/pages/api/auth`](/pages/api/auth) - **Wallet Authentication** - This folder contains all the code used for authenticating a wallet to the backend. Users can login to the backend by using the `/api/auth/login` endpoint which verifies their wallet address and issues a secure cookie to the frontend which is used to authenticate the user on all future requests. Every other endpoint checks for and validates this cookie to make sure that the user is logged in.\n- [`/pages/api/stripe`](/pages/api/stripe) - **Stripe Payments** - This folder contains the backend endpoints that authenticate the connected user, create a new Stripe customer with the associated wallet address, and generate a Stripe checkout link to send to the frontend, as well as the endpoint that verifies if a user is subscribed.\n\n### Learn More\n\nTo learn more about thirdweb and Next.js, take a look at the following resources:\n\n- [thirdweb Auth](https://portal.thirdweb.com/auth) - learn about our wallet authentication flow\n- [thirdweb React Documentation](https://docs.thirdweb.com/react) - learn about our React SDK.\n- [thirdweb TypeScript Documentation](https://docs.thirdweb.com/typescript) - learn about our JavaScript/TypeScript SDK.\n- [thirdweb Portal](https://docs.thirdweb.com) - check our guides and development resources.\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n\nYou can check out [the thirdweb GitHub organization](https://github.com/thirdweb-dev) - your feedback and contributions are welcome!\n\n## Join our Discord!\n\nFor any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fthirdweb-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-stripe/lists"}