Payment Setup

Overview

StartupFast uses Stripe to handle payments. This includes both subscriptions and one-time payments.

Stripe Account Setup

1. Create a Stripe account
2. Go to the Stripe Dashboard
3. Get your API keys from: Dashboard → Developers → API keys
4. Copy both the Publishable Key and Secret Key

Setup Stripe Products

You can configure your Stripe products by adding them from Dashboard → Products.

• Go to Dashboard → Products
• Create a new product:
  • Add a product name and its description
  • Set pricing (one-time or subscription)
  • Copy the price_id after creation

Take note of the price_id, this will be used by the checkout button component to create a checkout session for that specific product.

Configure Webhooks

We use webhooks to correctly manage checkout sessions and give the user access to the product.

• Go to Stripe Dashboard -> Developers -> Webhooks

• Click "Add endpoint"

• Add your webhook URL: https://your-domain.com/api/payments/webhook

• Select events to listen to:

  • checkout.session.completed
  • checkout.session.expired
  • customer.subscription.updated
  • customer.subscription.deleted
  • invoice.paid
  • invoice.payment_failed

• Copy the Webhook Signing Secret

• Add to .env.local:

1STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

NOTE: During the development/test phase, you most likely want to test the Webhook locally without using a production domain. This can be done with the Stripe CLI, follow the next steps.

Testing Locally

• Install the Stripe CLI
• Login to the Stripe CLI

1stripe login

• Forward your webhooks to your local environment

1stripe listen --forward-to localhost:3000/api/payments/webhook

Now while in test mode, your Webhooks events will be sent to your local machine.

Implementing a payment

StartupFast already comes with a checkout-button that will take care of handling the user payment session. You will just need to import the ButtonCheckout and add the correct properties:

1<ButtonCheckout text="Buy the product" priceId="product-price-id" mode="payment|subscription">

When clicking the button-checkout, the user will be redirected to the Stripe Checkout.

Webhook customization

You can customize the Webhook behavior if needed by going to the /app/api/payments/webhook/route.ts. By default, the app is going to set the boolean active in the user row on the database when a payment has successfully been made.

Customer portal

StartupFast already comes with the ButtonCustomerPortal that can be used to give access to the active users to their payments and information updates on the Stripe website.

NOTE: Remember to test thoroughly in Stripe's test mode before going live. You can use Stripe's test card numbers (e.g., 4242 4242 4242 4242) for testing purchases.

Going to Production

When you're ready to accept real payments, follow these steps:

1. Disable Test Mode

   • Go to your Stripe Dashboard
   • Turn OFF Test Mode using the toggle in the top-right corner

2. Configure Production Keys

   • Go to Developers -> API keys
   • Copy your production Publishable and Secret keys
   • Add them to your production environment:

     1STRIPE_PUBLIC_KEY=pk_live_...
     2STRIPE_SECRET_KEY=sk_live_...

3. Set Up Production Webhooks

   • Go to Developers → Webhooks → Add Endpoint
   • Enter your production URL: https://your-domain.com/api/payments/webhook
   • Select the required events:
     • checkout.session.completed
     • checkout.session.expired
     • customer.subscription.updated
     • customer.subscription.deleted
     • invoice.paid
     • invoice.payment_failed
   • Copy the Webhook Signing Secret and add it to your production environment:

     1STRIPE_WEBHOOK_SECRET=whsec_live_...

4. Optional: Configure Customer Emails (recommended)

   • Go to Settings → Customer Emails
   • Enable email notifications for:
     • Successful payments
     • Refunds
     • Failed payments