亚马逊钱包小工具不呈现

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

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

"ReferenceError: OffAmazonPayments is not defined"

如果是这样，只需包含沙箱或生产 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

我访问了您的网站，但它似乎无法正常工作。仅供参考，您正在使用 Login with Amazon。单击 'Pay with Amazon' 时，您会看到“登录亚马逊”体验并征求您的同意。

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

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

如果您不设置客户端 ID，您可能会看到会话过期等情况

您需要将其与 Widgets.js 一起包含在 "Pay with Amazon" 按钮页面和小部件页面上。

Widgets.js 必须在设置客户端 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

如果您使用 async 将它添加到 head 标记中，它似乎可以那样工作。

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

亚马逊钱包小工具不呈现

Amazon Wallet Widget not rendering

javascript

bigcommerce