Stripe Configuration

We will discuss how to configure Stripe in Full-Stack-Kit to be able to accept payments for your application.

Stripe Account

First, you need to create a Stripe account if you don't have one already. You can do that by visiting the Stripe website (opens in a new tab).

Stripe API Keys

Once you have a Stripe account, you will need to get your API keys. You can find your API keys in the Stripe dashboard.

Environment Variables

You will need to add your Stripe API keys to your environment variables in the .env.local file.

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_example
STRIPE_SECRET_KEY=sk_test_example
STRIPE_WEBHOOK_SECRET=whsec_example

Stripe Webhook on Local Environment

During local development, you will need a way for Stripe to send webhooks to your application running on your local machine. An easy way to get started is via the Stripe CLI (opens in a new tab), using the listen command. For example, if you are developing and serving your site at http://localhost:3000, you may run the following Stripe CLI command to allow Stripe to communicate with your application:

stripe listen --forward-to http://localhost:3000/api/stripe/webhook

Stripe Webhook on Production Environment

Your application will need to listen for events from Stripe. Your Full-Stack-Kit application already has a Stripe webhook endpoint setting up for you. You should configure Stripe to send webhook alerts to your application's /api/stripe/webhook API route.

Here is how to do it in the Stripe dashboard:

1. Go to the Stripe Dashboard (opens in a new tab).

2. Click on the Developers tab on the left-hand side.

3. Click on the Webhooks link.

4. Click on the Add endpoint button.

5. Enter your application's webhook URL. For example, https://yourdomain.com/api/stripe/webhook.

6. Select the events you want to listen for. You can select all events if you want. But you should at least select the following events:

   • checkout.session.completed
   • payment_intent.succeeded
   • payment_intent.payment_failed
   • customer.subscription.created
   • customer.subscription.updated
   • customer.subscription.deleted
   • invoice.paid
   • invoice.payment_failed

You can easily add more events to listen for by adding them in the api/stripe/webhook/route.ts file.

Stripe Pricing Plans

You can create pricing plans in the Stripe dashboard. You can create a pricing plan for your application by following these steps:

1. Go to the Stripe Dashboard (opens in a new tab).
2. Click on the Billing tab on the left-hand side.
3. Click on the Add product button.
4. Enter the product name and description.
5. Enter the pricing plan details, such as the price, currency, and billing interval.
6. For subscriptions pricing, make sure to select the Recurring and if its monthly or yearly for the billing period.
7. Click on the Save button.

You can create multiple pricing plans for your application.

Now you have successfully configured your stripe account to accept payments. Next, let's see how to configure Full-Stack-kit to use the Stripe pricing plans that you configured.