https://github.com/thirdweb-example/seamless-stripe-checkout
Use Magic.link to authenticate users using their email, then we use stripe to collect payment for the NFTs and send them to the user's wallet generated by Magic.
https://github.com/thirdweb-example/seamless-stripe-checkout
auth wallet-connection
Last synced: 12 months ago
JSON representation
Use Magic.link to authenticate users using their email, then we use stripe to collect payment for the NFTs and send them to the user's wallet generated by Magic.
- Host: GitHub
- URL: https://github.com/thirdweb-example/seamless-stripe-checkout
- Owner: thirdweb-example
- License: apache-2.0
- Archived: true
- Created: 2023-01-13T17:47:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T00:35:28.000Z (about 2 years ago)
- Last Synced: 2025-03-24T12:15:14.341Z (about 1 year ago)
- Topics: auth, wallet-connection
- Language: TypeScript
- Homepage: https://seamless-stripe-checkout.thirdweb-example.com
- Size: 14.6 KB
- Stars: 10
- Watchers: 1
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
> [!Important]
> This repository is referencing the `mumbai` chain.
>
> `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.
>
> You can still use this repository, however you will have to switch any references to `mumbai` to another chain.
# Seamless NFT Experience
This project demonstrates how you can create a seamless NFT experience for your users.
We use Magic.link to authenticate users using their email, then we use stripe to collect payment for the NFTs and send them to the user's wallet generated by Magic.
## Using This Template
Create a project using this example:
```bash
npx thirdweb create --template seamless-stripe-checkout
```
- Create an [Edition](https://thirdweb.com/thirdweb.eth/TokenERC1155) contract using the dashboard.
- Add an NFT to the token contract with your desired metadata and set initial supply to 0.
- Update the contract address in the [addresses.ts](./constants/addresses.ts) file.
- Add your wallet's private key as an environment variable in a `.env.local` file called `PRIVATE_KEY`:
```text title=".env.local"
PRIVATE_KEY=your-wallet-private-key
```
- Create a Magic Auth app on Magic.link and add your publishable key to the `.env.local` file:
```text title=".env.local"
NEXT_PUBLIC_MAGIC_LINK_API_KEY=your-magic-publishable-key
```
- Create a stripe account and add your publishable key and secret key to the `.env.local` file:
```text title=".env.local"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
STRIPE_SECRET_KEY=your-stripe-secret-key
```
- We are going to setup a webhook which will be used to securely determine that the transaction was successful. To setup the webhook on the development environment, we will use the [stripe cli](https://stripe.com/docs/stripe-cli).
- Install the [stripe cli](https://stripe.com/docs/stripe-cli) and run `stripe login` to login to your stripe account.
- Forward the webhook to your local server by running `stripe listen --forward-to localhost:3000/api/webhook` in a separate terminal.
- Paste the webhook secret key in the `.env.local` file:
```text title=".env.local"
WEBHOOK_SECRET_KEY=your-stripe-webhook-secret
```
- Install dependencies:
```bash
yarn # yarn
npm install # npm
```
- Run the development server:
```bash
yarn dev # yarn
npm run dev # npm
```
## Join our Discord!
For any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).