Stripe Payments

Stripe is an important part of the payment processing system for your application. It allows you to accept payments from users and manage subscriptions easily. In this guide, we'll cover how to integrate Stripe into your application and set up the necessary configurations.

Setup

To get started, you'll need to create a Stripe account and obtain your API keys. Follow these steps:

1. Sign up for a Stripe account at stripe.com.
2. Once you're logged in, navigate to the Developers section and find your API keys.
3. In the same section get also the Webhook Secret, which is used to verify events sent from Stripe to your application. You can either configure the production of the local test one.
4. Create the products for the Starter and Pro plans in case you'll have 2 plans.

These values should be stored in the following environment variables:

# Stripe
STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_PK=
STRIPE_WEBHOOK_SECRET=
PRICE_ID_PRO=
PRICE_ID_STARTER=

You should now be able to use Stripe in your application. And with that you should be able to start the checkout process when clicking on a specific plan.

But first, we still need to configure the webhook to listen for events from Stripe.

On BuilderHack we have it already pre-configured for you, so you just need to check what do you want to do once the payment is processed. Go to file src > app > api > webhook > stripe > route.ts and checkout the implementation. Under checkout.session.completed event you already have an example on how to make changes to supabase database table and send an email to the buyer.

Under src/components/Home/Pricing/index.tsx you can find the implementation for the pricing plans and the checkout button. The onPlanSelect function is responsible for handling the plan selection and initiating the checkout process.

import { useStripe } from '@stripe/react-stripe-js';

const onPlanSelect = async (nickname: string) => {
    try {
      const url = location.origin + '/dashboard' || "http://localhost:3000";
      const checkoutData = await stripeCheckout(nickname, url);
      const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK || '');
      const res = await stripe?.redirectToCheckout({
        sessionId: checkoutData.id,
      })
      if (res?.error) {
        trackCreateCheckoutError(res?.error)
        alert("Fail to checkout!")
      }
      return
    } catch (error) {
      console.log('ERROR ', error);
    }
}

And that's it! Now you have everything set up to handle Stripe payments in your application.