Js-buy-sdk: checkout.webUrl is not using custom primary domain

[markcarey]

Bug details

Describe the bug
Even when using our custom domain in the ShopifyBuy.buildClient call, the webUrl property of the checkout object always uses the <ourstore>.myshopify.com domain instead of out custom domain.

To Reproduce

1. Initialize client using custom domain:

const client = ShopifyBuy.buildClient({
    domain: 'example.com',
    storefrontAccessToken: '0bxxxxxxxxxxxxxxxxxxxxxx',
});

1. Then get new checkout:

client.checkout.create().then((checkout) => {
  console.log(checkout.webUrl);;
});

1. Note that checkout.webUrl uses examplestore.myshopify.com instead of example.com

Expected behavior
The webUrl should use the same domain as used with the buildClient call.

Environment (please complete the following information):

• tested on Chrome, Safari on macOS
• API version: 2020-01
• specifically from https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js

Additional context
Add any other context about the problem here.

Bug Report Checklist

• [X] I have read and agree to the CODE_OF_CONDUCT.md
• [X] I have read the CONTRIBUTING.md guidelines.
• [X] I have provided a detailed description of the bug, including code samples, and/or network data.
• [X] I have provided information about my development environment, including SDK version.

[markcarey]

I am tempted to just do:

var checkoutUrl = checkout.webUrl.replace("examplestore.myshopify.com", "example.com");

A manual URL hack to the same effect _seems_ to work. Any potential pitfalls? Cookies tied to .myshopify.com? Other?

[joshreeves]

We're also experiencing this issue, and can't figure out whether it's a new bug or a long-standing issue that we just never noticed before now. We're also using the replace() hack as a workaround and it seems to do the trick, but makes me a bit nervous to not follow the exact link being returned by the server.

[christerwpersson]

This works fine on our end it seems. Difference being that we are using [email protected] (the index.unoptimized.umd build), api/2020-04, and the store is on a subdomain (ie. webUrl gets set to store.x.com/:id1/checkouts/:id2

[markcarey]

Thanks for sharing @christerwpersson.

This raises a (perhaps) related questions. We are using the "buy button" sales channel and so we are using https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js which we found in the following doc: https://help.shopify.com/en/manual/sell-online/buy-button/add-embed-code#add-script-tags-separately -- what's not 100% clear is how this differs from URLs like http://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js -- the functions seem to be the same (at least the ones that I am using).

[vixdug]

@markcarey

Replacing the domain when you build the client should do the trick:

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'customdomain.com',
      apiKey: '',
      appId: '15'
    });

Here is an example with the Buy Button that is working correctly with a custom domain: https://repl.it/repls/AcclaimedMotionlessDowngrade

@joshreeves Are you also utilizing the Buy Button or one of the SDKs?

[markcarey]

Thanks for the reply @vixdug but as stated in the issue description this does not work ... at least not in manner we are using it. Note that unlike your example, we are not using window.ShopifyBuy.UI but rather calling client.checkout.create() as shown above. BUT ... When I add this code to your example, it does indeed use the custom domain for webUrl. And when I paste _our_ custom domain and token, it also uses the custom domain for webUrl. But in our implementation, using the same script SDK URL and effectively the same code, it still returns the myshopify subdomain for webUrl. The XHR request is clearly being send via the custom domain, but Shopify is returning the myshopify.com domain. I can't figure out why.

[markcarey]

I think I figured this out. As @christerwpersson mentioned, this seems to work with api/2020-04 but our experience was that it wasn't working with api/2020-01. Even earlier today it wasn't working, even with 2020-04. BUT I now realize that this is because it was fetching an already existing checkout, one that was created with api/2020-01. Even with the new API version, the old checkout retained the myshopify webUrl. When I wiped the old checkout ID from my cookies, this forced the creation of a _new_ checkout, and finally I received the customdomain for webUrl!

Happy that this is working, but I am gonna keeping the .replace() code in there for the thousands of "old" checkout ids stored in our users' browsers.

[vixdug]

Great, glad to hear that it is working! I'll look into what may have caused a problem in 2020-01 and close this issue for now.

[drinkmorewaters]

We just use replace for this.