Question

我已经解决了这个问题一段时间了，我无法弄清楚为什么亚马逊钱包小工具没有呈现。我正在实施仅使用亚马逊支付，而不是登录。我让按钮小部件工作，但是当钱包出现的时候，什么都没有。我使用BigCommerce作为我的电子商务平台。按钮工作并带我到下一页(https://store-24r5d.mybigcommerce.com/checkout-with-amazon)，但小部件不呈现。

这是我的按钮代码（测试并正常工作）

                                     <!--Amazon Pay Starts Here-->

                    <!-- Place this where you would like the Payment Button to appear
<div id="AmazonPayButton"></div>
<script type="text/javascript">
  var authRequest;
  OffAmazonPayments.Button("AmazonPayButton", "Selleridhere", {
    type:  "PwA",
    color: "Gold",
    size:  "medium",
    useAmazonAddressBook: true,
    authorization: function() {
      var loginOptions = {scope: 'profile payments:widget'};
      authRequest = amazon.Login.authorize(loginOptions, "https://store-24r5d.mybigcommerce.com/checkout-with-amazon/");
    },
    onError: function(error) {
      // Write your custom error handling
    }
  });
</script>

                    <!--Amazon Pay ends Here-->

在我的custom.css上渲染钱包：

<!-- please put the style below inside your CSS file -->

#addressBookWidgetDiv{
    width: 400px; 
    height: 228px;
}

在我的钱包应该呈现的页面上（这是问题）：

     <!--Amazon wallet Widget-->
<div id="addressBookWidgetDiv">
</div> 

<script>
new OffAmazonPayments.Widgets.AddressBook({
  sellerId: 'SellerIDHere,'
  onOrderReferenceCreate: function(orderReference) {
    orderReference.getAmazonOrderReferenceId();
  },
  onAddressSelect: function(orderReference) {
    // Replace the following code with the action that you want to perform 
    // after the address is selected.
    // The amazonOrderReferenceId can be used to retrieve 
    // the address details by calling the GetOrderReferenceDetails
    // operation. If rendering the AddressBook and Wallet widgets on the
    // same page, you should wait for this event before you render the
    // Wallet widget for the first time.
    // The Wallet widget will re-render itself on all subsequent 
    // onAddressSelect events, without any action from you. It is not 
    // recommended that you explicitly refresh it.
  },
  design: {
    designMode: 'responsive'
  },
  onError: function(error) {
    // your error handling code
  }
}).bind("addressBookWidgetDiv");
</script>

<!--Amazon wallet ends here-->

Answer 1

听起来您没有在尝试呈现addressBook的页面上包含所需的Amazon小部件js库。要确认，请打开控制台，看看是否收到以下错误：

＆＃34; ReferenceError：OffAmazonPayments未定义＆＃34;

如果是这样，只需包含沙箱或生产js文件：

    <script type='text/javascript' 
    src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>

或

    <script type='text/javascript' 
    src=='https://static-na.payments-amazon.com/OffAmazonPayments/us/js/Widgets.js'>

此外，您的上述代码是呈现亚马逊的通讯录，而不是钱包。付款需要钱包（选择信用卡），地址簿（选择送货地址）是可选的。有关添加钱包（和地址簿）按钮的文档，请查看https://payments.amazon.com/documentation/lpwa/201749840#201749990。

Answer 2

我访问了您的网站，但它似乎无法运行。仅供参考，您使用的是使用亚马逊登录。什么时候用亚马逊支付＆＃39;单击即可获得您同意的登录亚马逊体验。

除了添加小部件代码之外，您还需要在<head>中设置登录亚马逊客户端ID，如下所示：

<script type='text/javascript'>
    window.onAmazonLoginReady = function () {
        amazon.Login.setClientId('your_login_with_amazon_client_id');
    };
</script>

如果您没有设置客户端ID，则可能会看到会话过期等内容。

您需要将这个以及Widgets.js包含在＆＃34; Pay with Amazon＆＃34;按钮页面和小部件页面。

必须加载Widgets.js AFTER 您设置客户端ID。

Answer 3

亚马逊文档中给出的脚本代码包含属性async ='async'，看起来像这样-

<script type='text/javascript' async='async'
  src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>

现在，您必须删除“ async”属性，因为它会导致整个问题。当您的代码需要OffAmazonPayments引用时，但JavaScript文件（.../widgets.js）仍在加载中（因为它是异步函数）。因此，只需删除“ async”属性，以使脚本代码像这样-

<script type='text/javascript' async='async'
  src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>

Answer 4

如果您通过异步将其添加到head标签，那么它似乎可以正常工作。

<script async type='text/javascript' src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'></script>

亚马逊电子钱包小工具无法呈现

4 个答案: