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

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 81-90 (Part 9)

Probir Sarkar -

danwalsh profile image

[SOLVED] Vue 3 + TypeScript + Inlay Hint support in NeoVim

Dan Walsh -

soheilyr profile image

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Soheil yazdanyar -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -