Add Checkout Page to Next.js

Sell products, subscriptions and events on Next.js sites. Learn how to embed checkouts, add checkout pop-ups and add payment links.

We’ve made it easy to embed checkouts on your Next.js site to sell products, services, subscriptions and events.

There are 3 ways to add checkouts to your Next.js site:

1. Buy button
2. Checkout popup
3. Checkout embed

While the buy button is easy to set up (just a minute or so), the checkout embed and popup take the payment experience to the next level.

Let’s dive in!

Add a Buy button

With the Buy button, the checkout will open on its own page, in the same or in a new tab.

1. Go to your Checkout Page dashboard and enter the edit view of a page
2. Select Share & Embed
3. Copy the Hosted page URL
4. Add an anchor link to your Next.js page or component and use the Hosted page URL as the href
5. Optionally, you can add target="_blank" to the anchor tag

<a href="https://mystore.checkoutpage.com/my-checkout">
  Buy now
</a>

Now whenever someone clicks the link, they will be navigated to the checkout.

Add a pop-up checkout

By adding a pop-up one page checkout, you can let your customers complete their purchases without leaving your site.

The checkout pop-up works with a script embed.

First, we’ll add the script embed to your Next.js site:

1. Open your _document.js
2. Add the below script code inside the Head

<Script
  type="text/javascript"
  src="https://assets.checkoutpage.com/overlay.js"
  strategy="lazyOnload"
  async
/>

After adding the script embed to your _document.js, we’ll add the checkout pop-up to your pages or components:

1. Go to your Checkout Page dashboard and open the checkout you want to add
2. Select Share & Embed
3. Copy the Hosted page URL
4. Add an anchor link to your Next.js page or component and use the Hosted page URL as the href
5. Add the class cp-button to your anchor link

<a
  href="https://mystore.checkoutpage.com/my-checkout"
  className="cp-button"
>
  Buy now
</a>

Now your checkout pop-up will open whenever someone clicks the link.

Embed your checkout

The checkout embed lets you sell directly on your site with an embedded checkout form. It’s perfect for a two-column section, combined with conveying copy and images, or as a standalone section.

The checkout pop-up works with a script embed.

First, we’ll add the script embed to your Next.js site:

1. Open your _document.js
2. Add the below script code inside the Head

<Script
  type="text/javascript"
  src="https://assets.checkoutpage.com/overlay.js"
  strategy="lazyOnload"
  async
/>

After adding the script embed to your _document.js, we’ll add the checkout embed to your pages or components:

1. Go to your Checkout Page dashboard and open the checkout you want to add
2. Select Share & Embed
3. Copy the Hosted page URL
4. Add div to your Next.js page or component and add the Hosted page URL as data-checkout
5. Add the class cp-checkout to your div

<div
  className="cp-checkout"
  data-checkout="https://mystore.checkoutpage.com/my-checkout"
  style="width: 100%;"
/>

We need to make sure to initialize the embed whenever your page or component mounts.

1. Add the following script to your page or component body

useEffect(() => {
  if (!window.checkoutPage || typeof window.checkoutPage.initEmbeds !== 'function') {
    return;
  }

  window.checkoutPage.initEmbeds();
}, []);

Now your checkout embed will load whenever your page or component renders.