ConfigurationStripe

Stripe

For payments, we use Stripe. Follow these steps to get all the necessary API Keys, add the product and price in Stripe, set up the Stripe CLI, etc.

Create a Product and Price

  1. Log in to your existing [Stripe] account or create a new one.

  2. In the Stripe Dashboard, go to the PRODUCT CATALOG section.

  3. Click on CREATE PRODUCT.

  4. Fill in the required fields such as product name, description, price, etc. and click on Create product.

Update the Product Price ID in the Database

  1. In the Stripe Dashboard, go to the PRODUCT CATALOG section.

  2. Find the product you want to obtain the price ID of, and click on it.

  3. Then, inside the pricing section, click on the three dots (…) next to the price.

  4. Then, copy the price ID.

  5. In the Supabase Dashboard, go to the TABLE EDITOR section.

  6. In the PRODUCTS table, find the stripe_price_id column and paste the price Id into it.

If you haven’t created a PRODUCTS table yet, please go back to the Database of this documentation and follow the steps to create it. Then come back here.

Locate the Stripe API Keys

  1. Inside the Stripe Dashboard, go to the developers section and then click on API KEYS.

  2. Copy the PUBLISHABLE KEY and SECRET KEY.

  3. Inside the codebase, go to the .env.local file in the root folder and add them to the variables shown below.

.env.local
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEy=
NEXT_PUBLIC_STRIPE_SECRET_KEy=

Setting up the Stripe CLI

  1. Inside the codebase, install the Stripe CLI:

    brew install stripe/stripe-cli/stripe

  2. Log in to your Stripe account via the CLI:

    stripe login

  3. Start the Stripe webhook listener:

    stripe listen --forward-to localhost:3000/api/webhooks/stripe

  4. You will receive a webhook signing secret from the Stripe CLI. Update the .env.local file with it:

    .env.local
    NEXT_PUBLIC_STRIPE_WEBHOOK_SECRET=

How To Use Stripe In Development

  1. Turn ON Test Mode in your Stripe Dashboard.

  2. Start the Stripe webhook listener:

    stripe listen --forward-to localhost:3000/api/webhooks/stripe

  3. Open http://localhost:3000/choose-pricing-plan in your browser. You need to be logged in to see the page.

  4. Select a pricing plan and click on UPGRADE NOW. You should have completed a free trial or are in one before performing this step.

  5. Use the following credit card details 4242 4242 4242 4242 with any future date (e.g. 02/28) and any CVC number (e.g. 728).

The stripe webhook api/webhook/stripe/route.ts will listen to Stripe events and receive the checkout.session.completed event.

Then, the checkout.session.completed event will trigger the handleCheckoutSessionCompleted function which updates the subscription_tier column in the purchased_subscriptions table to the selected pricing plan and many more.

admin.ts
const { error } = await supabase.from("purchased_subscriptions").insert({
    user_id: userId,
    created_at: moment().toISOString(),
    updated_at: moment().toISOString(),
    stripe_price_id: stripePriceId,
    status: SubscriptionStatus.ACTIVE,
    subscription_tier: subscriptionTier,
});

How To Use Stripe In Production

  1. Turn OFF Test Mode in your Stripe Dashboard.

  2. Head to the DEVELOPERS tab and copy the PUBLISHABLE KEY and SECRET KEY.

  3. Update the NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and NEXT_PUBLIC_STRIPE_SECRET_KEY variables in your production environment. For instance, in Vercel, go to SETTINGS → ENVIRONMENT VARIABLES.

  4. In the Stripe Dashboard, go to DEVELOPERS → WEBHOOKS and add the webhook URL as a new endpoint https://example-domain.com/api/webhooks/stripe.

  5. Select the checkout.session.completed event (or more if needed).

Further Configuration (Optional)

  1. In SETTINGS → BUSINESS → BANK ACCOUNTS AND CURRENCIES → PAYOUT SCHEDULE, set a specific date of the month to receive your payouts (I use the 20th of each month).

  2. In SETTINGS → BUSINESS → CUSTOMER EMAILS → PAYMENTS, activate emails for successful payments and refunds.

EmailDeployment