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

Question

我正在尝试在我的 rails 应用程序中实施 bigcommerce 嵌入式结帐。我按照此 url 将嵌入式结帐集成到我的本地 rails 应用程序中。 https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial

但我收到错误消息“NotEmbeddableError：无法嵌入 iframe，因为无法加载内容。” 这些是我做的步骤。

我正在本地使用 rails 应用程序。它是运行 as https://127.0.0.1:3000 （我试过使用本地主机，但我无法使用本地主机创建站点：它说站点名称不应包含本地主机字符串）我创建了本地 ssl 密钥和证书并运行应用程序 rails s -b 'ssl://127.0.0.1:3000?key=127.0.0.1.key&cert=127.0.0.1.crt'

我可以通过 https://127.0.0.1:3000/ 访问本地站点，尽管它说 'Not Secure'

我遵循了嵌入式结帐 url API 并且能够生成 redirect_urls 例如：

{
 "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": {}
}

每当我复制 checkout_url 或 embedded_checkout_url 并将其直接粘贴到地址栏时，它都可以正常工作。我还发现这些 urls 应该一次而不是两次，所以每当我尝试测试时我都会重新生成 url

在rails应用程序中，我在其中一个页面添加了这段代码

<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();
 }

但我收到“NotEmbeddableError：无法嵌入 iframe，因为无法加载内容。” 我无法获得正确的信息，例如加载失败的原因。我也在禁用防病毒软件后进行了测试，但仍然出现同样的错误。有人可以帮忙吗？

Answer 1

link 仅在一次访问中有效，这是预期的行为，因此您重新生成这些以测试这些 url 是正确的。您的 BigCommerce 商店是 published/live 吗？这必须是真实的，才能将其纳入您的嵌入式结账体验。

此外，我建议直接使用 embedded_checkout url。

Answer 2

按照以下步骤成功了

确保购物车渠道 ID 与指向您的 https 本地主机的渠道 ID 匹配
在需要加载嵌入式结帐的通道中添加路由。
在安全和隐私设置中，选中 x-frame-options 以允许从您的 https 本地主机

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

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

javascript

bigcommerce

ruby-on-rails-5

bigcommerce-checkout-sdk