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 use either a Paddle ID of a customer entity or an email address. You can update pwCustomer after initialization using Paddle.Update().
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.
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 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.
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});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 or email address for a customer, you may pass an empty object to pwCustomer.
For logged-in users, you should pass pwCustomer.
This example passes the email address of a customer entity in Paddle to Retain.
1234561Paddle.Initialize({
2 token: 'live_7d279f61a3499fed520f7cd8c08',
3 pwCustomer: {
4 email: 'jo@example.com'
5 }
6});Where you don't know the Paddle ID or email address for a customer, you may pass an empty object to pwCustomer.
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});Early access
You're part of the early access program for one-page checkout, which means you can use it before it's generally available.
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});To learn more, see: One-page checkout early access program
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});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});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});See: Paddle.js events
