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.
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.
- Select the events that you want to receive. The events handled by this app are:
- Finally, copy the
Signing secretfor 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 production (for deployed applications)
For both testing and production (these settings will depend on your pricing structure)
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.
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.
- 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
- Set your business branding and identity in the Stripe settings
- Configure your Customer Portal settings
- Toggle on "Allow customers to update their payment methods"
- Toggle on "Allow customers to update subscriptions"
- Toggle on "Allow customers to cancel subscriptions"
- Add the products and prices according to your business model and pricing structure
- Set up the required business information and links (e.g. terms and conditions, usage policy, etc.)