Payments

Guide: Payments

Alriight now it's time for some real business. I'm talking about money 💰.

Everything related to payments is handled by Stripe under the hood.

Stripe setup

  • If you don't have a Stripe account yet, create one.
  • Make sure to fill your public details and brandind.
  • Create your first product here. Add a name and an amount for the product. Click on One-off for the billing type. Go to the product page and copy the Price ID (it should look like price_1J5J2t2eZvKYlo2C2X2X2X2X). Paste it inside the strafer.config.ts file in stripe.plans[0].priceId.
    Strafer config
    export const straferConfig = {
      // ... rest of the config
      stripe: {
        plans: [
          {
            name: 'Starter',
            description: 'The perfect starter to get you up and running in minutes',
            popular: false,
            price: 250,
            discountedPrice: 150,
            features: [
              'Unlimited projects',
              'Unlimited collaborators',
              'Unlimited storage',
              'Unlimited bandwidth',
              'Unlimited support',
            ],
            priceId: 'price_1J5J2t2eZvKYlo2C2X2X2X2X',
          },
        ],
      }
    };
    Repeat the process if you want to add more plans.
  • If you want to sell discounted products, you'll also need to create a coupon in Stripe. Copy the coupon ID and paste it inside the strafer.config.ts file in stripe.coupon. It will be applied to the checkout session.
    Coupon
    export const straferConfig = {
      // ... rest of the config
      stripe: {
        coupon: '12345',
        //...
      }
    };
  • Next, you need to retrieve your Stripe Secret (test key) in Developers. If you don't have one yet, create one. Then add it to STRIPE_API_KEY in .env.local file. This key is used to authenticate all your requests to Stripe API.
    Stripe API Key
    # Stripe
    STRIPE_API_KEY=sk_test_51J5J2t2eZ
  • Finally we need to set up Stripe Webhooks so that we can receive events about Checkout Sessions statuses, Customers, Payments etc. After you've installed Stripe CLI. Run :
    Stripe CLI
    stripe login
    stripe listen --forward-to localhost:3000/api/webhooks/stripe
    # Copy the webhook secret that is returned (whsec_...)
    Add the Webhook secret to STRIPE_WEBHOOK_SECRET in .env.local file.
    Stripe Webhook Secret
    # Stripe
    STRIPE_WEBHOOK_SECRET="whsec_1234"

When going in production, you'll need to create a webhook in live mode. The endpoint URl should be https://yourdomain.com/api/webhooks/stripe. Select the events you want Stripe to send to your webhook (select all if not sure). Copy the webhook secret and add it to STRIPE_WEBHOOK_SECRET in your production environment variables. Also make sure to update the prices ids in strafer.config.ts with live ids.

NextTutorial: Analytics