FROM CACHE - en_header
Promotion image
Solved

How to use App Bridge with plain Javascript?

Peter30
New Member
5 0 0
‎11-11-2019 09:40 AM

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
})
);

}

2,413 Views
0 Likes
Report
Accepted Solution (1)

Trish_Ta
Shopify Staff
58 13 27
‎11-11-2019 12:25 PM

This is an accepted solution.

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

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

2,388 Views
1 Like
Report
Replies 5 (5)

Trish_Ta
Shopify Staff
58 13 27
‎11-11-2019 12:25 PM

This is an accepted solution.

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

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

2,389 Views
1 Like
Report
In response to Trish_Ta

Peter30
New Member
5 0 0
‎11-11-2019 10:09 PM

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!

 

2,364 Views
0 Likes
Report
In response to Trish_Ta

Peter30
New Member
5 0 0
‎11-12-2019 07:04 AM

Hi Trish,

 

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

2,349 Views
0 Likes
Report
In response to Trish_Ta

Sanjay-Makwana
Shopify Partner
29 0 3
‎01-18-2022 06:28 AM

@Trish_Ta   can you please tell me how to use the  plain Javascript.  I create shopify app in php laravel. can not able to change or access the store fronts

1,597 Views
0 Likes
Report

manan_30
Shopify Partner
1 0 0
‎12-19-2023 05:08 AM

Hi Peter30,

 

Please check the below code snippet you don't need to add Redirect.JS externally you can take it from the window["app-bridge"].actions.

<html>
<head></head>
<body></body>
<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>
<script>
    $(document).ready(function () {

        AppBridge = window["app-bridge"];
        AppBridgeUtils = window["app-bridge-utils"];
        actions = window["app-bridge"].actions;

        let createApp = AppBridge.default;
        app = createApp({
            apiKey: clientIdJs,
            host: hostJs,
            forceRedirect: true
        });

        app.dispatch(actions.Redirect.toRemote({url: '${redirectUrl}'}));
    });
</script>
</html>
424 Views
0 Likes
Report
Terms of Service Privacy Policy