Make available exchange rate in checkout ui extensions API

[catalin-invisible]

Please list the related package(s)

checkout-ui-extensions

If this related to specific APIs or components, please list them here

https://shopify.dev/api/checkout-extensions/checkout/extension-points -> Shopify specific globals

Is your feature request related to a problem? Please describe.

When developing a checkout ui extension app, we do not have acces via the existing API to current currency exchange rate.
For example, in regular Shopify stores, we have this info available by accessing window.Shopify.currency.rate, which describes the exchange rate between the store's primary market currency and the current store currency.

Currently, checkout UI extensions API provides currency information under localization.currency.current.isoCode, but no details about the exchange rate.

Describe the changes you are looking for

To have the exchange rate provided via API similarly with localization.currency.current.isoCode

[dnagoda]

Duplicate request: #1084

[gil--]

I've love to see a reimplementation of what Shopify Functions provides:

presentmentCurrencyRate (decimal): The conversion rate between the shop's currency and the currency of the cart.

https://shopify.dev/docs/api/functions/reference/delivery-customization/graphql/input

This would enable quick multi-currency conversions within extensions without looking up or caching currency rates.

[Adham-Mamedov]

Is there still no implementation for exchange rates?

[Briggzly]

so still nothing? I feel this is a huge oversight.

[catalin-invisible]

I just came across another scenario where multiple currency exchange rates are needed in a Shopify headless integration using Storefront API.

An update on this would be great, thank you!

[benjitastic]

Also watching this. We have a store credit threshold in place (spend $100 USD) and if the cart currency is in EUR I have no way of checking in the checkout extension if the cart total/cost is above or below $100 USD.

[FranciscoBejaranoBluEdgeUsa]

We need this feature right now for one of our clients using Markets Pro!

How are we supposed to localize our UI extensions for clients selling outside the US?

[Tw33t3r]

This is blocking our company from properly adopting checkout extensions.
We've made a workaround to add a Money typed metafield in one currency and rely on Shopify's automatic conversion at checkout time. This means we have to build a new metafield and handle it for each currency pair we want to support. It would be great to have a proper solution for this.

[Kaniwong]

Same need. We want to convert price infos based on our store's currency to the customer's currency. For example: 30% OFF OVER £150.00, we need to change this to the customer's currency to make it clearer

[FranciscoBejaranoBluEdgeUsa]

Hi Everyone, at Bluedge USA we solved this issue by using “money” metaobjects instead of metafields.

We create a metaobject definition with a single value type of "money", we create a single entry in this metaobject with a static handle and a value of "1".

Then inside our checkout UI extensions, we query the storefront API using the context directory with the current country iso_code set in the checkout to get the exact currency exchange rate.

Something like this:

	query @inContext(country: ${isoCode}) {
		metaobject(handle: { type: "currency", handle: "currency-rate" }) {
			id
			field(key: "rate_helper") {
				value
			}
		}
	}

For now, this is the best we would come up with, but a native, Shopify made solution is still 100% needed to avoid querying the storefront directly.

Please release this as soon as possible!

[chienit3bk]

Also watching this.

[benjitastic]

For anybody still trying to solve this here's how I did the workaround FranciscoBejaranoBluEdgeUsa mentioned above. Make a currency conversion meta object on the store with a conversion field with type of Money:

Then create an entry for $100,000:

Then you can use that content entry in your extension like this:

  const { i18n, localization, query, lines } = useApi()
  const [currencyConversion, setCurrencyConversion] = useState()
  
  useEffect(() => {
    const country = localization?.country?.current?.isoCode || 'US'
    query(
      `query @inContext(country: ${country}) {
        metaobject(handle: {
          type: "currency",
          handle: "currency-conversion"
        }) {
          id
          handle
          field(key: "conversion") {
            value
          }
        }
      
      }
      `
    )
    .then(({ data, errors }) => {
      setCurrencyConversion(JSON.parse(data?.metaobject?.field?.value))
    })
    .catch(console.error);
  }, [query]);

To go from non-USD to USD:

const subtotalUSD = amount / (currencyConversion?.amount / 100000)

To go from USD to non-USD checkout currency:

i18n.formatCurrency(amount * currencyConversion?.amount / 100000, {
    currency: currencyConversion.currency_code,
})

I found that setting the conversion object to 100000 worked better than 1 when you start dealing with some very broad denomination differences between some currencies and 1 would not have enough precision.

[FutureCriteria-BT]

@benjitastic thank you for the detailed step-to-step solution.
To go from any currency to the store's default currency, in your case "To go from non-USD to USD", the right formula is:

const subtotalUSD = amount * 10000 / currencyConversion?.amount

and to get the general presentmentCurrencyRate as requested in the previous comments:

const presentmentCurrencyRate = currencyConversion?.amount / 10000;