Show the selected shipping address and payment method

An optional step after the buyer has chosen both their shipping address and payment method from the Amazon Pay widgets is to render read-only versions of the AddressBook and Wallet widgets to give the buyer one last chance to review their selections before confirming their purchase.

If you decide to have an order review page and show the read-only widgets, we recommend that you verify that the buyer has chosen an address and payment method before you show a confirmation page. You can do this by calling the GetBillingAgreementDetails operation and checking if the response contains a Constraints element. Each child constraint provides you with the information you need to take appropriate corrective action. For example, if you receive either a ShippingAddressNotSet or a PaymentPlanNotSet constraint, you want to let the buyer know that they still need to choose a shipping address or payment method.

Or you might choose to integrate your site to automatically redirect the buyer to the appropriate page to make a selection. If the buyer has not chosen a shipping address or payment method, the read-only widgets also inform the buyer that they need to make a selection.

If a billing agreement returns no constraints, it means that a ConfirmBillingAgreement call will succeed. For more information about constraints, see the GetBillingAgreementDetails and Billing agreement constraints sections in the Amazon Pay API reference guide. After the buyer confirms their purchase, you can proceed with fulfilling the order and collecting the payment.

When creating the read-only Amazon Pay AddressBook and Wallet widgets, you must specify width and height parameters; otherwise, the widgets don't render. The recommended and valid width and height parameters are specified here:

Parameter Recommended dimension Valid dimensions
width 400px 300px - 600px
height 185px 185px

To show the read-only versions of the widgets, you can use the same code that originally rendered the widgets on your site with the added parameter displayMode: "Read" inside the code. If you need to show the read-only widget on the same page as the editable AddressBook or Wallet widgets, subscribe to the onAddressSelect or onPaymentSelect notifications and redraw the read-only widget at that time. Otherwise, the read-only widget doesn't show the correct information. Here is an example of the code with the added parameter:

 
<!--- put the style below inside CSS file -->
<style type="text/css">
    #readOnlyAddressBookWidgetDiv {width: 400px; height: 185px;}
    #readOnlyWalletWidgetDiv {width: 400px; height: 185px;}
</style>

<div id="readOnlyAddressBookWidgetDiv">
</div>
 
<div id="readOnlyWalletWidgetDiv">
</div>

<script>
new OffAmazonPayments.Widgets.AddressBook({
  sellerId: 'YOUR_SELLER_ID_HERE',
  // amazonBillingAgreementId obtained from Address or Wallet widget
  amazonBillingAgreementId: amazonBillingAgreementId,
  displayMode: "Read",
  design: {
     designMode: 'responsive'
  },
  onError: function(error) {
   // your error handling code
  }
}).bind("readOnlyAddressBookWidgetDiv");
</script>
<script>
new OffAmazonPayments.Widgets.Wallet({
  sellerId: 'YOUR_SELLER_ID_HERE',
  // amazonBillingAgreementId obtained from Address or Wallet widget
  amazonBillingAgreementId: amazonBillingAgreementId,  
  displayMode: "Read",
  design: {
     designMode: 'responsive'
  },
  onError: function(error) {
   // your error handling code
  }
}).bind("readOnlyWalletWidgetDiv");
</script>

When the extra parameter is added, the read-only version of the widgets appears on your website like this: