Amazon Pay Wallet Widget 不滚动

Question

我正在为新授权流程的网站更新 amazonpay 实施，该流程已成功完成。但是，我发现在此过程中较早的钱包小部件无法正常工作。

运输和钱包小部件都呈现，但将钱包滚动到 select 不同的支付方式（并测试授权过程的其他结果）无法正常工作。

具体来说，当我点击右箭头显示下一个方法时，唯一的变化是显示左箭头，过程中的显示或结果没有变化。

由于这一切都在亚马逊生成的脚本中，我不知道如何调查该网站的未修改版本中也存在的问题。

先设置客户端id，然后设置亚马逊库：

<script type="text/javascript" src="https://static-eu.payments-amazon.com/OffAmazonPayments/gbp/sandbox/lpa/js/Widgets.js"></script>
<script type="text/javascript" src="https://static-eu.payments-amazon.com/v2/login.js" id="OffAmazonPaymentsLoginJS"></script>

和小部件本身：

<script>
  new OffAmazonPayments.Widgets.AddressBook({
    sellerId: '..........',
    onOrderReferenceCreate: function(orderReference) {
      window.AmazonOfflineData = window.AmazonOfflineData || {};
      window.AmazonOfflineData['AmazonOrderReferenceId'] = orderReference.getAmazonOrderReferenceId();
    },
    onAddressSelect: function(orderReference) {
      if ( typeof checkout_cbai_address_change == 'function' ) checkout_cbai_address_change();

      if ( !window.OffAmazonPaymentsWalletRendered ) {
        new OffAmazonPayments.Widgets.Wallet({
          sellerId: '.........',
          onPaymentSelect: function (orderReference) {
            if (typeof checkout_cbai_payment_change == 'function') checkout_cbai_payment_change();
          },
          design: {
            designMode: 'responsive'
          },
          onError: function (error) {
            console.log(error.getErrorCode() + ' ' + error.getErrorMessage());
          }
        }).bind("AmazonWalletWidget");
        window.OffAmazonPaymentsWalletRendered = true;
      }
    },
    design: {
      designMode: 'responsive'
    },
    onError: function(error) {
      console.log(error.getErrorCode() + ' ' + error.getErrorMessage());
    }
  }).bind("AmazonAddressWidget");
</script>

钱包小部件的初始显示

按向右箭头后的钱包小部件

编辑：并应用解决方案来设置合适的高度：

谢谢！

Answer 1

这可能是您的样式定义导致的问题。小部件下方的箭头用于圈出通常显示在小部件下方的地址，请参阅下面标记为红色的部分。

您可能正在使用一个 sty 定义，该定义将小部件降低到地址不再可见的高度，因此看起来箭头不会做任何事情。

最佳样式定义在 integration guide:

#addressBookWidgetDiv {
  min-width: 300px;
  width: 100%;
  max-width: 900px;
  min-height: 228px;
  height: 240px;
  max-height: 400px;
}

#walletWidgetDiv {
  min-width: 300px;
  width: 100%;
  max-width: 900px;
  min-height: 228px;
  height: 240px;
  max-height: 400px;
}

您可能还想将您的实现与上面链接的集成指南中的代码示例进行比较。您的代码中有几处看起来确实有点奇怪，尤其是 onAddressSelect 回调中的部分。也不需要引用 login.js。

Amazon Pay Wallet Widget 不滚动

Amazon Pay Wallet Widget not scrolling

amazon-pay