Amazon Pay and Login with Amazon integration guide

Step 4: Add the AddressBook and Wallet widgets

After a buyer is successfully authenticated, you can render the Amazon Pay and Login with Amazon AddressBook and Wallet widgets on your site. The AddressBook and Wallet widgets show the default shipping address and payment method, respectively, from the buyer's Amazon account.

When the AddressBook and Wallet widgets are shown, the buyer has 15 minutes to make a choice before the session expires. When a session has expired and the buyer tries to choose a new address or payment method, a message appears in the widget telling the buyer that there's a problem processing their payment and to contact the merchant.

Procedure

Embedding the AddressBook and Wallet widgets

  1. Embed the AddressBook and Wallet widgets on your website by adding code to the HTML page where you want them to display.

    As on any page where you use Amazon Pay functions, you must include the JavaScript blocks that load the widgets.js and set the Client-ID. Make sure that they appear in your code in the same order as shown in the code sample below. There can be other code between the two script blocks.

    
    <script>
      window.onAmazonLoginReady = function() { 
        amazon.Login.setClientId('YOUR-CLIENT-ID'); 
      };
    </script>
    
    <script async='async' type='text/javascript'
    src='https://static-na.payments-amazon.com/OffAmazonPayments/us/
           sandbox/js/Widgets.js'>
    </script>
    

    The script tag in the sample above contains an async attribute that allows the webpage to load more quickly while the JavaScript code required by Amazon Pay is loaded in the background. This is the only asynchronous method supported by Amazon Pay.

  2. Add a <meta> tag to the head of your web page for Mobile-Optimized websites.
    The <meta> tag scales the AddressBook and Wallet widgets to the size of the screen so that it is readable on a mobile device or e-reader without requiring the user to manually zoom the page.
    
    <meta name="viewport" 
    content="width-device-width,initial-scale=1.0, maximum-scale=1.0"/>
    
  3. Specify the width and height parameters so that the AddressBook and Wallet widgets will render. (For more information, see Payment widgets.)

Transaction flow

When you show the AddressBook and Wallet widgets, the buyer must make a choice before the session expires. Otherwise, they will be shown a login screen and will be required to sign in.

The transaction occurs as follows:

  1. Get the buyer's shipping address. You need the buyer’s shipping address to calculate the total for the order, including the shipping charges and taxes. After receiving the onAddressSelect notification, call the GetOrderReferenceDetails API to retrieve the address.
    The AccessToken field must be passed in when making a GetOrderReferenceDetails call. The access token reflects how the scope parameter is set, which in turn determines if you will get back the full shipping address, including the street name, in the response.
  2. Get the buyer's payment method. If the buyer changes their address selection after making an initial address and payment method selection, they must then choose a payment method again. This means that you must listen for an onPaymentSelect notification following each address selection.
  3. Enable the next step in the checkout flow. After the onPaymentSelect callback has occurred, you can enable the next step in the checkout flow. For example, you might enable a "Place Order" button or a "Continue" button if you include an order review page in your flow.

Making a call to the GetOrderReferenceDetails API

Making a call to the GetOrderReferenceDetails API


     https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01
     ?AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE
     &Action=GetOrderReferenceDetails
     &AddressConsentToken=IQEBLzAtAhUAjagYW4Jrgw84pCaaIDjrKoEhZXsEXAMPLE
     &AmazonOrderReferenceId=S23-1234567-1234567
     &SellerId=YOUR_SELLER_ID_HERE
     &SignatureMethod=HmacSHA256
     &SignatureVersion=2
     &Timestamp=2012-10-03T19%3A01%3A11Z
     &Version=2013-01-01
     &Signature=CLZOdtJGjAo81IxaLoE7af6HqK0EXAMPLE
     

AddressBook widget

Note: If you show both the AddressBook and Wallet widgets on the same page, make sure that the Wallet widget loads after the AddressBook widget has finished loading.


<div id="addressBookWidgetDiv">
</div> 

<script>
  new OffAmazonPayments.Widgets.AddressBook({
    sellerId: 'YOUR_SELLER_ID_HERE',
    onOrderReferenceCreate: function(orderReference) {
      // Here is where you can grab the Order Reference ID.
      orderReference.getAmazonOrderReferenceId();
    },
    onAddressSelect: function(orderReference) {
      // Replace the following code with the action that you want
      // to perform after the address is selected. The 
      // amazonOrderReferenceId can be used to retrieve the address 
      // details by calling the GetOrderReferenceDetails operation. 

      // If rendering the AddressBook and Wallet widgets
      // on the same page, you do not have to provide any additional
      // logic to load the Wallet widget after the AddressBook widget.

      // The Wallet widget will re-render itself on all subsequent 
      // onAddressSelect events without any action from you. 
      // It is not recommended that you explicitly refresh it.
    },
    design: {
      designMode: 'responsive'
    },
    onReady: function(orderReference) {
      // Enter code here that you want to be executed 
      // when the address widget has been rendered. 
    },

    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("addressBookWidgetDiv");
</script>

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',
    onPaymentSelect: function(orderReference) {
      // Replace this code with the action that you want to perform
      // after the payment method is chosen.

      // Ideally this would enable the next action for the buyer
      // including either a "Continue" or "Place Order" button.
    },
    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>

Alternate scenarios


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.