IntegrationsPayments
Setup
- Configure yourStripeaccount.
- Locate [Settings] > [Public Details], and add your website URL there
- Find the [Settings] > [Branding] section, add your logo & colors
- Now go to [Settings] > [Customer Emails], and turn on emails for successful payments & refunds
- Visit [Settings] > [Customer Portal] and activate link to customer portal (you might need it later)
- Type 'rules' in the SearchBox and click [Fraud Prevention] > [Rules], ensure the first 3DS rule is enabled. I also recommend you turning on the second one. Make sure you're blocking payments if CVV fails (check below)
- Turn Test Mode ON
- Create a new product by clicking [Products] > [+ Add Product]. Set a name and a price price (or a monthly price for a subscription). Then click [Save Product].
- Visit the [Payment Links] page, click [+ Create Payment Link], select the product you just created and click [Create Payment Link]. Copy the link and paste it in your browser, you should see a page like this:

- Copy the last part of the payment link (the part after the last /) and paste it in the
NEXT_PUBLIC_STRIPE_CHECKOUT_PAGE_IDvariable in the.envfile. - In the Stripe"s homepage, locate the
Get started with Stripecomponent and change the"Publishable key" and the "Secret key", and add them to the.envfile in theSTRIPE_PUBLIC_KEYandSTRIPE_PRIVATE_KEYvariables respectively. - To set up the webhook locally, follow the steps in [Developers] > [Webhook] > [Test in local environment]. After login to Stripe CLI, use this command to forward webhook events to our API:
stripe listen --forward-to localhost:3000/api/stripe/webhookMoving to Production?
- Turn Test Mode OFF in your Stripe Dashboard
- Make sure to update all the variables in the
.envfile of your production environment with the correct values.
Create a checkout
From the front-end, use the ButtonCallToAction to automatically create a checkout session (one-time payment or subscription)
View the /src/app/api/stripe/route.ts route file to see how the various cases are handled.