Configure Stripe

To test Stripe payments configure your Stripe account to handle test payments. To complete the following steps, ensure that the "test mode" in Stripe is enabled.

Configure webhooks

Stripe webhooks are used to sync data from Stripe to your Supabase database. To configure Stripe webhooks follow these steps:

  • Add an endpoint on the Test endpoints page.
  • Then, set the endpoint URL to the URL of your application. E.g. https://url-of-your-application/api/webhooks.
  • Select the events that you want to receive. The events handled by this app are:
    • product.created
    • product.updated
    • product.deleted
    • price.created
    • price.updated
    • price.deleted
    • checkout.session.completed
    • customer.updated
    • customer.deleted
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
  • Finally, copy the Signing secret for the webhook - it is needed in the next step.

Set environment variables

To securely interact with Stripe, add the following environment variables for your application:

  • For testing

    • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
    • STRIPE_SECRET_KEY
    • STRIPE_WEBHOOK_SECRET
  • For production (for deployed applications)

    • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY_LIVE
    • STRIPE_SECRET_KEY_LIVE
    • STRIPE_WEBHOOK_SECRET_LIVE
  • For both testing and production (these settings will depend on your pricing structure)

    • NEXT_PUBLIC_PRICE_BASIC_MONTHLY
    • NEXT_PUBLIC_PRICE_BASIC_YEARLY
    • NEXT_PUBLIC_PRICE_PRO_MONTHLY
    • NEXT_PUBLIC_PRICE_PRO_YEARLY
    • NEXT_PUBLIC_PRICE_MASTER_MONTHLY
    • NEXT_PUBLIC_PRICE_MASTER_YEARLY

The first two keys can be found on the API keys page in Stripe. The STRIPE_WEBHOOK_SECRET value is the Signing secret you copied in the previous step.

Test webhooks

To be sure that your application uses the latest environment variables, redeploy your application.

Then, send a product.created test event from your Stripe test dashboard by clicking the Send test event button. If everything is configured correctly, a test product will be created in your Supabase database.

If the configuration is working, delete the test products created via the webhook from your Supabase database.

Create product and pricing information

To receive recurring payments from users via Stripe, you need to create your product and pricing information in your Stripe Dashboard. When you create or update your product and price information, the changes will automatically be synced to your Supabase database.

For example, this boilerplate has been set up to support 3 different products with 2 different prices (monthly/yearly) each.

E.g.:

  • Product 1: Basic
    • Price 1: 19.99 USD per month
    • Price 2: 199.99 USD per year
  • Product 2: Professional
    • Price 1: 24.99 USD per month
    • Price 2: 249.99 USD per year
  • Product 3: Master
    • Price 1: 39.99 USD per month
    • Price 2: 399.99 USD per year

You should set this up according to your business model and pricing structure.

Once you have configured your products and prices, add the price ID environment variables (e.g. NEXT_PUBLIC_PRICE_BASIC_MONTHLY) or add the price IDs to the pricing.tsx component. Now, you can start testing your Stripe checkout flow.

Configure the Stripe customer portal

  1. Set your business branding and identity in the Stripe settings
  2. Configure your Customer Portal settings
  3. Toggle on "Allow customers to update their payment methods"
  4. Toggle on "Allow customers to update subscriptions"
  5. Toggle on "Allow customers to cancel subscriptions"
  6. Add the products and prices according to your business model and pricing structure
  7. Set up the required business information and links (e.g. terms and conditions, usage policy, etc.)
Last updated:

Stay up to date

Sign up for the Ship SaaS newsletter to get notifiedabout the latest updates and blog posts

We care about the protection of your data. Read our Privacy Policy and Terms & Conditions.