> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# 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](https://www.typescriptlang.org/) when working with Paddle.js methods.

## How it works

[Paddle.js](https://developer.paddle.com/paddlejs/overview.md). 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](https://developer.paddle.com/paddlejs/include-paddlejs.md) in the `<head>` of pages where you use [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout.md) or Paddle Retain, then initializing using the [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md) method.

The new wrapper lets you install Paddle.js using a package manager like [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/). 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](https://react.dev/) example that shows how to import, initialize, and open a checkout with one item using the Paddle.js wrapper package.

<!-- simple React example that shows how to import, initialize, and open a checkout with one item -->
```typescript {% title="Simple React example" %}
import { initializePaddle, Paddle } from '@paddle/paddle-js';

export function Checkout() {
  // Create a local state to store Paddle instance
  const [paddle, setPaddle] = useState<Paddle>();

  // Download and initialize Paddle instance from CDN
  useEffect(() => {
    initializePaddle({ environment: 'ENVIRONMENT_GOES_HERE', token: 'AUTH_TOKEN_GOES_HERE' }).then(
      (paddleInstance: Paddle | undefined) => {
        if (paddleInstance) {
          setPaddle(paddleInstance);
        }
      },
    );
  }, []);

  // Callback to open a checkout
  const openCheckout = () => {
    paddle?.Checkout.open({
      items: [{ priceId: 'PRICE_ID_GOES_HERE', quantity: 1 }],
    });
  };
}
```

## Next steps

You can install using modern JavaScript package managers, like [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/).

To learn more and install, see: [@paddle/paddle-js - npm](https://www.npmjs.com/package/@paddle/paddle-js)