0

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

运输和钱包小部件都呈现，但滚动钱包以选择不同的付款方式（并测试授权过程的其他结果）不起作用。

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

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

首先设置客户端 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>

钱包小部件的初始显示 初始钱包显示

按右箭头后的钱包小部件 按next后的钱包显示

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

谢谢！

4

1 回答 1

0

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

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

地址簿小部件

集成指南中说明了最佳样式定义：

#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 的引用。

于 2019-09-06T07:11:53.033 回答