Amazon Pay and Login with Amazon integration guide

Payment widgets

There are two types of payment widgets: the AddressBook and the Wallet widget. The buyer uses the Amazon payment widgets embedded in your site to access the shipping and payment information stored in their Amazon account.

The AddressBook widget shows the addresses stored in a buyer’s Amazon account:

The Wallet widget shows the payment methods stored in a buyer’s Amazon account:

CSS code for payment widgets

When showing the Amazon Pay AddressBook and Wallet widgets, you must specify width and height parameters; otherwise, the widgets don't render.

You can set the values to your specifications as long as they are within our allowed parameter ranges.

The recommended and valid width and height parameters for the one- and two-column widgets are specified in the following table:

Two-column widget One-column widget
Parameter Recommended dimension Valid dimensions Recommended dimension Valid dimensions
width 400px 400px600px 300px 300px399px
height 228px 228px400px 228px 228px400px

You can use any CSS unit measurement, like percent, REM, or EM.

Put the following code sample in a CSS file. The code sets values for both mobile-optimized and desktop webpages.

/* Please include the min-width, max-width, min-height 
/* and max-height if you plan to use a relative CSS unit 
/* measurement to make sure the widget renders in the 
/* optimal size allowed. 
*/   

#addressBookWidgetDiv {
  min-width: 300px; 
  max-width: 600px;
  min-height: 228px; 
  max-height: 400px;
}


#walletWidgetDiv {
  min-width: 300px; 
  max-width:600px; 
  min-height: 228px;
  max-height: 400px;
}


/* Mobile optimized and small window */

#addressBookWidgetDiv {
  width: 100%; 
  height: 228px;
}

#walletWidgetDiv {
  width: 100%; 
  height: 228px;
}

/* Desktop and tablet */

@media only screen and (min-width: 768px) {

  #addressBookWidgetDiv {
    width: 400px; 
    height: 228px;
  }

  #walletWidgetDiv {
    width: 400px; 
    height: 228px;
  }
}

An alternate method is to place the CSS styles for the AddressBook and Wallet widgets in the <head> tag in each HTML page where you show a widget:

<!-- Include the following in your  HTML file -->
<style type="text/css">
  #addressBookWidgetDiv{width: 400px; height: 228px;}
  #walletWidgetDiv {width: 400px; height: 228px;}</style>

Using the collapsible widgets for smartphones

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

The collapsible widgets are designed to fit in a one-column user interface and can be expanded and collapsed to minimize the need for scrolling. They are best for websites where you want to keep the space that is 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 Step 1: Register.

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.

To integrate the collapsible widgets, do this:

  1. Add a metatag to the head section of each of your smartphone-optimized pages. This metatag 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 the code that creates the AddressBook or Wallet widget to set the designMode parameter to smartphoneCollapsible, as in the following example:
    new OffAmazonPayments.Widgets.AddressBook({ 
      sellerId : 'YOUR_SELLER_ID_HERE', 
      onOrderReferenceCreate: function(orderReference) {
        orderReference.getAmazonOrderReferenceId();
      }, 
      design : {
        designMode: 'smartphoneCollapsible'
      },
      onAddressSelect : function(orderReference) {
      },
      onError : function(error) {
      }
    }).bind("addressBookWidgetDiv");

The above example 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 cannot specify the width and height of the collapsible widgets.

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

  • Initially, the widgets are collapsed, as in Figure 1. The widgets show the 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, as in Figure 2.
  • After the buyer chooses a different shipping address or payment method or taps the Cancel button, the widget collapses again, as in Figure 1.
  • Figure 1. Collapsed AddressBook and Wallet widgets Figure 2. Expanded AddressBook widget

Copyright © 2009-2017 Amazon.com, Inc. or its affiliates. Amazon and Amazon.com are registered trademarks of Amazon.com, Inc. or its affiliates. All other trademarks are the property of their respective owners.