Hi all,
Using exchangerate-api.com you can automatically (and dynamically) apply an exchange rate to your main pricing in order, for example, to display a pricing in Euros and in Dollars.
With the free version of exchangerate-api, this will be updated once per day + You don’t need to sign up.
Demo here: Currency Exchange Switch
Let’s dive in.
1) With a pricing block with the switch feature (Yearly/Monthly Feature)
First of all you need to change the labels “Yearly” and “Monthly”. I wish this could be native but that’s it.
Here is the script to be inserted in the header custom code of the page where your pricing block is (I use the example “€ Pricing” and “$ Pricing”):
pricing1 to be changed by your pricing block Id
<script>
window.addEventListener('block-loaded-pricing1', () => {
$("span:contains('Yearly')").text('€ Pricing');
$("span:contains('Monthly')").text('$ Pricing');
});
</script>
Next you will add this code, below the one above:
<script>
async function convertToDollars() {
try {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/EUR');
const data = await response.json();
const rate = data.rates.USD;
const priceElement = document.querySelector('#pricing1 > section > div > div.MuiGrid-root.MuiGrid-container.css-1y2nn3v > div > div.MuiBox-root.css-8atqhb > div > div > span.sw-font-size-4xl.sw-text-color-default.sw-font-family-default.sw-font-weight-medium.sw-padding-top-4xs.sw-padding-bottom-s.MuiBox-root.css-1baulvz');
if (priceElement && priceElement.textContent.trim() === "100") { // 100 to be changed by your pricing base
const euroValue = parseFloat(priceElement.textContent.trim());
const dollarValue = Math.round(euroValue * rate);
priceElement.textContent = `$${dollarValue}`;
} else {
console.error('Price element not found or value is not 100');
}
} catch (error) {
console.error('Error fetching exchange rate:', error);
}
}
document.addEventListener('DOMContentLoaded', () => {
const switchElement = document.querySelector('#pricing1 .switch_1');
if (switchElement) {
switchElement.addEventListener('click', convertToDollars);
} else {
console.error('Switch element not found');
}
});
</script>
How did I do it?
I’m using a “Pricing in card view with details” block with just one pricing.
First you need to have a pricing base and a currency base. My pricing & currency bases are €100.
I want this pricing in euros to be displayed in dollars.
In the Pricing in card view with details" block I wrote €100 for the pricing in euros and this is fixed. In what should the pricing in dollars I just wrote “100”. Why? Because the script only works with a number value and because 100 is my pricing base.
See below more visual explanation in the Softr studio:
And this is the result:
2) With a Single pricing card with details
Here the best is to create one page per currency.
Still the same logic: you need to have a pricing base (here again 100).
In the page where your pricing in $ is, just type 100 to replace the default value.
See more visual example below:
And this is the result:
Here the script to be added in the page where the $ pricing is:
<script>
async function convertToDollars() {
try {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/EUR');
const data = await response.json();
const rate = data.rates.USD;
const priceElement = document.querySelector('#pricing1 > section > div > div > div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-md-6.MuiGrid-grid-lg-5.pricing-wrapper.css-13325gu > div > div.MuiBox-root.css-8atqhb > div > div > span.sw-font-size-4xl.sw-text-color-default.sw-font-family-default.sw-font-weight-medium.sw-padding-bottom-5xs.MuiBox-root.css-1baulvz');
const euroValue = parseFloat(priceElement.textContent.replace(' EUR', ''));
const dollarValue = Math.round(euroValue * rate);
priceElement.textContent = `$${dollarValue}`;
} catch (error) {
console.error('Error fetching exchange rate:', error);
}
}
window.onload = convertToDollars;
</script>
All of this can be changed to be applied to multiple pricing, multiple currencies, adding decimals to the pricing…
If you need to adapt it, let me know and ask questions.