DEV Community

Andrei Canta
Andrei Canta

Posted on • Edited 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

balrajola profile image

Unpopular Opinion: TypeScript is Overrated (Or Is It?)

Balraj Singh -

renukapatil profile image

Understanding Angular at Its Core: Key Concepts, Utilities and Best Practices

Renuka Patil -

ymc9 profile image

Building Multi-Tenant Apps Using StackAuth's "Teams" and Next.js

ymc9 -

joaoezx profile image

NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems.

João Freitas -