Embedded apps. How to get the shopOrigin?

[Appifiny]

How do I access the myshopify top level hostname to set the shopOrigin value required to initialise the Embedded App JS library.

ShopifyApp.init({
    apiKey: '***',
    shopOrigin: 'https://?????????.myshopify.com',
    debug: true
});

If try to access it via JS using window.top.location.hostname it is not accessible becuase it is a different domain.

I cant rely on $_SERVER['HTTP_REFERER'] in php.

[Appifiny]

Ahhhh, I was thinking about it the wrong way.

I already have the shop domain from the oAuth authentication.

[greg-gkr]

The client still needs shopOrigin though, so how do you get it to initialize the App Bridge?

[Henry_Tao · Accepted solution]

Hi @greg-gkr 

This section mentions about how to get and store shopOrigin https://help.shopify.com/en/api/embedded-apps/shop-origin. Essentially, you can access to `shop` in url query params. However, information in query params can be lost pretty easily during redirect. So, it is highly recommended that you store and retrieve shopOrigin by yourself. You can also use `shop` in url query params as a way to double check if merchant changes to different stores (by comparing query params and your cookies during auth).

I hope it helps.

[policenauts1]

hi @Henry_Tao, I understand how to get shopOrigin initially when the merchant is installing the app / after OAuth, but if my app is a POS embedded app, how do I later retrieve the shopOrigin / associate that session with that merchant in order to initialize App Bridge? From the link, it reads: 

After you’ve got the shop parameter, you need to store it for the duration of the user session. It’s best to use the session mechanism of your preferred framework. Otherwise, you can store the parameter in an HTTP-only cookie.

What is the recommended way for POS embedded apps that will be public with multiple merchants? For example, I found this: https://github.com/osiset/laravel-shopify/issues/348

Where it appears they do something like: 

     var url = new URL(window.location);
     var shop = url.searchParams.get("shop");

Is there an equivalent for App Bridge?