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

# Stripe & Payment Integration

> Learn how to integrate Stripe & payment with your Trickle application.

<Tip>
  If you have any questions or need further assistance, don’t hesitate to [join our Discord](https://discord.com/invite/AD44k7hVSY) community. We’re always there to connect with you and offer support!
</Tip>

## What is Stripe?

<img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=c69aeed1402568cf86926d53635df920" alt="Stripe Pn" width="2560" height="1067" data-path="Assets/stripe.png" />

[Stripe](https://stripe.com) is a cloud-based fintech platform that lets businesses of every size accept payments, move money, and embed financial services with just a few lines of code. Its core offering is a unified set of REST and GraphQL APIs along with prebuilt UI components such as Checkout, Payment Links, and Elements. These handle everything from card payments to over 100 local methods, in-person terminals, invoicing, and fraud protection through Radar.

If you’re building an app with [Trickle](https://trickle.so) and want to integrate Stripe for payments, we recommend using Stripe Payment Links. This method is simple, secure, and does not expose any API keys.

The integration is straightforward. You just need to embed the Stripe-generated payment link into your Trickle app. This method is best suited for fixed-amount payment scenarios such as e-commerce checkouts or subscription plans.

## **Stripe Integration Steps**

<Steps>
  <Step title="Register a Stripe account" titleSize="h3">
    Sign up at [https://stripe.com](https://stripe.com), activate your account, and link your bank account. Be sure to complete your **Business settings**, including logo and business information.
  </Step>

  <Step title="Create products and prices on Stripe" titleSize="h3">
    Set up your products (e.g. “Pro Plan”) and assign corresponding pricing models (monthly, yearly, etc.).

    <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-1.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=4fc9839fac2421a3e8dec38f8f40f94a" alt="Stripe 1 Pn" width="2880" height="1449" data-path="Assets/stripe-1.png" />
  </Step>

  <Step title="Create a Payment Link on Stripe" titleSize="h3">
    Set parameters and preview the checkout page.

    * Create new payment link

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-2.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=9db6127b5368f9194f603f3349659513" alt="Stripe 2 Pn" width="2880" height="1449" data-path="Assets/stripe-2.png" />
    * Configure link parameters and preview the UI on the right-hand side.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-4.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=1f87317556a6e504a73a25bd523a4f74" alt="Stripe 4 Pn" width="2880" height="1449" data-path="Assets/stripe-4.png" />
  </Step>

  <Step title="Embed the Payment Link in your Trickle App" titleSize="h3">
    When users proceed to checkout, they will be redirected to the Stripe-hosted payment page to complete the transaction.

    Providing the payment link to Trickle AI, and ask AI to link the payment link when checkout.
  </Step>

  <Step title="Grant user access after payment" titleSize="h3">
    After successful payment, you’ll need to grant corresponding access or features to the user.
  </Step>
</Steps>

## **Stripe Webhook Integration**

If you want this process to be fully automated, you’ll need to handle Stripe’s webhook events via a backend service. We recommend integrating with **Supabase Edge Functions** for this purpose.

Additionally, you’ll also have to store user-related data in **Supabase**.

<Steps>
  <Step title="Integrate with Supabse" titleSize="h3">
    * Following the instructions to connect Supabase:

      [Supabase integration](/Integrations/Supabase)
    * Use **Supabase Authentication** to manage user registration and login.
    * Store user data in Supabase, especially the **subscription status field**.
    * Use **Supabase Edge Functions** to handle Stripe webhook events. When a payment is completed, update the user’s subscription status in the Supabase database.
  </Step>

  <Step title="Deploy a Stripe Webhook Handler on Supabase" titleSize="h3">
    * Deploy the stripe-webhook template function in Supabase.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-3.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=c1db4e498962a2bb30c3061dec777adf" alt="Stripe 3 Pn" width="2880" height="1449" data-path="Assets/stripe-3.png" />
    * Copy the function endpoint URL. For example: `https://projectid.supabase.co/functions/v1/stripe-webhook`

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-5.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=12cf9fa0f25679ff30b0f1f0f6f9c521" alt="Stripe 5 Pn" width="2880" height="1449" data-path="Assets/stripe-5.png" />
    * Disable JWT verification on this function.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-6.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=b98776cf95f75c8e5725cb9130010058" alt="Stripe 6 Pn" width="2880" height="1449" data-path="Assets/stripe-6.png" />
  </Step>

  <Step title="Set Up Stripe Webhook and Destination" titleSize="h3">
    * Add a new webhook destination in Stripe.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-7.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=e84a08d57558c1fa5d40d47067c6904c" alt="Stripe 7 Pn" width="2880" height="1449" data-path="Assets/stripe-7.png" />
    * Select the event type: `checkout.session.completed`.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-8.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=389cca4ddc49133ab88af80bda582532" alt="Stripe 8 Pn" width="2880" height="1449" data-path="Assets/stripe-8.png" />
    * Set the webhook endpoint to the Supabase Edge Function URL above.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-9.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=79eeb72977cebaf1d0e7bb2381e8cb4c" alt="Stripe 9 Pn" width="2880" height="1449" data-path="Assets/stripe-9.png" />
    * Copy the Webhook Signing Secret.

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-10.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=8f3c6ef062d10acdae03c8a8469ac28d" alt="Stripe 10 Pn" width="2880" height="1449" data-path="Assets/stripe-10.png" />
  </Step>

  <Step title="Configure Stripe Webhook Secret in Supabase" titleSize="h3">
    * In Supabase, go to environment variables and set:

      Key: `STRIPE_WEBHOOK_SIGNING_SECRET` Value:` [your secret from the previous step]`

          <img src="https://mintcdn.com/trickle/VgBMmNj8myTsXmez/Assets/stripe-11.png?fit=max&auto=format&n=VgBMmNj8myTsXmez&q=85&s=38542fededa2a55ae6fb6598419aefcd" alt="Stripe 11 Pn" width="2880" height="1449" data-path="Assets/stripe-11.png" />
  </Step>

  <Step title="Use Trickle AI to Generate Edge Function Code" titleSize="h3">
    * Paste the Supabase Edge Function code into **Trickle AI**.

      `“This is a Supabase Edge Function for handling Stripe webhook events. Please modify it so that when a checkout.session.completed event is received, it updates the user’s subscription status to true in the Supabase database.”`

          <Info>
            You can also paste an example Stripe event payload to help AI better understand the context.
          </Info>
  </Step>

  <Step title="Deploy & Test the Edge Function" titleSize="h3">
    * Copy the code from Trickle AI and paste it to Supabase Edge function.
    * Test using **Stripe’s test mode**, with card number `4242 4242 4242 4242.`
  </Step>

  <Step title="Perform End-to-End Testing" titleSize="h3">
    * Fully test the integration across user flows, including:
      * Payment initiation
      * Stripe checkout completion
      * Webhook event handling
      * Subscription status update in Supabase
      * Feature access control in your Trickle app
  </Step>
</Steps>
