Skip to content
Home

Payments with Stripe

Stripe is a payment gateway that allows you to accept payments online and in mobile apps. It is a popular choice for businesses of all sizes, from startups to large enterprises. Stripe offers a range of payment processing services, including credit card processing, subscription billing, and more.

To accept payments with Stripe in your app, you will need to create a Stripe account and obtain your API keys. You can then use these keys to integrate Stripe into your app and start accepting payments.

Setting Stripe during development

First, make sure you have the Stripe CLI installed.

Then go to the Stripe API keys page and copy your secret key.

Next, go to .env.local file in your app's root directory and add your Stripe API keys:

...
STRIPE_SECRET_KEY=sk_test_...
...

Then, execute the following command to start the Stripe webhook server:

stripe login
stripe listen --print-secret

This will create your webhook secret key. Copy it and add it to your .env.local file

...
STRIPE_WEBHOOK_SECRET=whsec_...
...

You can stop the server with Ctrl+C when you're done. You'll need to run this command only once. After you have your webhook secret key, you can start your app with bun dev.

Managing products

Finally, go to the Stripe Dashboard and create a product.

The <Pricing /> component will automatically loads all your products and display them on your pricing page. Some considerations:

  • Set the metadata.featured field to true to make a product featured.
  • Set the metadata.cta field to fit better with your product.
  • Set stripe's list of features for each product.

Configuring Stripe for production

To configure Stripe for production, you will need to obtain your production API keys from the Stripe Dashboard.

You will also need to create a new webhook in the Stripe Webhooks poiting to your https://example.com/api/webhook/stripe endpoint with the respective events ( see apps/web/app/api/webhook/stripe/route.tsx for the list of events that are being listened to by the webhook).

After you have obtained both secret key and webhook secret, go to your hosting service and add the following environment variables:

STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...