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. 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>
Do not use API keys when working with Paddle.js. API keys must be kept secret.
Initialize Paddle.js and Retain
To use Retain, include Paddle.js on every page of your web app or website — including your commercial or marketing website.
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 is not 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 either id
or email
, or an empty object if you don't have a logged-in customer. Paddle Retain is only loaded for live accounts.
Paddle ID for a customer entity in Paddle. Do not pass a subscription ID.
Email address related to a customer entity in Paddle.
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>
Where you don't know the Paddle ID or email address for a customer, you may pass an empty object to pwCustomer
.
Be sure to pass the Paddle ID of a customer entity. Subscription IDs or other Paddle IDs cannot be used for Retain.
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 email: 'jo@example.com'
7 }
8 });
9</script>
Where you don't know the Paddle ID or email address for a customer, you may pass an empty object to pwCustomer
.