BigCommerce Embedded Checkout NotEmbeddableError: Unable to embed the iframe because the content could not be loaded

Question

I am trying to implement bigcommerce embedded checkout into my rails application. I followed this url to integrate embedded checkout into my local rails application. https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial

But I have error message of "NotEmbeddableError: Unable to embed the iframe because the content could not be loaded." These are the steps I did.

1. I am using rails application locally. it is running as https://127.0.0.1:3000 (I've tried with localhost, but I can't create site using localhost: it says site name should not contain localhost string) I created local ssl key and certification and runs the application by rails s -b 'ssl://127.0.0.1:3000?key=127.0.0.1.key&cert=127.0.0.1.crt'

And I can access the local site by https://127.0.0.1:3000/ although it says 'Not Secure'

2. I followed the embedded checkout url APIs and able to produce the redirect_urls for example:

{
 "data": {
     "cart_url": "https://pbgtest.mybigcommerce.com/cart.php?action=load&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4",
     "checkout_url": "https://pbgtest.mybigcommerce.com/cart.php?action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4",
     "embedded_checkout_url": "https://pbgtest.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4"
 },
 "meta": {}
}

whenever I copy checkout_url or embedded_checkout_url and paste it directly in addressbar it works fine. I also found that these urls should be at once not twice, so whenever I try a test I regenerate the url

3. In rails application, I added this code in one of page

<script src="https://checkout-sdk.bigcommerce.com/v1/loader.js"></script>
<script>
  $(document).ready(function() {
    // const module = await checkoutKitLoader.load('embedded-checkout');

    async function show() {
      const module = await checkoutKitLoader.load('embedded-checkout');
      const service = module.embedCheckout({
        url: 'https://pbgtest.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4',
        containerId: 'embedded-checkout-section'  #This is  div id
      });
      service
      .then(value => {
        console.log(value);
        })
      .catch(err => {
          console.log(err);
        });
    }

    show();
 }

But I get "NotEmbeddableError: Unable to embed the iframe because the content could not be loaded." I can't get the proper info like why it failed loading. I also tested after disable the Anti Virus software but still same error. Anybody can help?

Answer 1

It is expected behavior that the link is only live for one visit, so you are correct to regenerate these for testing these urls. Is your BigCommerce store published/live? This needs to be true in order for it to be pulled into your embedded checkout experience.

Also, I would recommend using the embedded_checkout url directly.

Answer 2

Got it successful after following steps

1. Make sure cart channel id matches with one that points to your https localhost
2. Add route in channel where the embedded checkout needs to be loaded.
3. In security and privacy settings, check x-frame-options to allow from your https localhost