Display real-time currency conversion in Bubble by connecting to a free exchange rate API through the API Connector, letting users select their preferred currency from a dropdown, and dynamically converting prices. This tutorial covers API setup, caching rates in a database to minimize calls, and displaying multi-currency prices.
Overview: Currency Conversion in Bubble
Currency conversion lets your app display prices in multiple currencies — essential for international e-commerce and financial tools. This tutorial connects Bubble to a free exchange rate API, builds a currency selector, and converts amounts dynamically without excessive API calls.
Prerequisites
- A Bubble account with an app
- A free API key from exchangerate-api.com or similar
- Basic understanding of the API Connector plugin
Step-by-step guide
Set up the exchange rate API
Set up the exchange rate API
Go to Plugins → API Connector → Add new API called 'ExchangeRate.' Add a GET call: https://v6.exchangerate-api.com/v6/YOUR_KEY/latest/USD. Set Use as Data. Mark the key as Private. Initialize the call to map the response.
1GET https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD23Response:4{5 "result": "success",6 "conversion_rates": {7 "EUR": 0.92,8 "GBP": 0.79,9 "JPY": 149.5010 }11}Expected result: The API returns exchange rates for all currencies.
Create a Currency Option Set
Create a Currency Option Set
Go to Data → Option sets → Create 'Currency' with options: USD, EUR, GBP, JPY, CAD, AUD. Add a 'symbol' attribute for each ($, €, £, ¥, C$, A$).
Expected result: Currency Option Set available for dropdowns throughout the app.
Build the currency selector
Build the currency selector
Add a Dropdown on your header with data source: All Currencies. When selected, save to a custom state or User record. Default to USD.
Expected result: Users can pick their preferred display currency.
Convert and display prices dynamically
Convert and display prices dynamically
On Page is loaded, fetch the exchange rate for the user's selected currency and store in a custom state 'exchange_rate.' Display prices as: original_price × exchange_rate, formatted with the currency symbol.
Pro tip: Cache rates in a database record to avoid API calls on every page load.
Expected result: Prices display in the selected currency with correct conversion.
Cache exchange rates daily
Cache exchange rates daily
Create 'ExchangeRateCache' data type with base_currency, target_currency, rate, last_updated. Schedule a daily backend workflow to fetch rates and update the cache. Frontend reads from cache instead of the live API.
Expected result: Rates are cached and served without live API calls.
Complete working example
1CURRENCY CONVERSION — SETUP SUMMARY2=====================================34API CONNECTOR:5 Name: ExchangeRate6 Call: Get Rates (GET, Data type)7 URL: https://v6.exchangerate-api.com/v6/KEY/latest/USD89OPTION SET: Currency10 USD ($), EUR (€), GBP (£), JPY (¥), CAD (C$), AUD (A$)1112DATA TYPE: ExchangeRateCache13 base_currency, target_currency, rate, last_updated1415WORKFLOWS:16 Daily update (scheduled backend): fetch API → update cache17 Page load: read cache → set exchange_rate state18 Display: price × exchange_rate, prefix with symbol1920USER PREFERENCE:21 Save preferred currency on User record22 Default: USDCommon mistakes when building currency conversion in Bubble
Why it's a problem: Calling the API on every page load
How to avoid: Cache rates in a database and update daily via scheduled backend workflow
Why it's a problem: Hardcoding currency symbols
How to avoid: Use a Currency Option Set with a symbol attribute
Why it's a problem: Not handling API errors
How to avoid: Fall back to cached rates when the API call fails
Best practices
- Cache exchange rates and update once daily
- Use Option Sets for currencies for zero-WU dropdowns
- Store user's preferred currency on their User record
- Display both original and converted prices for transparency
- Format with correct decimal places per currency (0 for JPY, 2 for most others)
- Show a 'rates last updated' timestamp
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add multi-currency support to my Bubble.io app with a currency selector and automatic price conversion. Can you outline the API setup and caching strategy?
Add currency conversion. Connect to an exchange rate API, create a currency selector, convert prices to the user's currency, and cache rates daily.
Frequently asked questions
Which exchange rate API should I use?
ExchangeRate-API has a free tier. Open Exchange Rates ($12/mo) and Fixer.io are popular paid options.
Can I convert prices inside Repeating Groups?
Yes. Reference the page-level exchange_rate custom state to multiply each item's price.
How accurate are free API rates?
Free APIs update once daily. For real-time forex, use a premium API with minute-by-minute updates.
How do I handle payment currency?
Display converted prices for reference but charge in your base currency via Stripe.
Can users set a custom exchange rate?
Yes. Add a manual rate input that overrides the API rate for businesses with markup.
Can RapidDev build multi-currency pricing?
Yes. RapidDev builds e-commerce with multi-currency display and international payment integration.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation