BigCommerce Embedded Checkout NotEmbeddableError:无法嵌入iframe，

Question

我正在尝试在rails应用程序中实现bigcommerce嵌入式结账。我遵循这个url将嵌入式结账集成到我的本地rails应用程序中。https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial

但我有错误消息"；NotEmbeddableError:无法嵌入iframe，因为无法加载内容"这些是我做的步骤。

1. 我在本地使用rails应用程序。它运行为https://127.0.0.1:3000(我尝试过使用localhost，但无法使用localhost创建站点：它说站点名称不应包含localhost字符串(我创建了本地ssl密钥和证书，并通过轨道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/尽管上面写着"不安全">

2. 我遵循了嵌入的checkout 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或embeded_checkout_url并将其直接粘贴到地址栏中时，它都可以正常工作。我还发现这些url应该是一次而不是两次，所以每当我尝试测试时，我都会重新生成url

3. 在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

链接只在一次访问中处于活动状态是预期行为，因此您可以重新生成这些URL以测试这些URL。您的BigCommerce商店是否已发布/直播？这需要是真的，以便将其纳入您的嵌入式结账体验。

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

Answer 2

经过以下步骤后成功

1. 确保cart通道id与指向您的https localhost的通道id匹配
2. 在需要加载嵌入式签出的通道中添加路由
3. 在安全和隐私设置中，检查允许从https localhost访问的x帧选项