Problems with recurring application charges (X-Frame-Options)

Highlighted
Shopify Partner
3 0 1

Hi everyone, this is my first rails application/shopify app, so please bear with me.

In the past couple of weeks I've implemented everything but the billing system for my app, so today was the day. Everything seems to be working if the user accepts the charges. The declining also works. But after this the app is still installed, so I somehow need to check if he is paying for it or not. I already have the logic in my BillingController (creating the charge and redirecting to the charge.confirmation_url). In the confirm-action I am activating the charge. The problem is after the first clean install, after the first declining/accepting, the iframes displaying the popups are not showing up if the user goes back into his shop and clicks on the app icon. I've read that Shopify returns a DENY-header so I can't embed anything in an iframe but how can I show up the prompt if the user declined the first time and selects the app a second time?

Sure, the user can delete the app each time he declines the charges but I'm sure there is another way. How can I assure that each time the user clicks on the app-icon the charge-prompt will show up or any other redirection?

Thanks in advance

1 Like
Highlighted
Shopify Expert
3 0 2

I'm running into the same issue.  Christian, were you able to get this figured out?

In our embedded app, upon installation the user is prompted with the standard o-auth and permissions interface.  After accepting we prompt the user to authorize the app billing.  If you accept the charges everything works great.  If you deny the charges everything works great too and you land on a page that lets the user know they have declined the charges with a button to reinitiate the charge authorization.  When clicking on the approve charge button, nothing will render as Shopify is sending an x-frame-options DENY header which prevents us from redirecting the user to the charge authorization url we received from Shopify.  <-- We create a new recurring application charge using the API, exact same block of code that works the first time.

Any help would be much appreciated.  Thanks!

0 Likes
Highlighted
Shopify Partner
3 0 1

I pushed my "workaround" in my repository, feel free to use the code. There must be a better way but mine is working for now. I'm redirecting the user to the app-store if I see that he hasn't paid yet. There he can click on "Get" and the whole authorization process/billing process is run once again. By far not the prettiest solution but I couldn't thin of another one so far.

https://github.com/ginetrix/shopify-example

0 Likes
Highlighted
Shopify Expert
3 0 2

Hi Christian,

Thanks for the feedback.  I was able to solve the issue, which turned out to be pretty simple.  Since we're using the embedded app SDK we're running into the x-frame-options header set by the Shopify response.  In order to break out of this cycle, we just need a little snippet of javascript to point the window (not the iframe) to the autorization url.

In our code we have a message telling the user they declined the charges.  In order to use the paid app they must accept the charges.  We then have a button for them to click to confirm the charges.  The button has an id="confirm-charges".  We then have the following snippet of javascript:

document.getElementById('confirm-charges').onclick = function() {
        window.top.location.href = this.getAttribute('href');
 }

The window then redirects to the billing authorization page as expected.  For clarification, the confirm charge button's href is set to go to our billing controller which kicks off the Shopify API billing authorization process (same as the first go).

You can read more about the EASDK and OAuth here, which mention the technique used above: https://docs.shopify.com/embedded-app-sdk/getting-started

Hope this helps clean up your code and the user experience for your app(s).  Thanks again for feedback Christian.  Happy coding!

2 Likes
Highlighted
Shopify Expert
3 0 2

Hi Christian,

Thanks for the feedback and the example code.  I was able to get everything working, which ended up being a pretty simple fix.  The app redirect to a Shopify admin url is blocked via the x-frame-options header, which is set to deny to prevent embedding their admin in another site.  The way to break out of the cycle (iframe to Shopify admin) is to force a redirect at the window level, instead of the app level (iframe), which is pretty simple with a little javascript.

After denying the billing authorization we land customers on a declined charges page which lets them know they must accept the charges to use the paid app.  We then have a button with id="confirm-charges" that allows them to accept/confirm the charges, and then we wire up a little javascript snippet (below) to redirect the window to our billing controller which kicks off the whole billing auth/confirmation process via the Shopify billing API again.

The embedded app sdk has a little info on this same technique here: https://docs.shopify.com/embedded-app-sdk/getting-started

I hope this helps clean up your code, and refines your user experience.  Happy coding!

<script>
	document.getElementById('confirm-charges').onclick = function(){
		window.top.location.href = this.getAttribute('href');
	}
</script>

 

 

0 Likes
Highlighted
Tourist
8 2 3

Thank you so much for this!

I had tried everything and nothing worked. Setting 'X-Frame-Options' to 'ALLOWALL' sitewide, per request etc.
But no matter what I did, I kept having that issue.

I am on Chrome 77 on Linux and I am developing a Rails embedded app.

0 Likes
Highlighted
New Member
3 0 0

Hey y'all -

 

Just thought I'd drop my solution where you don't need to use any javascript. If you are using something like this with `redirect_to`. This will not work because of the x-frame options.

redirect_to @recurring_charge.confirmation_url

 

Shopify within their Rails helper, have a method called `fullpage_redirect_to` that you can use and will fix this problem. So change it to:

fullpage_redirect_to @recurring_charge.confirmation_url

 

Hopefully this helped. I ran into this problem when submitting a new app for approval.

0 Likes