Setup Stripe 💸

Create a Stripe account.

Setup test environment

1. Go to the Stripe Dashboard with test mode enabled.

2. Get your test API keys from the Developers > API keys section.

3. Add these keys to the .env.local file in the apps/web directory.

1NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51J4... # Your publishable key
2STRIPE_SECRET_KEY=sk_test_51J4... # Your secret key

Webhooks

1. Go to Developer > Event Destinations (Webhooks) and add an endpoint. Enter your production domain and the path https://yourdomain.com/api/webhooks/stripe.

2. Add the checkout.session.completed event.

We will use the Stripe CLI to forward events to local host for testing.

Click Add local listener and copy the webhook secret to the .env.local file.

1STRIPE_WEBHOOK_SECRET=whsec_...

If you haven't already, install the Stripe CLI.

Now Authenticate with the Stripe CLI and set the listener.

1# Authenticate with the Stripe CLI
2stripe login
3
4# Forward events to our local server. You might like to set this as a script in your package.json file.
5stripe listen --forward-to localhost:3000/api/webhooks/stripe

In the Stripe Event Destinations section, you should see your local server listed indicating that events are being forwarded.

Troubleshooting: You may need to reauthenticate the CLI in future if the local server is not receiving events or appearing in the Stripe dashboard.

When an item is purchased, this webhook will receive the event and trigger an email to the user with the purchase confirmation.

If a user signs up to the platform with the same email that they've previously used to make a purchase, the api/signin endpoint will fetch existing products they have purchased, and list them against the users document in Firebase. The user can then see these products in their profile page.

Create products

Create a product. We'll use a one-time payment product for this example as the template has been setup for this. You can tweak the apps/web/src/app/api/checkout/route.ts file to handle subscriptions.

Create the products in stripe

1. Go to the Products section.

2. Create a product with a name and description.

3. Add a price to the product.

4. Repeat the process, so you have two products.

Add the products to the project

1. Go to the apps/web/src/config/stripe/products.ts file.

2. Fill out the products with the product and price IDs from the Stripe test dashboard.

3. Ensure the product object key matches the _id field.

1prod_1: { // This key and the _id should match the product ID
2	_id: "prod_1...",
3	currency: "usd", // The currency you chose for the product
4	description: `Some information about product 1`,
5	emphasis: false,
6	features: ["Feature 1", "Feature 2", "Feature 3"],
7	frequency: "one-time",
8	name: "Product 1",
9	priceId: "price_1Pd",
10	show: true,
11	unitAmount: 199, // This is in cents, so $1.99
12}

Test the purchase flow

With the local development server running, and the Stripe CLI forwarding events, select Buy Now on one of the products.

You should see Test Mode on this page to indicate real money will not be accepted.

Use your personal email and a Stripe test card number to complete the purchase.

• Card Number: 4242 4242 4242 4242

• Expiry: Any future date

• CVC:Any 3 digits

• ZIP:Any 5 digits

Once the purchase is processed, you'll be redirected to the Payment Success page. You should receive an email with the purchase confirmation.