Checkout

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

Your Limio environment must be on at least v108 to use the pricing features described below.

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.

orderTotals - Retrieving pricing information

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

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

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

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:

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:

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:

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