Paddle.Checkout.open()

You can pass checkout settings using Paddle.Initialize(), or set them for each checkout in Paddle.Checkout.open().

This example includes the settings object as part of the checkout open method. Checkout is opened with these settings.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  },
6  {
7    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8    quantity: 1
9  }
10];
11
12Paddle.Checkout.open({
13  settings: {
14    displayMode: "overlay",
15    theme: "light",
16    locale: "en"
17  },
18  items: itemsList,
19});

See: Pass checkout settings

You're part of the early access program for one-page checkout, which means you can use it before it's generally available.

You can pass checkout settings using Paddle.Initialize(), or set them for each checkout in Paddle.Checkout.open().

This example includes the settings object as part of the checkout open method, passing the required settings to open a one-page inline checkout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  },
6  {
7    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8    quantity: 1
9  }
10];
11
12Paddle.Checkout.open({
13  settings: {
14    displayMode: "inline",
15    variant: "one-page"
16  },
17  items: itemsList,
18});

To learn more, see: One-page checkout early access program

You can prefill checkout properties to speed up checkout.

This example includes customer, address, and business objects. Checkout is opened with this information prefilled, so customers land on the payment screen.

There's no settings object, so checkout settings must be included in Paddle.Initialize().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  },
6  {
7    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8    quantity: 1
9  }
10];
11
12Paddle.Checkout.open({
13  items: itemsList,
14  customer: {
15    email: "jo@example.com",
16    address: {
17      countryCode: "US",
18      postalCode: "10021",
19      region: "New York",
20      city: "New York",

See: Prefill checkout properties

You can pass Paddle IDs for customers, addresses, and businesses to build upgrade workflows for logged-in customers.

This example includes a customer ID, address ID, and business ID. Checkout is opened with this information prefilled, so customers land on the payment screen.

allowLogout is false in the settings object, hiding the option to change the customer on the opened checkout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  },
6  {
7    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8    quantity: 1
9  }
10];
11
12Paddle.Checkout.open({
13  settings: {
14    displayMode: "overlay",
15    theme: "light",
16    locale: "en",
17    allowLogout: false
18  },
19  items: itemsList,
20  customer: {

See: Prefill checkout properties

You can create a transaction using the API or the Paddle dashboard, then pass it to a checkout to collect for it.

This example passes transactionID to open a checkout for that transaction.

There's no settings object, so checkout settings must be included in Paddle.Initialize().

1
2
3
1Paddle.Checkout.open({
2  transactionId: "txn_01gp3z8cfkqgdq07hcr3ja0q95"
3});

See: Pass a transaction to a checkout

Customers can save payment methods when buying items using Paddle Checkout. You can then present customers with their saved payment methods when making purchases in the future.

You must pass customerAuthToken when opening a checkout to authenticate a customer and present them with their saved payment methods. You can generate an authentication token for a customer using the API.

This example passes customerAuthToken to Paddle.Checkout.open(), so customers are presented with their saved payment methods.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  }
6];
7
8Paddle.Checkout.open({
9  customerAuthToken: "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
10  settings: {
11    displayMode: "inline",
12    frameTarget: "checkout-container",
13    frameInitialHeight: "450",
14    frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;",
15    items: itemsList
16  }
17});

See: Present saved payment methods at checkout

Customers can save payment methods when buying items using Paddle Checkout. You can then present customers with their saved payment methods when making purchases in the future.

You must pass customerAuthToken when opening a checkout to authenticate a customer and present them with their saved payment methods. You can generate an authentication token for a customer using the API.

You can open a checkout for a specific a payment method that a customer has saved by using savedPaymentMethodId, passing the Paddle ID for a saved payment method. You can list payment methods for a customer using the API.

This example passes customerAuthToken and savedPaymentMethodId to Paddle.Checkout.open(), so customers are presented with the passed saved payment method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  }
6];
7
8Paddle.Checkout.open({
9  customerAuthToken: "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
10  savedPaymentMethodId: "paymtd_01hs8zx6x377xfsfrt2bqsevbw",
11  settings: {
12    displayMode: "inline",
13    frameTarget: "checkout-container",
14    frameInitialHeight: "450",
15    frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;",
16    items: itemsList
17  }
18});

See: Present saved payment methods at checkout