> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Paddle.Checkout.open()

Use to open a checkout with settings, items, and customer information.

---

Use `Paddle.Checkout.open()` to open a checkout.

- Set the initial items list or transaction that this checkout is for
- Set checkout settings, like the theme
- Prefill checkout properties, like customer email and country
- Send [custom data](https://developer.paddle.com/build/transactions/custom-data.md) to Paddle

To add items to a checkout, you can pass either:

- An `items` array of objects, where each object contains a `priceId` and `quantity` property. `priceId` should be a Paddle ID of [a price entity](https://developer.paddle.com/api-reference/prices/overview.md).
- The Paddle ID of [a transaction entity](https://developer.paddle.com/api-reference/transactions/overview.md) that you prepared earlier.

{% callout type="info" %}
Recurring items on a checkout must have the same billing interval. For example, you can't have a checkout with some prices that are billed monthly and some products that are billed annually.
{% /callout %}

To speed up checkout, or build workflows for logged-in customers, you can [prefill customer, address, and business information](https://developer.paddle.com/build/checkout/prefill-checkout-properties.md). You can do this by passing customer, address, and business data, or by passing Paddle IDs for an existing customer, address, or business.

You can [open a checkout for an upsell](https://developer.paddle.com/build/checkout/upsell-checkout.md) by passing an `upsell` object, containing the Paddle ID of the previously completed transaction that this upsell follows.

You can use [the `Paddle.Initialize()` method](https://developer.paddle.com/paddle-js/methods/paddle-initialize.md) to [set default checkout settings](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md). These settings apply to all checkouts opened on a page.

## Parameters

```yaml
title: Paddle.Checkout.open() properties
type: object
properties:
  settings:
    type: object
    description: Set general checkout settings.
    properties:
      allowLogout:
        type:
          - boolean
          - "null"
        default: true
        description: Whether the user can change their email once on the checkout.
      allowDiscountRemoval:
        type:
          - boolean
          - "null"
        default: true
        description: Whether the user can remove an applied discount at checkout. Defaults to `true`.
      allowedPaymentMethods:
        type:
          - array
          - "null"
        description: Payment options presented to customers at checkout.
        items:
          type: string
          enum:
            - alipay
            - apple_pay
            - bancontact
            - blik
            - card
            - google_pay
            - ideal
            - kakao_pay
            - mb_way
            - naver_pay
            - payco
            - paypal
            - pix
            - samsung_pay
            - saved_payment_methods
            - south_korea_local_card
            - upi
          x-enum-descriptions:
            alipay:
              description: Alipay, popular in China.
            apple_pay:
              description: Apple Pay on a supported Apple device.
            bancontact:
              description: Bancontact, popular in Belgium.
            blik:
              description: BLIK, a popular payment method in Poland.
            card:
              description: Credit or debit card.
            google_pay:
              description: Google Pay on a supported Android device, Chromebook, or Google Chrome browser.
            ideal:
              description: iDEAL, popular in the Netherlands.
            kakao_pay:
              description: Kakao Pay, a popular payment method in Korea.
            mb_way:
              description: MB WAY, a popular payment method in Portugal.
            naver_pay:
              description: Naver Pay, a popular payment method in Korea.
            payco:
              description: Payco, a popular payment method in Korea.
            paypal:
              description: PayPal.
            pix:
              description: Pix, popular in Brazil. Available in early access.
            samsung_pay:
              description: Samsung Pay, a popular payment method in Korea.
            saved_payment_methods:
              description: >-
                A customer's existing saved payment methods. Requires `customerAuthToken` to be passed to
                `Paddle.Checkout.open()`.
            south_korea_local_card:
              description: Korean local credit or debit card.
            upi:
              description: Unified Payments Interface (UPI), popular in India. Available in early access.
      displayMode:
        type:
          - string
          - "null"
        default: overlay
        description: Display mode for the checkout.
        enum:
          - inline
          - overlay
        x-enum-descriptions:
          inline:
            description: >-
              Inline checkout mode. Checkout embedded as a frame in the page. Requires `settings.frameTarget` in
              `Paddle.Initialize()`.
          overlay:
            description: Overlay checkout mode. Checkout opens in an overlay.
      frameInitialHeight:
        type:
          - string
          - "null"
        examples:
          - "450"
        description: >-
          Height in pixels of the `<div>` on load. Do not include `px`. Recommended `450`.

          The inline checkout footer includes a message to let customers know that Paddle is the merchant of record for
          the transaction. For compliance, the inline checkout frame must be sized so that the footer message is
          visible.
      frameStyle:
        type:
          - string
          - "null"
        examples:
          - "min-width: 286px;background-color:transparent;"
        description: >-
          Styles to apply to the checkout `<div>`. `min-width` must be set to `286px` or above with checkout padding
          off; `312px` with checkout padding on. Use `frameInitialHeight` to set height.
      frameTarget:
        type:
          - string
          - "null"
        examples:
          - checkout-container
        description: Class name of the `<div>` element where the checkout should be rendered.
      locale:
        type:
          - string
          - "null"
        default: (browser default)
        description: Language for the checkout. If omitted, the browser's default locale is used.
        enum:
          - ar
          - zh-Hans
          - zh-TW
          - da
          - nl
          - en
          - fr
          - de
          - it
          - ja
          - ko
          - "no"
          - pl
          - pt
          - pt-BR
          - tr
          - ru
          - es
          - sv
        x-enum-descriptions:
          ar:
            description: Arabic (العربية)
          zh-Hans:
            description: Chinese (Simplified) (简化字)
          zh-TW:
            description: Chinese (Traditional) (正體字)
          da:
            description: Danish (Dansk)
          nl:
            description: Dutch (Nederlands)
          en:
            description: English
          fr:
            description: French (Français)
          de:
            description: German (Deutsch)
          it:
            description: Italian (Italiano)
          ja:
            description: Japanese (日本語)
          ko:
            description: Korean (한국어)
          "no":
            description: Norwegian (Norsk)
          pl:
            description: Polish (Polski)
          pt:
            description: Portuguese (Português)
          pt-BR:
            description: Portuguese (Brazilian) (Português do Brasil)
          tr:
            description: Turkish (Türkçe)
          ru:
            description: Russian (Русский)
          es:
            description: Spanish (Español)
          sv:
            description: Swedish (Svenska)
      showAddDiscounts:
        type:
          - boolean
          - "null"
        default: true
        description: >-
          Whether the option to add a discount is displayed at checkout. Requires the "display discount field on the
          checkout"

          option enabled in Paddle > Checkout > Checkout settings. Defaults to `true`.
      showAddTaxId:
        type:
          - boolean
          - "null"
        default: true
        description: Whether the option to add a tax number is displayed at checkout. Defaults to `true`.
      successUrl:
        type:
          - string
          - "null"
        description: URL to redirect to on checkout completion. Must start with `http://` or `https://`.
      theme:
        type:
          - string
          - "null"
        default: light
        description: Theme for the checkout. If omitted, defaults to light.
        enum:
          - light
          - dark
        x-enum-descriptions:
          light:
            description: Light-themed checkout.
          dark:
            description: Dark-themed checkout.
      variant:
        type:
          - string
          - "null"
        default: multi-page
        description: Checkout experience presented to customers. Defaults to `multi-page`.
        enum:
          - one-page
          - multi-page
        x-enum-descriptions:
          one-page:
            description: One-page checkout experience. Customer information and payment details collected on the same page.
          multi-page:
            description: Multi-page checkout experience. Customer information and payment details collected on separate pages.
  items:
    type: array
    description: >-
      List of items for this checkout. You must pass at least one item. Use the `updateItems()` or `updateCheckout()`
      method to update the items list.
    items:
      type: object
      properties:
        priceId:
          type: string
          examples:
            - pri_01gm81eqze2vmmvhpjg13bfeqg
          description: Paddle ID of the price for this item.
        quantity:
          type:
            - integer
            - "null"
          examples:
            - 1
          description: Quantity for this line item.
  transactionId:
    type:
      - string
      - "null"
    examples:
      - txn_01gp3z8cfkqgdq07hcr3ja0q95
    description: >-
      Paddle ID of an existing transaction to use for this checkout. Use this instead of an `items` array to create a
      checkout for a transaction you previously created.
  customerAuthToken:
    type: string
    examples:
      - pca_01hstrngzv6v4ard25jgvywwqq_01hsgrwf0ev6gxm74bp0gebxas_o7scuiadqtvbtspkmbwfnyrvyrq3zig6
    description: >-
      Authentication token for this customer, generated using the [generate an authentication token for a customer
      operation](https://developer.paddle.com/api-reference/customers/generate-customer-authentication-token.md) 

      in the Paddle API. Use to authenticate a customer so they can work with saved payment methods at checkout.
  customer:
    type: object
    description: Information about the customer for this checkout. Pass either an existing `id`, or the other fields.
    properties:
      id:
        type: string
        examples:
          - ctm_01gm82kny0ad1tk358gxmsq87m
        description: >-
          Paddle ID of the customer for this checkout. Use if you know the customer, like if they're authenticated and
          making a change to their subscription. You can't use if you're passing `email`.
      email:
        type:
          - string
          - "null"
        description: Email for this customer. You can't use if you're passing `id`.
      address:
        type: object
        description: Information about the customer address for this checkout. Pass either an existing `id`, or the other fields.
        properties:
          id:
            type:
              - string
              - "null"
            examples:
              - add_01gm82v81g69n9hdb0v9sw6j40
            description: >-
              Paddle ID for the customer address for this checkout. You can't use if you're passing any of the other
              address fields.
          countryCode:
            type: string
            examples:
              - US
            description: Two-letter ISO 3166 country code for this customer. You can't use if you're passing `id`.
          postalCode:
            type: string
            examples:
              - "10021"
            description: >-
              ZIP or postal code of this address. Paddle Checkout only asks for this in countries with postal codes. You
              can't use if you're passing `id`.
          region:
            type: string
            examples:
              - California
            description: >-
              State, county, or region of this address. Required if `business` is passed. You can't use if you're
              passing `id`.
          city:
            type: string
            examples:
              - Newport Beach
            description: City of this address. Required if `business` is passed. You can't use if you're passing `id`.
          firstLine:
            type: string
            examples:
              - Balboa Center
            description: First line of this address. Required if `business` is passed. You can't use if you're passing `id`.
      business:
        type: object
        description: Information about the customer business for this checkout. Pass either an existing `id`, or the other fields.
        properties:
          id:
            type: string
            examples:
              - biz_01gnymqsj1etmestb4yhemdavm
            description: >-
              Paddle ID for the customer business for this checkout. You can't use if you're passing `name` or
              `taxIdentifier`. Requires `address`.
          name:
            type: string
            examples:
              - Paddle.com Inc
            description: Name of the customer business. You can't use if you're passing `id`.
          taxIdentifier:
            type: string
            examples:
              - GB08172165
            description: Tax or VAT Number of the customer business. You can't use if you're passing `id`. Requires `address`.
  discountCode:
    type:
      - string
      - "null"
    examples:
      - BF20OFF
    description: >-
      Discount code to apply to this checkout. Use to prepopulate a discount. Pass either `discountCode` or
      `discountId`.
  discountId:
    type:
      - string
      - "null"
    examples:
      - dsc_01gtf15svsqzgp9325ss4ebmwt
    description: >-
      Paddle ID of a discount to apply to this checkout. Use to prepopulate a discount. Pass either `discountCode` or
      `discountId`.
  upsell:
    type:
      - object
      - "null"
    description: >-
      Opens a checkout as an upsell to display a streamlined checkout experience. Only works with inline, one-page
      checkouts.
    required:
      - transactionId
    properties:
      transactionId:
        type: string
        examples:
          - txn_01gp3z8cfkqgdq07hcr3ja0q95
        description: Unique Paddle ID for the previously completed transaction that this upsell follows, prefixed with `txn_`.
      settings:
        type:
          - object
          - "null"
        description: Configuration settings for the upsell checkout.
        properties:
          showSkipButton:
            type:
              - boolean
              - "null"
            description: Whether the "No thanks" skip button is shown at checkout. Defaults to `true`.
  customData:
    type:
      - object
      - "null"
    examples:
      - '{ "crm_user_id": "123" }'
    description: >-
      Your own structured key-value data to include with this checkout. Passed data is held against the related
      transaction. If a transaction is for recurring items, custom data is copied to the related subscription when
      created. Must be valid JSON and contain at least one key.
  savedPaymentMethodId:
    type:
      - string
      - "null"
    description: >-
      Paddle ID for a saved payment method for this customer. If passed, only this saved payment method is presented at 

      checkout. Use the [list payment methods for a customer
      operation](https://developer.paddle.com/api-reference/payment-methods/list-payment-methods.md)

      to get saved payment method IDs for a customer. Requires `customerAuthToken`.
```

## Example

{% accordion %}
{% accordion-item title="Checkout with settings" %}

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.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  settings: {
    displayMode: "overlay",
    theme: "light",
    locale: "en",
  },
  items: itemsList,
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  settings: {
    displayMode: "overlay",
    theme: "light",
    locale: "en",
  },
  items: itemsList,
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Pass checkout settings](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md)

{% /accordion-item %}

{% accordion-item title="Checkout with settings for one-page overlay checkout" %}

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 overlay checkout.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  settings: {
    displayMode: "overlay",
    variant: "one-page",
  },
  items: itemsList,
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  settings: {
    displayMode: "overlay",
    variant: "one-page",
  },
  items: itemsList,
});
```

{% /tab-item %}
{% /tabs %}

{% /accordion-item %}

{% accordion-item title="Checkout with customer, address, and business information prefilled" %}

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()`.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  items: itemsList,
  customer: {
    email: "jo@example.com",
    address: {
      countryCode: "US",
      postalCode: "10021",
      region: "New York",
      city: "New York",
      firstLine: "4050 Jefferson Plaza, 41st Floor",
    },
    business: {
      name: "ChatApp Inc.",
      taxIdentifier: "555952383",
    },
  },
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  items: itemsList,
  customer: {
    email: "jo@example.com",
    address: {
      countryCode: "US",
      postalCode: "10021",
      region: "New York",
      city: "New York",
      firstLine: "4050 Jefferson Plaza, 41st Floor",
    },
    business: {
      name: "ChatApp Inc.",
      taxIdentifier: "555952383",
    },
  },
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Prefill checkout properties](https://developer.paddle.com/build/checkout/prefill-checkout-properties.md)

{% /accordion-item %}

{% accordion-item title="Checkout with customer, address, and business as Paddle IDs" %}

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.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  settings: {
    displayMode: "overlay",
    theme: "light",
    locale: "en",
    allowLogout: false,
  },
  items: itemsList,
  customer: {
    id: "ctm_01gm82kny0ad1tk358gxmsq87m",
    address: {
      id: "add_01gm82v81g69n9hdb0v9sw6j40",
    },
    business: {
      id: "biz_01gnymqsj1etmestb4yhemdavm",
    },
  },
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
  {
    priceId: "pri_01gm82kny0ad1tk358gxmsq87m",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  settings: {
    displayMode: "overlay",
    theme: "light",
    locale: "en",
    allowLogout: false,
  },
  items: itemsList,
  customer: {
    id: "ctm_01gm82kny0ad1tk358gxmsq87m",
    address: {
      id: "add_01gm82v81g69n9hdb0v9sw6j40",
    },
    business: {
      id: "biz_01gnymqsj1etmestb4yhemdavm",
    },
  },
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Prefill checkout properties](https://developer.paddle.com/build/checkout/prefill-checkout-properties.md)

{% /accordion-item %}

{% accordion-item title="Checkout for an existing transaction" %}

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()`.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
Paddle.Checkout.open({
  transactionId: "txn_01gp3z8cfkqgdq07hcr3ja0q95",
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

paddle?.Checkout.open({
  transactionId: "txn_01gp3z8cfkqgdq07hcr3ja0q95",
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Pass a transaction to a checkout](https://developer.paddle.com/build/transactions/pass-transaction-checkout.md)

{% /accordion-item %}

{% accordion-item title="Checkout that presents saved payment methods" %}

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](https://developer.paddle.com/api-reference/customers/generate-customer-authentication-token.md).

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

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  items: itemsList,
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: "450",
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
  },
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  items: itemsList,
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: 450,
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
  },
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Present saved payment methods at checkout](https://developer.paddle.com/build/checkout/saved-payment-methods.md)

{% /accordion-item %}
{% accordion-item title="Checkout that presents a specific saved payment method" %}

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](https://developer.paddle.com/api-reference/customers/generate-customer-authentication-token.md).

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](https://developer.paddle.com/api-reference/payment-methods/list-payment-methods.md).

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

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
];

Paddle.Checkout.open({
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  savedPaymentMethodId: "paymtd_01hs8zx6x377xfsfrt2bqsevbw",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: "450",
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
    items: itemsList,
  },
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const itemsList = [
  {
    priceId: "pri_01gm81eqze2vmmvhpjg13bfeqg",
    quantity: 1,
  },
];

paddle?.Checkout.open({
  items: itemsList,
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  savedPaymentMethodId: "paymtd_01hs8zx6x377xfsfrt2bqsevbw",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: 450,
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
  },
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Present saved payment methods at checkout](https://developer.paddle.com/build/checkout/saved-payment-methods.md)

{% /accordion-item %}
{% accordion-item title="Checkout for an upsell" %}

{% callout type="default" %}
Access to Upsell checkout is limited to users who are part of our early access program. If you're interested in joining the program, review this guide and email us at [sellers@paddle.com](mailto:sellers@paddle.com) to apply. We'll reach out when space is available if you meet the program requirements.
{% /callout %}

You can present customers with a streamlined purchase flow for upsells at checkout to encourage them to upgrade or purchase additional items if they've previously completed a transaction.

This example passes the previously completed transaction ID as `upsell.transactionId`, and passes `upsell.settings.showSkipButton: false` to hide the "No thanks" skip button at checkout.

{% tabs sync="paddlejs-preference" %}
{% tab-item title="Using a script tag" %}

```js
var upsellItems = [
  {
    priceId: "pri_01h1vjfevh5etwq3rb176h9d9w",
    quantity: 1,
  },
];

// previousTransactionId was captured from the initial checkout.completed event
Paddle.Checkout.open({
  items: upsellItems,
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: "450",
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
  },
  upsell: {
    transactionId: previousTransactionId,
    settings: {
      showSkipButton: false,
    },
  },
});
```

{% /tab-item %}
{% tab-item title="Using a JavaScript package manager" %}

```ts
import { initializePaddle } from "@paddle/paddle-js";

const paddle = await initializePaddle({
  token: "live_7d279f61a3499fed520f7cd8c08",
});

const upsellItems = [
  {
    priceId: "pri_01h1vjfevh5etwq3rb176h9d9w",
    quantity: 1,
  },
];

// previousTransactionId was captured from the initial checkout.completed event
paddle?.Checkout.open({
  items: upsellItems,
  customerAuthToken:
    "pca_01hwz42rfyaxw721bgkppp66gx_01h282ye3v2d9cmcm8dzpawrd0_otkqbvati3ryh2f6o7zdr6owjsdhkgmm",
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: 450,
    frameStyle:
      "width: 100%; min-width: 312px; background-color: transparent; border: none;",
  },
  upsell: {
    transactionId: previousTransactionId,
    settings: {
      showSkipButton: false,
    },
  },
});
```

{% /tab-item %}
{% /tabs %}

To learn more, see [Open a checkout for an upsell](https://developer.paddle.com/build/checkout/upsell-checkout.md)

{% /accordion-item %}

{% /accordion %}