In addition to stock and cryptocurrencies, Yuzu also has current and historical foreign exchange rates, in our flexible GraphQL API. In this recipe, we've mocked up a simple product listing with a currency selector, to convert prices into local currencies.
Want to skip to the code? Check out the repo for this project on GitHub.
You know what is better than a screenshot? The live example site!
For this example, we picked Next.js, a React framework, to get started quickly. When the page loads, we grab live exchange rates for each of the supported currencies in the dropdown list. When a shopper changes the currency, the page converts the native prices in US Dollars to the target currency and re-renders.
Lets walk through each part:
1 2 3 4 5 6 |
|
Here, we're passing a list of symbol pairs, like USD-EUR
and USD-GBP
, and for each one, retrieving the current exchange rate and the symbol of the quote currency (repeating EUR and GBP back so we can easily tell which rate is which.
The response will look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Lastly, every time the currency is changed, we re-render with the converted prices.
1 2 3 4 5 6 7 8 9 |
|