Pass or update checkout items

As well as passing settings, 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 to it to tell Paddle what the checkout is for. You can pass properties to Paddle.Checkout.open() or use HTML data attributes.

Overlay checkout includes options for customers to change item quantities and remove items.

If you're using inline checkout, you can use the Paddle.Checkout.updateCheckout() method to build your own logic to let customers add, remove, and update items.

Before you begin

• Include Paddle.js on your page and pass a client-side token.
• To open a checkout, you'll need to create products and prices and pass them to a checkout.

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 and a quantity.

Pass items to the Paddle.Checkout.open() method or use the data-items HTML data attribute on your checkout launcher element to do this.

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

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

Update items on a checkout

Overlay checkout

Overlay checkout 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 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() that listens for the checkout.loaded 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() method. You may like to update discount at this point, too.
3. Listen for checkout.updated in your eventCallback to update the on-page items list.

Prevent changes to items on a checkout

Overlay checkout

With overlay checkout, 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 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 using the Paddle API, then pass it to Paddle.js. 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 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, 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