Include and initialize Paddle.js
Include Paddle.js on your website to start building checkout experiences with Paddle. Initialize by passing a client-side token and Retain API key.
To start building subscription billing experiences with Paddle, include Paddle.js on your checkout pages and in-app.
Import as a module with TypeScript definitions
You can install Paddle.js using a JavaScript package manager, then import and initialize.
The Paddle.js module includes TypeScript definitions for Paddle.js methods, so you can use type checking to write more robust code.
To install using npm
:
11npm install @paddle/paddle-js
To install using yarn
:
11yarn add @paddle/paddle-js
Use the initializePaddle
method to initialize Paddle.js. To learn more, see Paddle.js wrapper on GitHub
Manually load the Paddle.js script
You can manually load the Paddle.js script by adding a link to Paddle.js in the <head>
of pages where you use Paddle Checkout or Paddle Retain:
11<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
Always load Paddle.js directly from
https://cdn.paddle.com/
. This makes sure that you're running with the latest security and feature updates from Paddle.
Initialize Paddle.js
Call the Paddle.Initialize()
method and pass token
to initialize.
Client-side token for authentication. You can create and manage client-side tokens in Paddle > Developer tools > Authentication. Required.
To create and manage client-side tokens, go to Paddle > Developer tools > Authentication. Click Generate client-side token under the "Client-side tokens" section.
1234561<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
2<script type="text/javascript">
3 Paddle.Initialize({
4 token: 'live_7d279f61a3499fed520f7cd8c08' // replace with a client-side token
5 });
6</script>
Don't use API keys when working with Paddle.js. Keep API keys secret for security.
Initialize Paddle.js and Retain
To use Retain, include Paddle.js on your commercial website homepage and the first page your user sees after authenticating, as well as your checkout and pricing pages.
Paddle.js integrates with Retain, so you don't have to include a separate Retain script in your app or website. Client-side tokens for live accounts authenticate with both Paddle Billing and Paddle Retain, so there's no need to pass a separate key for Retain.
Only available for live accounts. Paddle Retain works with live data only, meaning this method is only available for live accounts. Paddle Retain isn't loaded at all for sandbox accounts.
Call the Paddle.Initialize()
method and pass token
and pwCustomer
where:
Client-side token for authentication. You can create and manage client-side tokens in Paddle > Developer tools > Authentication. Required.
Identifier for a logged-in customer for Paddle Retain. Pass an empty object if you don't have a logged-in customer. Paddle Retain is only loaded for live accounts.
Paddle ID of a customer entity, prefixed ctm_
. Only customer IDs are accepted. Don't pass subscription IDs, other Paddle IDs, or your own internal identifiers for a customer.
1234567891<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
2<script type="text/javascript">
3 Paddle.Initialize({
4 token: 'live_7d279f61a3499fed520f7cd8c08',
5 pwCustomer: {
6 id: 'ctm_01gt25aq4b2zcfw12szwtjrbdt'
7 }
8 });
9</script>
If you don't know the Paddle ID for a customer, pass an empty object to pwCustomer
instead.
Be sure to pass the Paddle ID of a customer entity. Subscription IDs, other Paddle IDs, and internal identifiers for a customer don't work with Retain.