Using the collapsible widgets for smartphones

All Amazon Pay and Login with Amazon widgets are optimized for touchscreen, which improves usability on tablets and smartphones. If you have a separate website that is optimized for smartphones, however, then we recommend that you use the collapsible widgets on that website.

The collapsible AddressBook and Wallet widgets are designed to fit in a one-column user interface, and they can be expanded and collapsed to minimize the need for scrolling. They are best for websites where you want to keep the space allocated to the widgets to a minimum and where you want to use the full screen area of the buyer's device. This differs from the standard widgets, which are of fixed height and width and cannot be expanded or collapsed by the buyer. The standard widgets are described in the Introduction.

The collapsible AddressBook and Wallet widgets scale to fit the width of the smartphone screen. The collapsible widgets have a fixed height of 135 pixels when collapsed. The buyer can expand the widgets to change the pre-selected shipping address or payment method. In this case, the widgets expand to the full height and width of the device. When the buyer makes a selection, the widgets collapse automatically and the buyer can continue checking out.

Integrate the collapsible widgets

  1. Add a meta tag to the head section of each of your smartphone-optimized pages. This meta tag causes the widgets to scale to be readable on a smartphone without requiring the user to zoom the page: 
    
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  2. Modify your code that creates the AddressBook and Wallet widget to set the designMode parameter to smartphoneCollapsible, as in the following example: 
    
new OffAmazonPayments.Widgets.AddressBook({
  sellerId : 'YOUR_SELLER_ID_HERE',
  onReady: function(billingAgreement) {
     var billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
  },
  design : {
     designMode: 'smartphoneCollapsible'
  },
  agreementType: 'BillingAgreement',
  onAddressSelect : function(billingAgreement) {
  },
  onError : function(error) {
  }
}).bind("addressBookWidgetDiv");

The example above shows how to modify the AddressBook widget. You need to make the same change for the Wallet widget and for the read-only AddressBook and Wallet widgets. You can't specify the width and height of the collapsible widgets.

The following illustration shows how a buyer interacts with the collapsible widgets:

  • Initially, the widgets are collapsed. The widgets show the Amazon default shipping address and payment method.
  • If the buyer wants to modify the shipping address or payment method, the buyer clicks the appropriate Change button. The widget then expands to fill the entire screen.
  • After the buyer chooses a different shipping address or payment method or hits the Cancel button, the widget collapses again.

See also