Skip to main content

Stripe Payments

SupaLaunch comes with Stripe integration out of the box for both one-time and subscription payments. In this tutorial, we will show you how to set up Stripe payments in your SupaLaunch app.

How Stripe payments work​

Stripe payments work in the following way:

  1. You create a Stripe Checkout session. This can be done in two ways:
    • You can create a Checkout session using APIs. This is useful if you want to create a Checkout session for a particular user. We will use this method.
    • You can use built-in Stripe Checkout page. In this case, you can extract an email of your customer later. This method is simpler, and we leave it as an exercise for you.
  2. User pays for the product using Stripe Checkout page.
  3. Stripe sends a webhook (special notification) to your API with the payment details.
  4. Your server saves the payment details in the database. You top up the user's balance in your app or give them access to the product (or some selected features).

We will work with the Stripe test mode in this tutorial. At the end, we will show you how to switch to the production mode.

How to set up Stripe payments in your SupaLaunch app​

  1. Create and activate a Stripe account.
  2. Activate [TEST MODE] in your Stripe account.
  3. [TEST MODE] Go to Developers -> Webhooks. Press Add local listener. Follow the instruction to install Stripe CLI and run the command stripe listen --forward-to localhost:3000/api/payments/webhooks. This will create a webhook listener on your local machine. We will use it to test payments.
  4. [TEST MODE] Set up environment variables:
STRIPE_WEBHOOK_SECRET=<key from the command stripe listen --forward-to localhost:3000/api/payments/webhooks>
STRIPE_SECRET_KEY=<take this key in Stripe Developers section -> API keys tab>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<take this key in Stripe Developers section -> API keys tab>
NEXT_PUBLIC_SITE_URL=http://localhost:3000
  1. [TEST MODE] Create a product in Stripe Product Catalog. It can be either a one-time payment or a subscription. Because you are listening to webhooks locally, it will automatically update you local database with the products and prices you created in Stripe.
  2. Go to /payments page in your SupaLaunch app. You should see the product you created in Stripe (you need to be authenticated at this moment).
  3. Click "Start" and you will be redirected to the Stripe Checkout page. You can use the following test card number: 4242 4242 4242 4242. You can use any future date and any CVC code.
  4. After you pay, you will be redirected to the /account page. If the product you purchased is a subscription, you will see the subscription details there.

The main logic after payment is completed is located in @/api/payments/webhooks.ts. You can modify it to suit your needs. For example, you can add credits to the user's balance or give them access to the product they purchased. Also, you may want to limit access to some routes for users who didn't pay. You can do this by using getSubscription function from @/lib/db/server-side/subscriptions.

Going live with Payments​

  1. Add a webhook in Stripe Developers section -> Webhooks tab -> Add endpoint. Use the following URL: https://yourdomain.com/api/payments/webhooks. Use the following events:
product.created
product.updated
price.created
price.updated
checkout.session.completed
customer.subscription.created
customer.subscription.updated
customer.subscription.delete
  1. Set up environment variables in Vercel. Now use key from [LIVE MODE] section in Stripe Developers section. Note '_LIVE' postfix in the key names: it is needed in production for our implementation to work.
STRIPE_WEBHOOK_SECRET_LIVE=<take this key in Stripe Developers section -> Webhooks tab -> your webhook -> Signing secret -> click Reveal>
STRIPE_SECRET_KEY_LIVE=<take this key in Stripe Developers section -> API keys tab>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY_LIVE=<take this key in Stripe Developers section -> API keys tab>
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
  1. Redeploy your app to Vercel.
  2. Copy products from [TEST MODE] to [LIVE_MODE] in Stripe Dashboard. It should create the same products in your production Supabase database.
  3. In Stripe Security rules, turn on the following rules:
    • Request 3DS if 3D Secure is required for card
    • Request 3DS if 3D Secure is recommended for card
    • Block if :risk_level: = 'highest'
    • Block if payment matches one or more values in default Stripe block lists
    • Block if CVC verification fails
  4. Turn on payments emails in Emails settings.

If you want to test payments in production with [TEST_MODE], you can remove environment variables with _LIVE postfix and add those you used in [TEST_MODE]. Just don't remove the webhook key as you still want to use your deployed app to listen to webhooks.

Don't forget to redeploy your app to Vercel.

That's it! Now you have Stripe payments in your SupaLaunch app. If you have any further questions/problems, please open an issue in our GitHub repository.