Load Paddle.js as a module
Load Paddle.js as a module and use TypeScript definitions when working with Paddle.js methods.
What's new?
We released a wrapper that lets you load Paddle.js as a module rather than manually including it.
It lets you use TypeScript definitions when working with Paddle.js methods.
How it works
Paddle.js. is a lightweight JavaScript library that lets you build rich, integrated subscription billing experiences using Paddle Billing and Paddle Retain. You can use Paddle.js to do things like open checkouts and build workflows for updating payment methods.
You can install Paddle.js by manually loading the Paddle.js script in the <head> of pages where you use Paddle Checkout or Paddle Retain, then initializing using the Paddle.Initialize() method.
The new wrapper lets you install Paddle.js using a package manager like npm and Yarn. You can use it to load Paddle.js as a module, then initialize using the initializePaddle function.
It includes TypeScript definitions for Paddle.js methods, so you can use type checking to write more robust code.
Examples
This is a simple React example that shows how to import, initialize, and open a checkout with one item using the Paddle.js wrapper package.
12345678910111213141516171819201import { initializePaddle, Paddle } from '@paddle/paddle-js';
2
3export function Checkout() {
4 // Create a local state to store Paddle instance
5 const [paddle, setPaddle] = useState<Paddle>();
6
7 // Download and initialize Paddle instance from CDN
8 useEffect(() => {
9 initializePaddle({ environment: 'ENVIRONMENT_GOES_HERE', token: 'AUTH_TOKEN_GOES_HERE' }).then(
10 (paddleInstance: Paddle | undefined) => {
11 if (paddleInstance) {
12 setPaddle(paddleInstance);
13 }
14 },
15 );
16 }, []);
17
18 // Callback to open a checkout
19 const openCheckout = () => {
20 paddle?.Checkout.open({
Next steps
You can install using modern JavaScript package managers, like npm and Yarn.
To learn more and install, see: @paddle/paddle-js - npm
