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

# Stripe Integration

> Connect Stripe to turn your ChatAndBuild project into a profit maker

ChatandBuild makes it easy to add payments to your AI-powered applications with a chat-driven Stripe setup. Simply describe your payment requirements, and ChatandBuild will automatically generate the necessary checkout forms, subscription management, and webhook handlers—no manual coding required.

## Key Takeaways

* **Chat-driven setup**: Describe your payment needs in natural language
* **No manual coding**: ChatandBuild generates all payment components automatically
* **Full subscription support**: Handle one-time payments, subscriptions, and plan changes
* **Webhook integration**: Automatic processing of payment events and status updates

## Requirements

Before you start, make sure you have:

* A Stripe account with products configured
* The project **must** be connected to Supabase. [**Learn more about Supabase**](/docs/integrations/supabase)
* A working frontend and backend setup

<Note>
  **Note:** Stripe integration is not available in preview. To test it, deploy your project and ensure Stripe is set to **test mode**. Use the following test card details: card number **4242 4242 4242 4242**, any 3-digit CVC, and any future expiration date.
</Note>

## <Icon icon="bolt-lightning" size={18} /> Stripe Payment Setup (No-Code Chat Flow)

<Steps>
  <Step title="Step 1">
    **Prepare Your Project**

    First, connect your project to [Supabase](/docs/integrations/supabase) and add your [Stripe Secret Key](https://docs.stripe.com/keys) to your environment:

    <Note>
      Have your Stripe product price IDs ready, or let ChatandBuild help you create them during the setup process.
    </Note>
  </Step>

  <Step title="Step 2">
    **Configure Your Payment in Chat**

    Simply describe what you want to achieve. Here are some examples:

    <AccordionGroup>
      <Accordion title="One-time Payment Example:">
        ```
        Create a one-time checkout for my Digital Course product at $29
        ```
      </Accordion>

      <Accordion title="Subscription Example:">
        ```
        Set up a monthly Premium subscription plan for $19.99 with a 7-day free trial
        ```
      </Accordion>

      <Accordion title="Annual Plan Example:">
        ```
        Add an annual Professional plan for $199 with 20% discount from monthly pricing
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Step 3">
    **Review and Deploy**

    ChatandBuild will automatically:

    1. Generate Stripe checkout components
    2. Create the necessary database tables
    3. Set up webhook handlers for payment processing
    4. Generate UI components for your payment flow
  </Step>
</Steps>

## <Icon icon="brain-circuit" size={18} /> Advanced Integration: Webhooks & Supabase

For production applications, you'll want to set up webhooks to handle payment events automatically.

<Steps>
  <Step title="Connect Supabase">
    Make sure your ChatandBuild project is connected to Supabase for secure data storage.

    1. Connect Supabase to your project. [Refer to this tutorial](/docs/integrations/supabase)
    2. Once connected, Supabase enables secure payment processing, subscription management, webhook handling, customer data storage, and error handling.
  </Step>

  <Step title="Secure Payment Processing">
    Start by prompting to ChatAndBuild:

    <Note>
      Let’s connect Stripe to the project, starting with secure payment processing.
    </Note>

    ChatAndBuild will help generate the SQL schema required for payment handling, including tables for users, subscriptions, and payments. You can review and adjust these tables to match your product’s needs before applying the changes.
  </Step>

  <Step title="Implement Edge Functions for Webhooks">
    Supabase Edge Functions are lightweight, high-performance serverless functions that run close to users for faster responses. They’re ideal for handling tasks like processing webhook events (e.g., payment confirmations) before updating the database.

    <Steps>
      <Step title="Step 1">
        **Retrieve the Endpoint URL** from the Edge Function in Supabase.
      </Step>

      <Step title="Step 2">
        **Go to Stripe Dashboard** > Developers > Webhooks > Create an Event Destination.
      </Step>

      <Step title="Step 3">
        Choose the **Webhook Events** that best match your project’s requirements:

        * `payment_intent.succeeded`
        * `payment_intent.payment_failed`
        * `customer.subscription.created`
        * `customer.subscription.updated`
        * `customer.subscription.deleted`
      </Step>

      <Step title="Step 4">
        **Enter the Endpoint URL** from Supabase.
      </Step>

      <Step title="Step 5">
        Copy the [Webhook Secret](https://docs.stripe.com/webhooks) and securely store it in **Supabase → Edge Functions → Manage Secrets → Add New Secret**.
      </Step>
    </Steps>
  </Step>

  <Step title="Securely Add API Keys">
    To integrate Stripe securely, do not share your API key directly in chat. Instead:

    * Store it as an **environment variable** (e.g., in `.env`).
    * Use it only on the **server side**, never in client-side code.
    * For Supabase, add it under **Edge Functions → Manage Secrets** and reference it in your code.
  </Step>

  <Step title="Testing Your Integration">
    * Use [**Stripe’s Test Mode**](https://docs.stripe.com/testing-use-cases) to safely test payments.
    * **Test card details**:
      * Card Number: `4242 4242 4242 4242`
      * Any future expiration date
      * Any 3-digit CVC
    * **Deploy your app**—Stripe integration does not work in preview mode.
  </Step>
</Steps>

## Debugging & Troubleshooting

If you encounter issues:

<AccordionGroup>
  <Accordion title="Check Browser Console">
    Look for JavaScript errors related to Stripe or payment processing.
  </Accordion>

  <Accordion title="Review Supabase Edge Function Logs">
    Check your Supabase dashboard for any errors in webhook processing.
  </Accordion>

  <Accordion title="Stripe Dashboard">
    Monitor your Stripe dashboard for:

    * Successful and failed payments
    * Webhook delivery status
    * Event logs and error messages

    ###
  </Accordion>
</AccordionGroup>

Common Issues:

<AccordionGroup>
  <Accordion title="Payments not processing:">
    * Verify API keys are correctly configured
    * Check that webhooks are properly set up
    * Ensure your domain is added to Stripe's allowed domains
  </Accordion>

  <Accordion title="Subscription status not updating:">
    * Check webhook endpoint configuration
    * Verify database permissions in Supabase
    * Review edge function logs for errors
  </Accordion>
</AccordionGroup>

<Note>
  Remember to switch to live mode in both Stripe and ChatandBuild when you're ready to accept real payments.
</Note>