javascript - 亚马逊钱包小工具不呈现

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有关添加钱包(和地址簿)按钮的文档。