Skip to main content

Payments (Stripe)

Setup

  1. Create a stripe account and set it up
  2. Create a product
  3. Go to portal settings and click "Save Changes"
  4. Go to Supabase dashboard > Edge Functions and copy the stripe_webhooks URL. It should look something like below:

  1. Add stripe webhook, using the copied endpoint and the following event types:
    1. customer.subscription.deleted
    2. customer.subscription.updated
    3. customer.subscription.created
    4. checkout.session.completed
  2. Get your Stripe API secret key and update STRIPE_SECRET_KEY in supabase/.env
  3. Get the signing webhook signing secret and update STRIPE_WEBHOOK_SIGNING_SECRET in supabase/.env

  1. Set your secrets in production
supabase secrets set --env-file supabase/.env
info

You can follow steps 1-7 in the Stripe test environment to have your local environment use the stripe test environment. Update .env.local instead of .env

Updating your Pricing Page

  1. Go to the product catalog and select a product
  2. Copy the price id you want to add

  1. Craft a URL from the flutter app in the format https://YOUR_URL/payments?price=YOUR_PRICE. For example:
https://app.devtodollars.com/payments?price=price_1Oq6bXFttF99a1NCdZqHlQ8J
  1. Update your pricing page with the URL

Add Paywalls

You can check whether a user has purchased a product under active_products in the stripe table. See stripe_webhook for the logic.

info

One-time purchases are never deleted from active_products

info

Subscriptions are deleted from active_products when they are either not: active, trialing, or incomplete.

  1. Since the stripe product ids are stored in active_products we need to first retrieve the product id from stripe

  1. In order to add the paywall, all you need to do is check if active_products contains a particular stripe product id.
const activeProducts = ["prod_PfRUhnTnwtHLvw"]; // retrieved from stripe table
if (activeProducts.includes("prod_PfRUhnTnwtHLvw")) {
// paywalled content goes here!
}
info

In Flutter, active products can be accessed in the AppUser model and is already fetched through auth_notifier.dart