> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe

> Set up payments in your website using Lumi's Stripe integration.

<video controls className="w-full aspect-video rounded-xl" src="https://mkhqtbnlmhstatalllbc.supabase.co/storage/v1/object/public/lumi/assets/20251211211739199.mp4" />

You can now set up Stripe entirely through Lumi's chat interface. Just describe what you need

* “Add a membership plan, with a monthly fee of \$9.99...”
* “Selling my consulting services, with a one-time fee of \$299...”

Lumi automates the entire Stripe integration process, creating products and pricing, generating checkout and portal edge functions, building the necessary database tables with RLS, and adding corresponding UI buttons—no manual coding or webhooks are required unless you choose to implement them for custom purposes.

## A Simple Step-by-Step Example

<Steps>
  <Step title="Prepare Your Project">
    First, prepare a project that is ready for payment integration. Ensure all core functions and pages, like login and key features, are complete before proceeding.

    <Tip>
      For example, if you're going to create a membership subscription-based AI image generation website, first complete the login and AI functions.
    </Tip>
  </Step>

  <Step title="Describe Your Payment Requirements">
    Describe your payment needs, for example: "Implement a membership system via Stripe. Free users get 2 images daily; Pro users pay \$0.99/month for unlimited use."
  </Step>

  <Step title="Enter Sandbox API Key">
    Provide the API key for the Stripe sandbox environment. It is highly recommended to fully test the payment process in the sandbox before going live.

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/1.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=0e71eaef362acb96d85d2b8a4cb95688" alt="1 Pn" width="1046" height="1186" data-path="images/1.png" />
  </Step>

  <Step title="Create Products and Prices">
    Lumi will automatically create the correct products along with their corresponding descriptions, prices, and payment cycles based on your needs. If there are any modifications, you can also inform Lumi through a conversation.

    Then, Lumi will also help you improve the product information and purchase process in your project.

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/2.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=760001a6fced78a1f2a118b3091d395d" alt="2 Pn" width="1044" height="688" data-path="images/2.png" />
  </Step>

  <Step title="Test the Payment Process">
    After completing the creation of products and payment settings, please test whether the product purchase process meets your expectations, including——

    * After clicking "Purchase" on the page, whether it can correctly jump to Stripe's test payment page
    * Whether payment can be completed normally using the test card (4242 4242 4242 4242)
    * After successful payment, whether you can see the creation of subscription records in Lumi's database, and whether the project page displays corresponding purchase records (such as membership emble, purchase history, etc.)

    When errors occur, Lumi automatically reads the backend records to better resolve the issue.

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/3.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=5134df4dcfcce1e7ae28c90c8b16df66" alt="3 Pn" width="1080" height="606" data-path="images/3.png" />
  </Step>

  <Step title="Switch to Live Environment">
    After you have completed testing the payment process, you can ask Lumi to switch to Stripe's official merchant environment.

    * First, you need to register and authenticate a merchant account in accordance with Stripe's requirements
    * Second, switch to the API key for Stripe's official environment in Lumi
    * Finally, complete the setup step by step according to Lumi's guidelines

          <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/4.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=9e01c6a7b204c73c1c32a9141039b96f" alt="4 Pn" width="1090" height="1124" data-path="images/4.png" />
  </Step>

  <Step title="Final Test and Launch">
    <Tip>
      Tips: You can further test the payment process after switching to the official environment by creating low-value products or coupons.
    </Tip>

    * After switching to the official environment, test your payment process again to see if it meets expectations.
    * Once everything is ready, launch it and share it with your users!
  </Step>
</Steps>