Shopify Buy Button via JS — Cart shows wrong currency

Question

I've integrated Shopify via the Buy Button JS Library. Everythings works correctly, but the cart shows the wrong currency (it shows $ instead of €). I've set up everything correctly via the Shopify Admin Dashboard (at https://domain.myshopify.com/admin). The main currency of the store is set to EUR, and, as mentioned in the docs, I can set the currency via the cart.text.currency parameter. I did this, but it changes nothing. Is this a bug?

My JS code so far:

<script src="//sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script>
<script>
var client = ShopifyBuy.buildClient({
  domain: 'domain.myshopify.com',
  storefrontAccessToken: '2b3xxxxxxxxjh5', // previously apiKey, now deprecated
});

ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: 23xxxxxx56,
  node: document.getElementById('my-product'),
  options: {
    "product": {
      "iframe": true
    },
    toggle: {
      "iframe": true
    },
    cart: {
      "iframe": true,
      "popup": false,
      "text": {
        "title": 'Warenkorb',
        "empty": 'Dein Warenkorb ist leer.',
        "button": 'Jetzt bestellen',
        "total": 'Gesamt',
        "currency": 'EUR',
     }
  }
});
</script>

But as visible in the attached image, the cart still shows $ instead of €.

---

EDIT

I think it's a bug on the side of Shopify, but I figured out how to overcome it.

I've added the moneyFormat option to my createComponent function, which overrides all declared currency indications.

shopifyUI.createComponent('product', {
  id: 23xxxxxx56,
  node: document.getElementById('shopify-button-buy-regular'),
  moneyFormat: '€{{amount_no_decimals}}',
  options: shopifyOptions
});

Answer 1

Check to ensure that the theme code displaying the cart respects currency settings. Your theme may be showing the dollar symbol simply due to the theme code not respecting currency. The Liquid filter money_with_currency is usually used for this purpose.

Answer 2

You need to add the money format to the component like so:

ui.createComponent('product', {
  id: 23xxxxxx56,
  node: document.getElementById('my-product'),
  moneyFormat: '%E2%82%AC%7B%7Bamount%7D%7D',
...

The above code will give you the Euro (€) sign.