Paddle.Initialize()
Initializes Paddle.js and Retain. Replaces Paddle.Setup().
Use Paddle.Initialize() to initialize Paddle.js and set default checkout settings. This is a required method, letting you:
- Authenticate with your Paddle account
- Integrate with Retain
- Pass settings that apply to all checkouts opened on a page
- Create event callbacks
You must call Paddle.Initialize() and pass a client-side token to use Paddle Checkout. You can create and manage client-side tokens in Paddle > Developer tools > Authentication.
You can only call
Paddle.Initialize()once on a page. You'll get an error if you try to call it more than once. UsePaddle.Update()to updatepwCustomeror pass an updatedeventCallback.
You can pass settings for opened checkouts using either Paddle.Checkout.open() or Paddle.Initialize(). Settings passed to Paddle.Initialize() are default settings, applied to all checkouts opened on a page.
Paddle.js emits events for key actions as a customer moves through checkout. You can pass an eventCallback to Paddle.Initialize() to call a function for every Paddle.js checkout event. This is typically used as part of an inline checkout integration for updating on-page elements, like items lists or breadcrumbs.
Paddle.Initialize()replaces the deprecatedPaddle.Setup()method. It's functionally the same.
Paddle Retain
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.
To use Retain, pass pwCustomer for logged-in customers. You can update pwCustomer after initialization using Paddle.Update().
Only available for live accounts.
Paddle Retain runs on live data. While you can initialize Paddle.js with Retain in sandbox accounts, Retain features aren't loaded there.
Parameters
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.
Set general checkout settings. Settings here apply to all checkouts opened on the page.
Configured settings.
Function to call for Paddle.js events.
Examples
This example passes a client-side token to Paddle.js. This is required.
You can create and manage client-side tokens in Paddle > Developer tools > Authentication.
1231Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08'
3});To learn more, see Include and initialize Paddle.js
For logged-in users, you should pass pwCustomer.
This example passes the Paddle ID for a customer entity in Paddle to Retain.
1234561Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08',
3 pwCustomer: {
4 id: 'ctm_01gt25aq4b2zcfw12szwtjrbdt'
5 }
6});Where you don't know the Paddle ID for a customer, you can pass an empty object to pwCustomer.
To learn more, see Initialize Paddle.js with Retain
This example sets default checkout settings for all checkouts opened on a page. It includes common settings for inline checkouts.
123456789101112131Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3 checkout: {
4 settings: {
5 displayMode: "inline",
6 theme: "light",
7 locale: "en",
8 frameTarget: "checkout-container",
9 frameInitialHeight: "450",
10 frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
11 }
12 }
13});To learn more, see Pass checkout settings
This example sets default checkout settings for all checkouts opened on a page. It includes the required settings to open a one-page inline checkout.
12345678910111213141Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3 checkout: {
4 settings: {
5 displayMode: "inline",
6 variant: "one-page",
7 theme: "light",
8 locale: "en",
9 frameTarget: "checkout-container",
10 frameInitialHeight: "450",
11 frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
12 }
13 }
14});This example sets default checkout settings for all checkouts opened on a page. It includes common settings for overlay checkouts.
123456789101Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3 checkout: {
4 settings: {
5 displayMode: "overlay",
6 theme: "light",
7 locale: "en"
8 }
9 }
10});To learn more, see Paddle.js events
This example logs events emitted by Paddle.js to console.
1234561Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3 eventCallback: function(data) {
4 console.log(data);
5 }
6});To learn more, see Paddle.js events
This example uses a switch statement to log some text to console based on events emitted by Paddle.js.
1234567891011121314151617181Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3 eventCallback: function(data) {
4 switch(data.name) {
5 case "checkout.loaded":
6 console.log("Checkout opened");
7 break;
8 case "checkout.customer.created":
9 console.log("Customer created");
10 break;
11 case "checkout.completed":
12 console.log("Checkout completed");
13 break;
14 default:
15 console.log(data);
16 }
17 }
18});To learn more, see Paddle.js events