How to use App Bridge with plain Javascript?

Solved
New Member
5 0 0

Hi,

I have been trying to use App Bridge with plain Javascript in order to display an Approve Charge screen in Shopify.
Somehow it looks like the URL is not being called.

However, when I copy and paste the "mytest" input field into a new tab in the browser, it works and the Approve Charge screen is displayed.
Can someone please tell me what I am doing wrong?


My source looks like this...


function Show(shop, url) {

// This is a test input where the url is displayed
// Contains something like this..
// https://stargate365.myshopify.com/admin/....
document.getElementById("mytest").value = url;

 

var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;

var app = createApp({
  apiKey: '50f4b...',
  shopOrigin: 'stargate365.myshopify.com'
});

app.dispatch(
  Redirect.toRemote({
  url: url
})
);

}

0 Likes

Success.

Shopify Staff
Shopify Staff
16 3 7

Hi Peter30,

 

Can you clarify what is expected to happen? The code looks like you're trying to perform a redirect to a url set by an input field inside your app?

 

It might also be helpful to use the debug version of App Bridge to see if there's any errors dispatching the action: https://help.shopify.com/en/api/embedded-apps/app-bridge/debugging#using-the-cdn-hosted-or-umd-versi...

 

Trish

0 Likes
Highlighted
New Member
5 0 0

Hi Trish,

 

Thank you very much for your response.

 

The expected result is for the Approve Charge Screen to open embedded within Shopify so that the user can approve the charge.

 

The url that I am trying to navigate to is the confirmation_url that I got back from Shopify which is explained by Shopify at

https://help.shopify.com/en/api/reference/billing/recurringapplicationcharge#create-2019-10

"confirmation_url": "https://apple.myshopify.com/admin/charges/confirm_recurring_application_charge?id=654381177&signature=BAhpBHkQASc%3D--374c02da2ea0371b23f40781b8a6d5f4a520e77b"

 

In my case the url is something like this - (xxxxxx below is the Shopify charge_id)

https://stargate365.myshopify.com/admin/charges/xxxxxx/confirm_recurring_application_charge?signatur.......

 

The result that I get is that the embedded part of the screen clears and shows blank while the Shopify menu can still be seen.

 

Debug version

Currently I am loading Shopify App Bridge from unpkg

<script src="https://unpkg.com/@shopify/app-bridge@1"></script>

which does not have a file name after app-bridge@1

 

Should it be?

<script src="https://unpkg.com/@shopify/app-bridge@1/index.development.js"></script>

However, when I try to use that, it appears there is no such a file.

 

Thanks!

 

0 Likes
New Member
5 0 0

Hi Trish,

 

Many thanks. I managed to get it working after adding debugging like you suggested!

0 Likes