# Checkout

This page describes the pricing methods and state available within the Limio SDK for displaying order totals, subtotals, and tax information.

{% hint style="info" %}
Your Limio environment must be on at least v108 to use the pricing features described below.
{% endhint %}

Limio provides real-time calculations for order totals, including subtotals, discounts, taxes, and final totals. It provides a preview of tax calculations for countries requiring address based tax determination and includes formatted currency values for display.

Cost calculations in Limio are managed through two primary hooks:

* **`useCheckout`** - Provides access to checkout state including `orderTotals`
* **`usePreview`** - Manages tax preview states and loading indicators

Those are also used in Limio's [https://docs.limio.com/components/component-library/cart-components](https://docs.limio.com/components/component-library/cart-components "mention").

#### `orderTotals` - Retrieving pricing information <a href="#ordertotals-retrieving-pricing-information" id="ordertotals-retrieving-pricing-information"></a>

The `orderTotals` object contains all pricing-related data for the current checkout session. It's accessed via the `useCheckout` hook:

<a class="button secondary">Copy</a>

```
import React from "react"
import { useCheckout } from "@limio/internal-checkout-sdk"
import { formatCurrencyForCurrentLocale } from "@limio/sdk"

const PricingSummary = () => {
  const { useCheckoutSelector } = useCheckout({ redirectOnFailure: true })
  const orderTotals = useCheckoutSelector((state) => state.display.orderTotal)

  const { orderSubtotal, orderTotal, currency, taxSummary } = orderTotals

  return (
    <div>
      <p>Subtotal: {formatCurrencyForCurrentLocale(orderSubtotal, currency)}</p>
      <p>Total: {formatCurrencyForCurrentLocale(orderTotal, currency)}</p>
    </div>
  )
}
```

**Available Properties**

The `orderTotals` object includes:

* `orderSubtotal` - Order subtotal before discounts and tax
* `orderTotal` - Final order total including all discounts and taxes
* `currency` - Currency code (e.g., "USD", "GBP")
* `taxSummary` - Array of tax breakdowns by tax code, each containing:
  * `taxCode` - Tax identifier
  * `taxAmount` - Calculated tax amount
  * `taxRate` - Tax rate as decimal (e.g., 0.20 for 20%)

#### `usePreview` - Managing tax calculation states <a href="#usepreview-managing-tax-calculation-states" id="usepreview-managing-tax-calculation-states"></a>

The `usePreview` hook provides state for handling tax preview behavior, particularly important for regions where tax must be calculated based on user location:

<a class="button secondary">Copy</a>

```
const TaxInfo = () => {
  const { isTaxPreviewCountry, taxCalculated } = usePreview()
  const orderTotals = useCheckoutSelector((state) => state.display.orderTotal)

  if (isTaxPreviewCountry && !taxCalculated) {
    return (
      <div>
        <p>Total: {formatCurrencyForCurrentLocale(orderTotals.orderTotal, orderTotals.currency)}</p>
        <p>Tax excluded (calculated at checkout)</p>
      </div>
    )
  }

  return (
    <div>
      <p>Total: {formatCurrencyForCurrentLocale(orderTotals.orderTotal, orderTotals.currency)}</p>
      <p>Tax included</p>
    </div>
  )
}
```

**Available Properties**

* `loadingPreview` - `true` when preview API call is in progress (e.g., applying promo codes, recalculating tax)
* `isTaxPreviewCountry` - `true` when the customer's country requires tax to be calculated at checkout (e.g., US states with varying tax rates)
* `taxCalculated` - `true` when tax has been successfully calculated for the current order

**When to use these booleans**

`loadingPreview`

Use this to show loading states while pricing is being recalculated:

<a class="button secondary">Copy</a>

```
const PricingDisplay = () => {
  const { loadingPreview } = usePreview()

  if (loadingPreview) {
    return <Skeleton className="tw-w-24 tw-h-6" />
  }

  // Render actual pricing
}
```

`isTaxPreviewCountry`

Use this to determine whether to show tax separately or included in the total:

<a class="button secondary">Copy</a>

```
const TaxInfo = () => {
  const { isTaxPreviewCountry, taxCalculated } = usePreview()
  const orderTotals = useCheckoutSelector((state) => state.display.orderTotal)

  if (isTaxPreviewCountry && !taxCalculated) {
    return (
      <div>
        <p>Total: {formatCurrencyForCurrentLocale(orderTotals.orderTotal, orderTotals.currency)}</p>
        <p className="text-muted">Tax excluded (calculated at checkout)</p>
      </div>
    )
  }

  return (
    <div>
      <p>Total: {formatCurrencyForCurrentLocale(orderTotals.orderTotal, orderTotals.currency)}</p>
      <p className="text-muted">Tax included</p>
    </div>
  )
}
```

`taxCalculated`

Use this in combination with `isTaxPreviewCountry` to show actual tax amounts once calculated:

<a class="button secondary">Copy</a>

```
const TaxBreakdown = () => {
  const { isTaxPreviewCountry, taxCalculated } = usePreview()
  const { taxSummary, currency } = useCheckoutSelector((state) => state.display.orderTotal)

  if (isTaxPreviewCountry && !taxCalculated) {
    return <p>Tax: To be calculated</p>
  }

  return taxSummary?.map((tax) => (
    <div key={tax.taxCode}>
      <p>Tax ({(tax.taxRate * 100).toFixed(2)}%): {formatCurrencyForCurrentLocale(tax.taxAmount, currency)}</p>
    </div>
  ))
}
```

[<br>](https://docs.limio.com/developers/limio-sdk/advanced-methods/express-checkout)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/developers/limio-sdk/checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.