Pricing

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.

The Limio pricing system 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.

Pricing in Limio is managed through two primary hooks:

• useCheckout - Provides access to checkout state including orderTotals

• usePreview - Manages tax preview states and loading indicators

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