Using Stripe, you can accept payments from a variety of sources, including credit and debit cards, Apple Pay, and Google Pay.
Adding Stripe Checkout to a Next.js Application
You can integrate Stripe checkout with applications created with different technologies including Next.js.
This tutorial assumes you have a Next.js e-commerce site set up and only provides a guide on how to add Stripe checkout to the site.
Setting Up a Stripe Account and Retrieving API Keys
To use Stripe checkout, you need to create a Stripe account and get the API keys. The API keys consist of a publishable key and a secret key, which you’ll use to authenticate requests from your application to the Stripe API.
Follow these steps to set up a Stripe account:
Go to the Stripe website and click the “Sign up” button. Enter your email, full name, country, and password, and click the “Create account” button. Verify your email by following the instructions in the email Stripe will send you. On the stripe dashboard, click “Activate payments” and answer the prompt questions to complete the account setup process. These questions may be about the business name, address, and bank information. For development purposes, use test mode. Copy the API keys from the “Developers” tab to the . env file in your app folder.
You’ll now be able to access the Stripe account using the API keys.
Installing the Stripe npm Package
Run this command to install the Stripe npm package.
Import the Stripe library into your checkout component page.
In the API folder, create a new file called checkout-session.js file. Initialize the Stripe object with the API keys you retrieved from your Stripe dashboard.
In the handler function, get the items to check out from the body parameters.
Create a checkout session object to the handler function and pass the items.
Here is what the nodes you are passing to the session object mean:
payment_method_types: The payment method types the checkout session accepts. Browse the list of available payment methods in the Stripe documentation. line_items: A list of items the user is purchasing. mode: The mode of the Checkout Session. If the checkout items include at least one recurring item pass “subscription”. success_url: The URL Stripe will redirect users if the payment is successful cancel_url: The URL Stripe will redirect users if they cancel the payment.
Altogether, the checkout-session.js file should look like this:
This function now uses the try/catch to redirect users when an error occurs during checkout. Now that you have created the API route that will process the payment, the next step is to create a checkout component to handle the checkout process.
Check out this post on creating API routes in Next.js for a more in-depth explanation of Next.js API routes.
Creating a Checkout Component
To process the checkout, you need to install the @stripe/stripe-js library using NPM.
@stripe/stripe-js library is a loading utility that’ll help you load the Stripe.js instance.
Once the installation finishes, create a new file in your /components directory named /components/checkout.js. Then call the loadstripe function from @stripe/stripe-js library, passing the publishable key as an argument.
loadstripe() returns a promise that resolves with a newly created Stripe object once Stripe.js has loaded.
Next, add a function to create a checkout session in the component.
This function uses Axios to call the API you created in the /api folder to retrieve the checkout session.
Add a checkout button in the return statement that’ll trigger the handleCheckout function when clicked.
You can call the checkout component on the cart page.
Handling the Redirects From Stripe
In the checkout API route, you defined a success URL and a cancel URL that stripe should redirect a user when the process is successful or fails. The cancel URL maps to the /cancel route, while the success URL maps to the /success route. Add two components in the /pages folder named success and cancel to handle these URLs.
In pages/success.js, add the success component.
In pages/cancel.js, add the cancel component.
Now, Stripe will redirect to either of these pages depending on the checkout status.
If you are using Next.js 13, see this tutorial on how the app folder works in Next.js 13 to switch from the /pages folder.
Additional Customization Options for the Checkout Page
From the Stripe dashboard, you can customize the checkout page to match the look of your brand. You can add a logo, icon, brand color, accent color, and even use your own custom domain. Additionally, when creating the checkout session, you can add the payment methods you prefer and also specify the language Stripe should display on the checkout page. All these options allow you to customize the checkout process to suit your application.
Why Use Stripe for the Checkout Page?
While you can build your own checkout processing service, using a payment platform like Stripe is usually a better option. Stripe checkout helps you reduce development time, allowing you to start accepting payments within a short time.
Moreover, you get additional features like PCI compliance, cart recovery, discount capabilities, and the ability to collect shipping information and send post-payment invoices.
