Embedded checkout: Refused to frame

[cfernandeza-or]

Describe the bug
I am triying to embed the checkout with the function embedCheckout, but throws this errror:
Refused to frame 'https://channel.mybigcommerce.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://channel.mybigcommerce.com/".

The hook useCheckout request the redirect links and when the data is loaded, execute the embededCheckout function to embed the iframe in the div:

`
import { Layout } from "@components/common";
import { Container } from "@components/ui";
import useCheckout from '@framework/checkout/use-checkout';
import { embedCheckout } from '@bigcommerce/checkout-sdk';
import { useEffect } from 'react';

export default function Checkout () {
const { data } = useCheckout();

useEffect(() => {
    if(data) {
        embedCheckout({
            url: data?.embedded_checkout_url,
            containerId: "checkout-container"
        })
    }
}, [ data ]);

return (
    <Container>            
        <div id="checkout-container"/>
    </Container>
)

}

Checkout.Layout = Layout`

Screenshots

[arjanc]

Hi, not that I directly have an answer for you and being able to tell this works for me as well (I still struggle with getting my head around the whole embedded checkout functionality). But this is how I am trying to embed a checkout.

First I fetch the checkout urls from POST https://api.bigcommerce.com/stores/{{store_hash}}/v3/carts/{{cart_id}}/redirect_urls
which returns something like this:

{
  "cart_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?action=load&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b",
  "checkout_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?action=loadInCheckout&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b",
  "embedded_checkout_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b"
}

From the result object I use the embedded_checkout_url to use inside the embedCheckout method from the Bigcommerce sdk.

More on this can be found here

Maybe this is helpful for you.

[cfernandeza-or]

Hi, not that I directly have an answer for you and being able to tell this works for me as well (I still struggle with getting my head around the whole embedded checkout functionality). But this is how I am trying to embed a checkout.

First I fetch the checkout urls from POST https://api.bigcommerce.com/stores/{{store_hash}}/v3/carts/{{cart_id}}/redirect_urls which returns something like this:

{
  "cart_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?action=load&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b",
  "checkout_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?action=loadInCheckout&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b",
  "embedded_checkout_url": "https://store-id30h7ohwf.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=bc218c65-7a32-4ab7-8082-68730c074d02&token=aa958e2b7922035bf3339215d95d145ebd9193deb36ae847caa780aa2e003e4b"
}

From the result object I use the embedded_checkout_url to use inside the embedCheckout method from the Bigcommerce sdk.

More on this can be found here

Maybe this is helpful for you.

Hi arjanc, thank you for your response. I have done it using the embedCheckout function in my checkout page:

`export default function Checkout () {
const { data } = useCheckout();
useEffect(() => {
if(data) {
embedCheckout({
url: data?.embedded_checkout_url,
containerId: "checkout-container"
})
}
}, [ data ]);

return (
    <Container>     
       <div id="checkout-container"/>
    </Container>
)

}
`

The hook useCheckout makes a request to BC API and receives the three urls and I use the embedded_checkout_url. Also I tried to change the security settings of the store, with the option x-frame, but I always get the same error.

[arjanc]

Are us using a custom checkout or the default 'Optimized One-Page Checkout' from Bigcommerce? Because I saw the same message you have when I enabled a custom checkout. And was able to embed the default checkout when the option 'Optimized One-Page Checkout' was enabled inside the Bigcommerce settings -> checkout.

[cfernandeza-or]

Yes, I tried both, I enabled a custom checkout and default checkout page. Always I received the same issue. I dont know if I need to set some special configuration or not. Also I tried X-frame options and I couldn't embed it.

[Tigatok]

@cfernandeza-or did you ever figure this out?