Get started

Get up and running with Accordero in minutes. Follow these steps to add automatic pricing localization to your website.

Step 1: Install the Accordero script

First, navigate to your dashboard and click "Add website". Enter your domain name and submit. You'll receive a unique script tag to add to your website.

Copy the script below and paste it into the <head> of your website. Make sure to replace the public key placeholder with your actual public key from the dashboard.

<script
  src="https://www.accordero.com/accordero/v1.0.0/loader.js"
  data-public-key="pk_*******"
  async
></script>

The public key is safe to expose in your frontend code. It only identifies your account and cannot be used to access sensitive data.

Step 2: Set up your first pricing

Now that the script is installed, you can mark up your pricing elements so Accordero knows what to localize. Wrap your pricing section in a container with data-pf-base-price and data-pf-base-currency attributes.

Add the data-pf-price-formatted attribute to the element that displays your price. This element should contain only the price with its currency symbol and nothing else, or the formatting won't work correctly.

<Card data-pf-base-price="99" data-pf-base-currency="usd" className="max-w-sm">
  <CardHeader>
    <CardTitle>Basic Plan</CardTitle>
    <CardDescription>Perfect for starters</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold" data-pf-price-formatted>
      $99
    </p>
    <p className="text-sm text-muted-foreground">per month</p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Buy</Button>
  </CardFooter>
</Card>

Live example:

Pro Plan

Perfect for growing businesses

$99

per month

Data attributes reference

Attribute	Required	Description
data-pf-base-price	Yes	The base price amount (numbers only)
data-pf-base-currency	Yes	The ISO currency code of your base price (e.g., "usd", "eur", "gbp")
data-pf-price-formatted	Yes	Applied to the element displaying the formatted price. Must contain only the price with currency symbol.

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>

Next steps

Now that you can localize prices, learn how to:

Show discounts

Display original and sale prices with strikethrough styling

Checkout

Add buy buttons that work with Stripe