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

# Preview transactions using Paddle.js

Build advanced, cart-style pricing pages or other pages that present overall totals using a new method in Paddle.js. No need to make server-side calls to the Paddle API.

---

## What's new?

We added a new [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md) method to Paddle.js that you can use to get a transaction preview for items and location information.

It's ideal for building cart-style pricing pages and other pages in your app that present overall totals for items and location information.

## How it works

You can use the [transaction preview operation](https://developer.paddle.com/api-reference/transactions/preview-transaction.md) in the Paddle API to return a transaction preview for a list of prices given location information. It's typically used for previewing overall totals for a list of items without creating a transaction entity.

The new [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md) method lets you use Paddle.js to get a transaction preview. It accepts a parameter for a request that shares the same request body as the preview a transaction operation in the API, except field names must be `camelCase`. It returns a promise that contains an object that matches the response from the preview a transaction operation, with `camelCase` field names.

This means you can get transaction previews using Paddle.js only. You don't need to make any server-side requests to the Paddle API. It's especially useful for creating more advanced, dynamic pricing pages where users can build their own plans by picking items and adjusting quantities.

### What about Paddle.PricePreview()?

The [`Paddle.PricePreview()`](https://developer.paddle.com/paddlejs/methods/paddle-pricepreview.md) method is specifically designed for building simple pricing pages, using the preview prices operation. [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md) can be used to build pricing pages, but is typically better for more advanced, cart-style pricing pages where users can build their own plans.

{% accordion %}
{% accordion-item title="Types of pricing page" %}

#### Simple pricing page

Pass a batch of price IDs and location information to Paddle.js. Paddle returns localized pricing for each item.

* **Recommended for most pricing pages.** Simply returns localized prices.
* Uses [`Paddle.PricePreview()`](https://developer.paddle.com/paddlejs/methods/paddle-pricepreview.md).
* Requests and responses mirror the [preview prices operation](https://developer.paddle.com/api-reference/pricing-preview/preview-prices.md).
* Returns item totals formatted for the currency and region, including currency code.
* Response only includes calculations for each item included in the request.
* You can send prices with different billing periods and trial periods.

#### Cart-style pricing page

Send a batch of price IDs and location information to Paddle.js. Paddle returns a preview of a transaction.

* Recommended for more advanced pricing pages where users can build their own plans.
* Uses [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md).
* Requests and responses mirror the [preview a transaction operation](https://developer.paddle.com/api-reference/transactions/preview-transaction.md).
* Returns item totals in the lowest denomination for a currency (for example, cents for `USD`).
* Response includes calculations for line items and grand totals.
* Requests mirror creating a transaction, so billing and trial periods must match for all items.

See: [Build a pricing page](https://developer.paddle.com/build/checkout/build-pricing-page.md)

{% /accordion-item %}
{% /accordion %}

## Examples

This example includes a request with two items where the country code is the United States and the currency code is `USD`. One of the items is excluded from the totals using the `includeInTotals` field. It also passes a discount.

The request is passed to [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md), which returns a promise. It prints the response to the console.

<!-- This example passes items, a country code, a discount, and a currency code to transaction preview -->
```javascript
var request = {
  items: [
    {
      quantity: 20,
      priceId: "pri_01gsz8z1q1n00f12qt82y31smh"
    },
    {
      quantity: 1,
      priceId: "pri_01gsz98e27ak2tyhexptwc58yk",
      includeInTotals: false
    }
  ],
  discountId: "dsc_01gtgztp8fpchantd5g1wrksa3",
  address: {
    countryCode: "US"
  },
  currencyCode: "USD"
}

Paddle.TransactionPreview(request)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
```

## Next steps

This change is live in Paddle.js now, so you can start using [`Paddle.TransactionPreview()`](https://developer.paddle.com/paddlejs/methods/paddle-transactionpreview.md) when you're ready.

You don't need to do anything to get the latest version of Paddle.js — we serve the latest version automatically.