Localize prices

Accordero automatically detects your visitor's location and converts prices to their local currency using real-time exchange rates. No configuration needed - just add the data attributes and it works.

How it works

1. Location Detection: Accordero detects the visitor's country from their IP address
2. Currency Resolution: Maps the country to its local currency (e.g., US → USD, France → EUR)
3. Exchange Rate: Fetches current exchange rates and converts the price
4. Display: Updates the price element with the converted amount and local currency symbol

All of this happens automatically in milliseconds when the page loads.

Basic example

Mark up your pricing with three data attributes:

<Card data-pf-base-price="99" data-pf-base-currency="usd" className="max-w-sm">
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold" data-pf-price-formatted>
      $99
    </p>
  </CardContent>
</Card>

Live example:

Data attributes reference

Important notes

The price element must contain only the price

This works:

<p data-pf-price-formatted>$99</p>

This does NOT work:

<p data-pf-price-formatted>Only $99 per month</p>

Put any additional text outside the price element:

<p>
  <span data-pf-price-formatted>$99</span>
  <span>per month</span>
</p>

Multiple pricing tiers

You can localize multiple pricing cards on the same page. Each card gets its own conversion:

<div className="grid grid-cols-3 gap-4">
  <Card data-pf-base-price="29" data-pf-base-currency="usd">
    <CardHeader>
      <CardTitle>Basic</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-2xl font-bold" data-pf-price-formatted>
        $29
      </p>
    </CardContent>
  </Card>

  <Card data-pf-base-price="99" data-pf-base-currency="usd">
    <CardHeader>
      <CardTitle>Pro</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-2xl font-bold" data-pf-price-formatted>
        $99
      </p>
    </CardContent>
  </Card>

  <Card data-pf-base-price="299" data-pf-base-currency="usd">
    <CardHeader>
      <CardTitle>Enterprise</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-2xl font-bold" data-pf-price-formatted>
        $299
      </p>
    </CardContent>
  </Card>
</div>

Live example:

Supported currencies

Accordero supports 135+ currencies worldwide. The exchange rates are updated daily from reliable financial sources.

Next steps