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:
    Checkout page
  • 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.
  • In the Stripe"s homepage, locate the Get started with Stripe component and change the"Publishable key" and the "Secret key", and add them to the .env file in theSTRIPE_PUBLIC_KEY and STRIPE_PRIVATE_KEY variables 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/webhook

    Moving to Production?

    • Turn Test Mode OFF in your Stripe Dashboard
    • Make sure to update all the variables in the .env file 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.