​

Build your own hot-selling mall in 10 minutes! bolt.new + Stripe

🧰 Prerequisites

• Supabase Account: Ensure you have a Supabase account connected to your Bolt project, as Stripe integration relies on Supabase for authentication and backend functions.​
• Stripe Account: Create a Stripe account to obtain the necessary API keys for integration.​

🔐 Step 1: Configure Authentication

If your Bolt project lacks user authentication, prompt Bolt to set up user authentication. This step is crucial as all payment types require authentication through Supabase.​

💳 Step 2: Add Stripe Payment Functionality

In Bolt, prompt the addition of payment functionality via Stripe. This action prepares your application to handle payment processes.​

🔑 Step 3: Obtain Stripe API Key

1. Log in to your Stripe account.​
2. Navigate to the Developers section in the Stripe Dashboard.​
3. Retrieve your Secret API Key, which will be used to connect Stripe with your Bolt application.​

📦 Step 4: Add API Key and Retrieve Products

In Bolt, enter your Stripe Secret API Key and click on “Retrieve my products”. This action fetches the products you’ve set up in Stripe, allowing you to select those relevant to your application.​

✅ Step 5: Apply Product Selection

After selecting the desired products, click “Apply Selection”. Bolt will then create edge functions to handle Stripe checkout sessions and secure webhook processing.​

🔗 Step 6: Connect to Supabase

If you haven’t connected a Supabase project yet, click “Connect to Supabase” in Bolt. You can either connect to an existing project or create a new one. Bolt will guide you through applying the Stripe integration schema necessary for the setup.​

🧪 Step 7: Test the Integration

Use Stripe’s test cards to simulate transactions and ensure that the integration functions correctly. This testing phase helps verify that payments and subscriptions are processed as expected.​support.bolt.new

For a visual walkthrough of integrating Stripe with Bolt.new, you can refer to the following tutorial:

Getting Started

Stripe integration in bolt.new relies on Supabase. Make sure you have connected your Supabase account to your Bolt account as described here. Watch a video tutorial of the process below:

https://youtu.be/dxuct08lLyY

Configure Authentication

Stripe integration works best with authentication already in place. If you haven’t done so, add authentication to your project by prompting Bolt to setup user authentication.

​

Prompt Bolt to add Payments via Stripe

Prompt Bolt to add payments using Stripe.

​

Obtain Stripe API Key

1. Create a Stripe account if you haven’t already
2. Once logged in, navigate to the Developers section in your Stripe Dashboard
3. Get your Stripe secret key

Make sure you are working in Stripe’s Developer sandbox when building your application. This allows you to simulate Stripe events without processing real money. Make sure you use test cards to simulate payments. Do not use real card details.

​

Add API Key and Retrieve Products

Enter your secret key and click “Retrieve my products” to select the products you would like to use for your application:

​

Apply Selection

Once you have made your product selections, click “Apply Selection”. Bolt will now create edge functions to handle Stripe checkout session creation and webhook processing securely.

​

Supabase Connection

At this stage, Bolt will output the following:

If you have already connected to the relevant Supabase project, you can discard this message. Otherwise, click “Connect to Supabase” at the top-right of the page:

From here, you can connect to an existing project or create a new project. Bolt will then prompt you to apply the Stripe Integration Schema.

​

Testing

Test your Stripe integration using test cards as described here.