DEV Community

Andrei Canta
Andrei Canta

Posted on • Updated on • Originally published at deiucanta.com

How to integrate Paddle.js with Next.js?

#nextjs #paddle #typescript

This article was originally posted on my personal blog.

First, you should add some variables into your .env file.

PADDLE_VENDOR_ID=...
PADDLE_VENDOR_AUTH_CODE=...
PADDLE_SANDBOX=true

NEXT_PUBLIC_PADDLE_VENDOR_ID=$PADDLE_VENDOR_ID
NEXT_PUBLIC_PADDLE_SANDBOX=$PADDLE_SANDBOX
Enter fullscreen mode Exit fullscreen mode

Next, create a component called PaddleLoader.

import Script from "next/script";

export function PaddleLoader() {
  return (
    <Script
      src="https://cdn.paddle.com/paddle/paddle.js"
      onLoad={() => {
        if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
          Paddle.Environment.set("sandbox");
        }
        Paddle.Setup({
          vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
        });
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Next, include PaddleLoader in your page

import { PaddleLoader } from "...";

export default function Page() {
  return (
    <>
      <PaddleLoader />
      <button
        onClick={() => {
          Paddle.Checkout.open({
            product: "...",
          });
        }}
      >
        Buy
      </button>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you use TypeScript, you should create a file called types.d.ts in the root of your project.

declare global {
  var Paddle: any;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ootkin profile image

From Code to OpenAPI spec with Ease using SkimX

ootkin -

tagada216 profile image

Adonis JS V6 — API REST Boilerplate

Nicolas -

pbouillon profile image

Efficient Patterns for Effects

Pierre Bouillon -

ramunarasinga profile image

Lessons from open-source: How obsessed are you with following Single Responsibility Principle?

Ramu Narasinga -