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

# Pass a transaction to a checkout

Pass an existing transaction to Paddle.js to open a checkout to collect for it. You can do this for automatically and manually-collected transactions.

---

[Transactions](https://developer.paddle.com/api-reference/transactions/overview.md) hold all the information about a customer purchase, including customer details, items, calculated tax and localized pricing, and payments.

Paddle creates transactions automatically when checkouts are opened, but you can also [create your own transactions](https://developer.paddle.com/build/transactions/create-transaction.md) and pass them to a checkout.

## How it works

All purchases are transactions. You can work with transactions using Paddle.js in two ways:

{% feature-comparison level=3 %}

{% feature-column title="Pass items" %}

{% feature-item %}
When you open a checkout, [Paddle.js](https://developer.paddle.com/paddlejs/overview.md) automatically creates a transaction for you.
{% /feature-item %}
{% feature-item %}

1. Pass items to Paddle.js using [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md) or [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md).
2. Paddle.js automatically creates a transaction for the items passed.
3. Customers pay using [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout.md).
{% /feature-item %}
{% feature-item %}
This is a typical self-service workflow, where customers sign up and pay using your website.
{% /feature-item %}
{% feature-item %}
Learn more: [Pass or update checkout items](https://developer.paddle.com/build/checkout/pass-update-checkout-items.md)
{% /feature-item %}

{% /feature-column %}

{% feature-column title="Pass transactions" %}

{% feature-item %}
You can also [create a transaction manually using the API](https://developer.paddle.com/build/transactions/create-transaction.md), then pass this to Paddle.js.
{% /feature-item %}
{% feature-item %}

1. You create a transaction using the API or the Paddle dashboard.
2. Pass transaction to Paddle.js using [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md) or [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md).
3. Customers pay using [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout.md).
{% /feature-item %}
{% feature-item %}
This is more typical when working with sales-assisted customers who want to pay an invoice by card.
{% /feature-item %}
{% feature-item %}
Learn more: [Create a transaction](https://developer.paddle.com/build/transactions/create-transaction.md)
{% /feature-item %}

{% /feature-column %}

{% /feature-comparison %}

You can pass automatically-collected transactions and manually-collected transactions where `billing_details.enable_checkout` is `true` to a checkout.

## Before you begin

- To pass a transaction to a checkout, you'll need to first [create a transaction using the API](https://developer.paddle.com/build/transactions/create-transaction.md).
- You'll also need to [build an inline](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md) or [overlay checkout](https://developer.paddle.com/build/checkout/build-overlay-checkout.md) to pass a transaction to.
- If you haven't already, you'll need to [add a default payment link](https://developer.paddle.com/build/transactions/default-payment-link.md) to your checkout under **Paddle > Checkout > Checkout settings > Default payment link**, and get it approved.

## Use checkout payment link

The simplest way to pass a transaction to a checkout is to use [a checkout payment link](https://developer.paddle.com/build/transactions/default-payment-link.md).

Automatically-collected transactions, and manually-collected transactions where `billing_details.enable_checkout` is `true`, include a `checkout.url`. This is made up of your default payment link, with a `_ptxn` query parameter and the transaction ID appended.

Provided your default checkout link page [includes Paddle.js](https://developer.paddle.com/paddlejs/include-paddlejs.md), it automatically opens a checkout for the transaction passed in the URL. The opened checkout [inherits settings from `checkout.settings` in `Paddle.Initialize()`](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md).

You can:

- Set `allowLogout` to `false` to [prevent customers from changing their details](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings#allow-logout.md)
- Mark a transaction as `billed` to [stop customers from editing items on it](https://developer.paddle.com/build/checkout/pass-update-checkout-items#prevent-changes-to-items-on-a-checkout.md)

{% callout type="note" %}
Pass an approved domain as `checkout.url` when creating or updating a transaction to override the domain that Paddle uses to generate your checkout payment link.
{% /callout %}

## Pass a transaction to Paddle.js

When building pages with [Paddle.js](https://developer.paddle.com/paddlejs/overview.md), you can pass a transaction ID to a checkout using [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md) or when you call [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md).

You should do this instead of passing an array of `items`.

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

Pass `transactionId` to [the `Paddle.Checkout.open()` method](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) to open a checkout for the passed transaction.

```javascript title="Checkout open method" highlightLines="6"
Paddle.Checkout.open({
  settings: {
    theme: "light",
    locale: "en"
  },
  transactionId: "txn_01h0j589qt1nee24210teqtz57"
});
```

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

Add `data-transaction-id` as an attribute to your checkout launcher to open a checkout for the passed transaction.

```html title="Checkout launcher element" highlightLines="6"
<a href="#" 
  class="paddle_button"
  data-display-mode="overlay"
  data-theme="light"
  data-locale="en"
  data-transaction-id="txn_01h0j589qt1nee24210teqtz57"
>
 Buy now
</a>
```

{% /tab-item %}

{% /tabs %}