Re-rendering Wallet widgets

In most cases, you don't need to refresh the Wallet widget as it will automatically refresh when a buyer chooses an address from the AddressBook widget. Frequent re-rendering of the Wallet widget affects website performance and causes a poor buyer experience.

But sometimes the re-rendering of the Wallet widget is actually required when certain constraints are returned in the checkout flow. Here are some examples:

  • PaymentMethodNotAllowed -- Amazon Pay might not allow all payment methods for a given transaction. After calling either the SetOrderReferenceDetails or GetOrderReferenceDetails operation, you might see a PaymentMethodNotAllowed constraint in the response. Attempting to confirm an Order Reference that has constraints also returns the error code ConstraintsExist.
  • InvalidPaymentMethod -- If there are problems with a buyer's payment method, it might be declined. If so, after making a GetAuthorizationDetails API call, you see a response with a Declined state with a InvalidPaymentMethod reason code.

As a best practice, you should re-render the Wallet widget and request that the buyer choose a different payment method.

For more information about constraints, see OrderReferenceConstraints in the Amazon Pay API reference guide.

Procedure

To re-render the Wallet widget, bind the order reference Id, which was created from the addressBook widget, to the Wallet widget.

 
<!-- Place this code in your HTML where you want the Wallet widget to appear. -- >
<div id="walletWidgetDiv"></div>

<script>
  new OffAmazonPayments.Widgets.Wallet({
    sellerId: 'YOUR_SELLER_ID_HERE',
    
    // Tie the order reference Id obtained
    // from the addressBook Widget
    amazonOrderReferenceId: ORDER_REFERENCE_ID,
    
    onPaymentSelect: function(orderReference) {
      // Replace this code with the action you want 
      // to perform after the payment method is selected.
    },
    design: {
      designMode: 'responsive'
    },
    
    onError: function(error) {
      // Your error handling code.
      // During development you can use the following
      // code to view error messages:
      // console.log(error.getErrorCode() 
      //   + ': ' 
      //   + error.getErrorMessage());
      // See "Handling Errors" for more information.
    }
  }).bind("walletWidgetDiv");
</script>

Finally, reload the page, or call your JavaScript function to render the wallet widget.