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
Topic summary
Developers using Shopify’s appPurchaseOneTimeCreate mutation in Remix.js apps encounter an X-Frame-Options error when redirecting users to the confirmation URL after clicking the purchase button. The error message indicates the confirmation URL is “denied by X-Frame-Options directive set to deny,” preventing the payment flow from completing within the embedded app frame.
Two working solutions have been identified:
- Client-side redirect using top-level navigation:
top.location.href = res.confirmationUrl
This breaks out of the iframe restriction by redirecting the entire browser window.
- Server-side redirect with _parent target (Remix-specific):
const { redirect } = await authenticate.admin(request);
return redirect(response, { target: "_parent" });
This uses Shopify’s authentication redirect method with the _parent target to navigate the parent frame.
Alternative for Polaris components:
<Button variant="primary" url={ConfirmationUrl} target="_parent">Proceed</Button>
The root cause is Shopify’s restriction on opening new pages within embedded apps, requiring redirects to target the parent frame rather than the embedded iframe.
1 Like