Shopify appPurchaseOneTimeCreate confirmationUrl redirection error

[Manoj_M]

Hi,

      I built a Shopify app with Remix.js using the `app Purchase One Time Create` billing method. After the user clicks the purchase button, it creates a confirmation URL. For that, I followed (https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/appPurchaseOneTimeCreate).

In the server action, the `app Purchase One Time Create` mutation is executed, and it redirects to the `confirmation URL`.

During the redirection process, I'm getting the following error:

If I open this link in a separate tab, it opens, but it does not open when the checkout button is clicked.

Please help me resolve this issue.

[loyds_mohan]

I am also experiencing an issue with the appPurchaseOneTimeCreate billing method in my Shopify app built with Remix.js. After the user clicks the purchase button, the appPurchaseOneTimeCreate mutation creates a confirmation URL, which I then attempt to redirect to. However, I encounter the following error:
The loading of “https://admin.shopify.com/store/demo-store/charges/ApplicationCharge/confirm_application_charge?sign... in a frame is denied by “X-Frame-Options“ directive set to “deny“.

This issue is blocking our One Time Payment feature and affecting our users' ability to complete the purchase process.

Can you provide guidance on how to resolve this issue? Is there a specific way to handle the redirection to the confirmation URL to avoid the X-Frame-Options restriction, or any alternative approach to ensure the payment process works seamlessly?

[massiv]

please, tell me you guys found the problem... i am facing the exact same problem and i have been days now trying to find a solution

[ViralSanchala]

I found solution for this like use below code for redirect and this will work.

top.location.href = res.confirmationUrl

I found this solution in this question
https://community.shopify.com/c/shopify-apps/recurring-charges-confirmation-url-changing-when-using-...

[tyuzu]

You should use the redirect from the authentication

const { redirect } = await authenticate.admin(request);
return redirect(response, { target: "_parent" });

[Peterpot]

Hi why is this better? And how to implement it in the node template 

[tyuzu]

@Peterpot, I'm not sure but I think shopify doesn't allow to open new page in embedded apps. You could try to redirect it in the parent frame. e.g. same like _parent behavior

If you're using remix you can extract redirect from await authenticate.admin(request);

or if using polaris you could used <Button variant="primary" url={ConfirmationUrl} target="_parent">Proceed</Button>

[tyuzu]

@Manoj_M 

You should use the redirect from the authentication

const { redirect } = await authenticate.admin(request);
return redirect(response, { target: "_parent" });