Shopify / buy-button-js

BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website.

Home Page:http://shopify.github.io/buy-button-js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Markets and currencies

lucalbert opened this issue · comments

Hello,

We now use markets (and Shopify Payments) to allow our customers to pay in their local currency.

We had already integrated the possibility of retrieving the translated content of the store by setting up the client:

const client = ShopifyBuy.buildClient({
  domain: shopify.domain,
  storefrontAccessToken: shopify.token,
  language: shopify.language
})

How is it possible to set the currency (or market country)?

When the customer adds a product to the cart and proceeds to payment, the local currency is displayed correctly only when he has entered his delivery address (step 2).
Is it possible to also force the opening of the cart in a certain currency (other than the base currency of the store)?

(we also had to adapt the script to force the language of the shopping cart because the configuration of the language at the client level was not sufficient:

cart: {
  events: {
    beforeInit(cart) {
      const actualOpen = cart.checkout.open
      cart.checkout.open = function (url) {
        const newUrl = new URL(url)
        newUrl.searchParams.set('locale', shopify.language)

        let finalUrl = newUrl.toString()
        actualOpen.call(this, finalUrl)
      }
    }
  }
}

)

Thanks!

Having the same issue. Would love to know the solution.

Hey all,
I found a workaround to set the market and currencies to the checkout!

The trick is to manually create a checkout with the Shopify SDK who is built-in with the buy button.
With that, you have the control of which market you want by setting the buyerIdentity with the countryCode.
You need to manually set the local storage, so the buy button can find the existing checkout id to update it normally after.

var client = ShopifyBuy.buildClient({
    domain: '',
    storefrontAccessToken: '',
    language: getLanguage()
  });
  
var input = {
    buyerIdentity: {
      countryCode: getCountry(),
    },
};

var localStorageCheckoutKey = `${client.config.storefrontAccessToken}.${client.config.domain}.checkoutId`;

client.checkout.create(input).then((checkout) => {
    localStorage.setItem(localStorageCheckoutKey, checkout.id)
    ShopifyBuy.UI.onReady(client).then(function (ui) {

    [...]

    });
});

Thanks Simon for posting your solution!

jsyk -- I got reply from Shopify.

q: How is it possible to set the currency (or market country) in the buy button code?
a: Currently, the buy button is using your store's default currency which is CZK. The local currencies and international pricing is only available to Shopify Market and your online store. Our Developers are still working on expanding the market features to other sales channels such as the buy button. Rest assured that if in the event the feature will be available you will receive a communication from us.
When you [create a Buy Button](https://help.shopify.com/en/manual/online-sales-channels/buy-button/create-buy-button) you will see the default settings and does not have the option to set up local currencies for other regions/market yet.

q: Do you have any estimates of when we can expect the buy button to support market currencies? It's last thing we need to be able to expand on more markets :-)
a: Currently, we do not have a time frame since our Developers have to make sure that once implemented it will cause any issues across all stores. What we can assure you is that as soon as this is implemented, you will be notified or you will automatically see the changes in the market section. Rest assured that we hear and do something about your feedback and recommendations since we know that these features will benefit the platform and the business owners.


Good luck everyone trying to fix this :-)

In case someone else stumbles upon this issue looking for a solution, I've been able to set the country using a similar method as @simoncrypta and calculating the country from the browser timezone.

const client = await ShopifyBuy.buildClient({
  domain: '',
  storefrontAccessToken: '',
})

const input = {
  buyerIdentity: {
    countryCode: getUserCountryCode() // See blogpost link below
  },
}

const localStorageCheckoutKey = `${client.config.storefrontAccessToken}.${client.config.domain}.checkoutId`

// Prevent creating a checkout if there is already one available
if (!localStorage.getItem(localStorageCheckoutKey)) {
  const checkout = await client.checkout.create(input)
  localStorage.setItem(localStorageCheckoutKey, checkout.id)
}

const ui = await ShopifyBuy.UI.init(client)

Regargind the country calculation, check this blog post: https://www.techighness.com/post/get-user-country-and-region-on-browser-with-javascript-only/

Shopify country codes can be seen here: https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency/international-pricing#country-codes