GuidesConfigure Stripe

In this example we will see how to configure a one-time payment with Stripe.

In this example we will see how to configure a one-time payment with Stripe.

You need to haveStripeand adatabaseconfigured.

• Go to yourStripe dashboard,Click [More +] > [Product Catalog] > [+ Add Product]. Set a name and a price price (or a monthly price for a subscription). Then click [Save Product].
• Visitthe payment links page,Click [New +] and follow the guided procedure, where you will be asked to select the product you just created.
• Copy the last part of the payment link (the part after the last /) and paste it in theNEXT_PUBLIC_STRIPE_CHECKOUT_PAGE_ID variable in the .env file.
• Create a new page and paste the following to test it:

  // /src/app/test/page.tsx
  import React from 'react';
  import ButtonCallToAction from "@/components/design/ButtonCallToAction";
  
  const TestPage = () => {
    return (
      <section className="max-w-xl mx-auto space-y-8">
        <h1 className="text-3xl md:text-4xl font-extrabold">
          Go to the payment page:
        </h1>
  
        <ButtonCallToAction />
      </section>
    );
  };
  
  export default TestPage;
    

• Visit http://localhost:3000/test in your browser, click the call to action and you should see the Stripe payment page.
• The webhook in /src/app/api/stripe/webhook/route.ts listen to Stripe events and handles the logic to handle the sale on the database, so that you can see it in the dashboard.
  You need to run the Stripe event listener locally for this to work in dev mode.
• You can now see the successful payments in the dashboard.