A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices. Inspired by the Wes Bos blog post.
Return to the source code on GitHub.
Please note that this is not a currency converter (you will get the same currency out that you put in). It transforms the number value with a parity purchasing ratio to normalize that cost to a new price for a specified country. Outputs use the Intl.NumberFormat API to properly format localized currency values.
This (optionally) works with CloudCannon’s Geolocation feature to automatically detect the visitor’s country.
Implicit Currency
Currency is parsed from three letter code in text content. Read more about currency-display options.
| From | Input | To | Output | Note |
|---|---|---|---|---|
| US 🇺🇸 | USD $10 | GB 🇬🇧 | ||
| FR 🇫🇷 | EUR 10 € | DE 🇩🇪 | ||
| FR 🇫🇷 | EUR 20 € | DE 🇩🇪 | ||
| FR 🇫🇷 | EUR 100 € | DE 🇩🇪 | ||
| US 🇺🇸 | USD $100 | UY 🇺🇾 | ||
| US 🇺🇸 | USD $10 | GB 🇬🇧 | Extra text is stripped. | |
| GB 🇬🇧 | GBP £10 | US 🇺🇸 | ||
| US 🇺🇸 | $10 USD | GB 🇬🇧 | Input value has currency as a suffix | |
| US 🇺🇸 | $4.00 USD | GB 🇬🇧 | With currency-display="code" |
Explicit Currency
Currency code is specified in currency attribute. Read more about currency-display options.
| From | Input | To | Output | Note |
|---|---|---|---|---|
| GB 🇬🇧 | £10 | US 🇺🇸 | With currency="GBP" |
|
| GB 🇬🇧 | £10 | US 🇺🇸 | With currency="GBP" currency-display="code" |
|
| CA 🇨🇦 | $4.00 | NZ 🇳🇿 | With currency="CAD" |
|
| CA 🇨🇦 | $4.00 | NZ 🇳🇿 | With currency="CAD" currency-display="code" |
Using Geolocation
(Optional) The country code is provided for the visitor automatically using CloudCannon’s Geolocation feature.
| From | Input | To | Output | Note |
|---|---|---|---|---|
| GB 🇬🇧 | GBP £6.77 | Implicit | ||
| CA 🇨🇦 | 4.00 | Implicit, with currency="CAD" |
||
| FR 🇫🇷 | EUR 4 € | Implicit | ||
| DE 🇩🇪 | EUR 4 € | Implicit | ||
| US 🇺🇸 | USD $4.00 | Implicit | ||
| US 🇺🇸 | USD $4.00 | With explicit to="auto" |