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 inline 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