Amazon Pay Wallet Widget not scrolling

Question

I am updating the amazonpay implementation for a site for the new authorisation processes, which has gone successfully. However, I have found that the wallet widget earlier in the process is not working correctly.

Both the shipping and wallet widgets render, but scrolling the wallet to select a different payment method (and test other outcomes of the authorisation process) is not functioning.

Specifically, when I click on the right arrow to show the next method, the only change is to show the left arrow, there is no change to the display or outcome further in the process.

Since this is all within the amazon-generated scripts I'm at a loss how to investigate the issue which is also present in the unmodified version of the site.

The client id is set first, then the amazon libraries included:

<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>

and the widgets themselves:

<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>

Initial display of the wallet widget

Wallet widget after pressing right arrow

EDIT: And with the solution applied to set a suitable height:

Thanks!

Answer 1

This is probably an issue caused by your style definition. The arrows below the widgets are used to circle through the addresses that are usually shown below the widget, see the section marked below in red.

You are probably using a sty definition that has reduced the widget to a height where the addresses are no more visible, therefore it looks like the arrows would not do anything.

The optimal style definitions are stated in the 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;
}

You might also want to compare your implementation against the code sample in the integration guide linked above. There are a couple of things in your code that do look a bit odd, especially the part inside the onAddressSelect callback. A reference to login.js is also not required.