App Bridge React, how to redirect an embedded React app to subscription confirmation URL?

Partner Discussions
1

Hey everyone, I have a simple usecase, I create a reoccurring subscription and need to redirect the client to the confirmation url. The app is embedded inside shopify admin and it runs on react. If I try to redirect directly window.location.href = response.data.confirmation_url; I get an error saying Refused to display 'confirmation_url' in a frame because it set 'X-Frame-Options' to 'deny'. So I have to redirect the parent itself with window.top.location.href = response.data.confirmation_url; which itself results in the following error

Failed to set a named property 'href' on 'Location': The current window does not have permission to navigate the target frame to 'https://.....myshopify.com/admin/charges/..../..../RecurringApplicationCharge/confirm_recurring_application_charge?signature=BAh7....83e2'.

So it seems I would have to use

var redirect = Redirect.create(app);

redirect.dispatch(Redirect.Action.REMOTE,redirectUrl);

But I am using app-bridge-react which is configured via CDN and I don’t have access to this redirect API.

There is no documentation on this, and I couldn’t find any information online, what is the recommended way to approach this?

2

Hi @Nikola_Milovic

Which version of AppBridge are you using?

In v3 and below, I used the redirect module to perform external redirects:


        // redirect the merchant to the subscription page
        redirect.dispatch(Redirect.Action.REMOTE, {
          url: confirmationUrl,
          newContext: false,
        });

But in AppBridge v4, you can use the window directly I believe:


// redirect the merchant to the subscription page
window.open(confirmationUrl, '_top')
1 Like
3

Interesting, this does work. Thank you Dylan.

Since I got you, here, what approach are you using for the redirect URL? Since we’re now opening a link outside of the iframe, you need to redirect back to your app, so you have to construct the url like admin.shopify.com/store-name/your-app/desired-location? Seems a bit wonky, or is this the way to go?

4

Since I got you, here, what approach are you using for the redirect URL? Since we’re now opening a link outside of the iframe , you need to redirect back to your app, so you have to construct the url like admin.shopify.com/store-name/your-app/desired-location ? Seems a bit wonky, or is this the way to go?

Yea it is a bit different. I’m not aware of any other way, which is why there’s a redirect URL parameter accepted when you first create the subscription confirmation URL.

Before the admin URL was {merchant}.myshopify.com/admin/your-app which was a little less work, but this slicing and dicing of the {merchant} part is just a consequence of unifying under the shopify.com domain.

I wish a redirect wasn’t necessary, but Shopify needs to present the permissions/subscription details in a controlled view.