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

# Pass or update checkout items

Pass price IDs to Paddle.js to tell Paddle what a checkout is for. Use HTML data attributes or JavaScript properties.

---

As well as [passing settings](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md), you must pass an array of prices to a checkout before opening. This tells Paddle what the customer should be billed for.

## How it works

When opening a checkout, pass a list of [prices](https://developer.paddle.com/api-reference/prices/overview.md) to it to tell Paddle what the checkout is for. You can pass properties to [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) or use [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md).

{% 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 %}

[Overlay checkout](https://developer.paddle.com/build/checkout/build-overlay-checkout.md) includes options for customers to change item quantities and remove items.

If you're using [inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md), you can use the [`Paddle.Checkout.updateCheckout()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-updatecheckout.md) method to build your own logic to let customers add, remove, and update items.

{% callout type="warning" %}
Checkouts must have at least one item. You can't open a checkout without any items.
{% /callout %}

## Before you begin

- [Include Paddle.js on your page](https://developer.paddle.com/paddlejs/include-paddlejs.md) and pass a [client-side token](https://developer.paddle.com/paddlejs/client-side-tokens.md).
- To open a checkout, you'll need to [create products and prices](https://developer.paddle.com/build/products/create-products-prices.md) and [pass them to a checkout](https://developer.paddle.com/build/checkout/pass-update-checkout-items.md).

{% callout type="note" %}
To get a step-by-step overview of how to build a complete checkout, including passing checkout settings and prefilling properties, see [Build an overlay checkout](https://developer.paddle.com/build/checkout/build-overlay-checkout.md) or [build an inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md)
{% /callout %}

## Pass items to a checkout

Pass a list of `items` when opening a checkout to tell Paddle what this checkout is for. `items` should contain an object for each item, with the `price_id` for [a price entity](https://developer.paddle.com/api-reference/prices/overview.md) and a `quantity`.

Pass `items` to the [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) method or use the `data-items` [HTML data attribute](https://developer.paddle.com/paddlejs/html-data-attributes.md) on your checkout launcher element to do this.

{% tabs sync="js-html-implementation" %}
{% tab-item title="JavaScript properties" %}

This example passes three prices using `Paddle.Checkout.open()`. The opened checkout is for these items.

```javascript
Paddle.Checkout.open({
  items: [
    {
      priceId: 'pri_01gsz8x8sawmvhz1pv30nge1ke',
      quantity: 10
    },
    {
      priceId: 'pri_01gsz95g2zrkagg294kpstx54r',
      quantity: 1
    },
    {
      priceId: 'pri_01gsz98e27ak2tyhexptwc58yk',
      quantity: 1
    }
  ]
});
```

To learn more, see [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md)

{% /tab-item %}
{% tab-item title="HTML data attributes" %}

This example passes three prices using `data-items`. The opened checkout is for these items.

{% callout type="warning" %}
Use single quotation marks around the value of `data-items`, and double quotation marks around the property names and string values inside it.
{% /callout %}

```html {% highlightLines="7-20" %}
<a 
  href='#'
  class='paddle_button'
  data-display-mode='overlay'
  data-theme='light'
  data-locale='en'
  data-items='[
    {
      "priceId": "pri_01gsz8x8sawmvhz1pv30nge1ke",
      "quantity": 10
    },
    {
      "priceId": "pri_01gsz95g2zrkagg294kpstx54r",
      "quantity": 1
    },
    {
      "priceId": "pri_01gsz98e27ak2tyhexptwc58yk",
      "quantity": 1
    }
  ]'
>
  Buy Now
</a>
```

To learn more, see [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md)

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

## Update items on a checkout

### Overlay checkout

[Overlay checkout](https://developer.paddle.com/concepts/sell/overlay-checkout.md) includes an items list along with the payment form. Customers can change quantities and remove items, except where there's only one item left on a checkout. They can't add new items.

### Inline checkout

The [inline checkout](https://developer.paddle.com/concepts/sell/branded-integrated-inline-checkout.md) frame captures customer and payment information. You can build your own logic to show the items list and interact with it. To update items:

1. Pass an `eventCallback` to [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md) that listens for the [`checkout.loaded`](https://developer.paddle.com/paddlejs/general/checkout-loaded.md) event to display the on-page items list initially. Items are returned in `data.items` against the event.
2. Build logic to add or remove items and change quantities using the [`Paddle.checkout.updateCheckout()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-updatecheckout.md) method. You may like to update discount at this point, too.
3. Listen for [`checkout.updated`](https://developer.paddle.com/paddlejs/general/checkout-updated.md) in your `eventCallback` to update the on-page items list.

{% callout type="note" %}
For a complete example of an inline checkout that includes logic to dynamically update checkout items, see [Build an inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md)
{% /callout %}

## Prevent changes to items on a checkout

### Overlay checkout

With [overlay checkout](https://developer.paddle.com/concepts/sell/overlay-checkout.md), there's no built-in option to stop customers from removing or changing quantities of items on a checkout. However, you can:

- **Set quantity limits against a price.**  
   You can set minimum and maximum quantities [when creating a price](https://developer.paddle.com/build/products/create-products-prices.md) to prevent customers from adding more or less of a price than they should. For example, a "Premium Support" addon might have a maximum quantity of `1`. Customers aren't able to change the quantity of this item on the checkout.
- **Pass a billed transaction to Paddle.js.**  
   [Create a billed transaction](https://developer.paddle.com/build/transactions/create-transaction.md) using the Paddle API, then [pass it to Paddle.js](https://developer.paddle.com/build/transactions/pass-transaction-checkout.md). Billed transactions can't be changed, so customers aren't able to change the quantity of this item on the checkout.
- **Mark a transaction as `billed` once `ready`.**  
   Paddle creates a related [transaction](https://developer.paddle.com/api-reference/transactions/overview.md) for checkouts to handle calculations. You can use an `eventCallback` to listen for checkout events, then send a request to the Paddle API to mark a transaction as billed once it has the status of `ready`. The quantity stepper is presented, but the checkout shows an error if customers try to change the quantity.

### Inline checkout

When using [inline checkout](https://developer.paddle.com/concepts/sell/branded-integrated-inline-checkout.md), the checkout frame doesn't include a breakdown of items or totals. It handles capturing customer and payment information, letting you show information about what a customer is buying on your page.

When designing your inline checkout, we recommend building logic in your frontend if you need to prevent customers from removing or changing quantities