> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/essentials/currency-guide.md).

# Currency Guide

Format Web Components prices with localized currency symbols and precision.

This guide covers everything to add `Currency Symbols` and `Number Formatting` like `£49.99 or 49,99 €` across all FactFinder Web Components and related parts.

### Example Configurations

These configurations add the currency and all the number formatting to every price:

### German Number Format

```html
<ff-communication currency-code="EUR"
                  currency-country-code="de-DE">
</ff-communication>
```

### English Number Format

```html
<ff-communication currency-code="GBP"
                  currency-country-code="en-GB">
</ff-communication>
```

### Format Discount Prices

```html
<ff-communication currency-code="EUR"
                  currency-country-code="de-DE"
                  currency-fields="discountPriceFieldName">
</ff-communication>
```

### Change Digits

```html
<ff-communication currency-code="EUR"
                  currency-country-code="de-DE"
                  currency-max-digits="5"
                  currency-min-digits="1">
</ff-communication>
```

### Under the hood

FactFinder Web Components are using the [`Number.toLocaleString()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) function to format all price strings. If you want to format prices not covered by our attributes you can always use this function like:

```javascript
const currencyCode = factfinder.communication.globalCommunicationParameter.currencyCode;
const currencyCountryCode = factfinder.communication.globalCommunicationParameter.currencyCountryCode;

parseFloat(priceStr).toLocaleString(currencyCountryCode, {
                        style: 'currency',
                        currency: currencyCode,
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 2
                    });
```

### Browser Support

Please take a look at [browser compatibility table](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString). If you encounter some platforms where prices aren't formatted at all or in a wrong way please use a [polyfill](https://github.com/willsp/polyfill-Number.toLocaleString-with-Locales) to enable currency formatting.

We made good experience with this one [(Link)](https://github.com/willsp/polyfill-Number.toLocaleString-with-Locales) in terms of size an reliability.

### Attributes

### `currency-code` (String)

This attribute takes the `ISO 4217` ([Complete List](https://en.wikipedia.org/wiki/ISO_4217)) code for currencies.

**Example Usage**

`<ff-communication currency-code="EUR">`

### `currency-country-code` (String)

This attribute takes the `BCP 47` ([Complete List](https://tools.ietf.org/html/bcp47)) locale code for currencies.

**Example Usage**

`<ff-communication currency-country-code="de-DE">` other common codes are: `en-GB`, `en-US`, `de-CH`

Most of the time `de-DE` and `en-GB` are covering everything needed.

### `currency-fields` (String)

If you are importing multiple price fields like discount prices or something similar, it is not sufficient to specify only the `currency-country-code` and the `currency-code`. In order to format additional price fields you have to tell FactFinder Web Components which fields should be processed. You can do that by setting the `currency-fields` attribute accordingly.

**Example Usage**

`<ff-communication currency-fields="discountPrice">`

### `currency-min-digits` (String) (default: 2)

Specify the minimum number of digits.

**Example Usage**

`<ff-communication currency-min-digits="1">`

### `currency-max-digits` (String) (default: 2)

Specify the maximum number of digits for all prices.

**Example Usage**

`<ff-communication currency-max-digits="4">`


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/essentials/currency-guide.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.