Amazon Pay and Login with Amazon integration guide

Synchronous loading of JavaScript

The synchronous loading of the button widget for buyer authentication is not a suggested integration method. We recommend that you use the asynchronous loading of JavaScript as described in Step 3: Add a button widget.

Procedure

Follow the steps below to add a button widget for buyer authentication. Do the steps in the order presented, you must not add the widgets.js script (step 2) before completing step 1.

Note: You must encode your data before processing. We recommend that you encode any data that you receive from us before outputting it in any form such as HTML, JavaScript, or in a URL. Output encoding ensures that malicious scripts or any other injected executable cannot be executed on your website. For additional details, see "Encode your data before processing" in the JavaScript section.

  1. Add onAmazonLoginReady callback to the <head> section of any page where you want the button to appear.
    <head>
      . . .
      <script type='text/javascript'>
        window.onAmazonLoginReady = function() {
          amazon.Login.setClientId('YOUR_CLIENT_ID_HERE');
        };
      </script>
      . . .
    </head>
  2. Include the widget.js file. Be sure to place it below the JavaScript code you entered in step 1.
    <head>
      . . .
      <script type='text/javascript' 
        src='https://static-eu.payments-amazon.com/OffAmazonPayments/gbp/
        sandbox/lpa/js/Widgets.js'>:
      </script>:
      . . .
    </head>
  3. Add the button code to the body of your web page, by adding JavaScript code in the <body> of every page where you want the button to appear.
    <div id="AmazonPayButton"></div>
     
    <script type="text/javascript"> 
      var authRequest; 
      OffAmazonPayments.Button("AmazonPayButton", "SELLER_ID", { 
        type:  "TYPE_PARAMETER", 
        color: "COLOR_PARAMETER", 
        size:  "SIZE_PARAMETER", 
        language: "ENTER_LANGUAGE_PARAMETER",
     
        authorization: function() { 
          loginOptions = {scope: "SCOPES", popup: "POPUP_PARAMETER"}; 
          authRequest = amazon.Login.authorize (loginOptions, "REDIRECT_URL"); 
        } 
      }); 
    </script>

    The code sample above shows parameters that you can replace with your own values. See Button widgets for more information.

  4. Add error handling to the button code.
    . . .
    onError: function(error) { 
      // your error handling code.
      // alert("The following error occurred: " 
      //   + error.getErrorCode() 
      //   + ' - ' + error.getErrorMessage());
    } 
    . . .

    For more information about the onError handler, see Handling errors from Login and Pay with Amazon widgets.

  5. Add a logout option.
    <script type="text/javascript">
      document.getElementById('Logout').onclick = function() {
        amazon.Login.logout();
      };
    </script>
    The logout option, often set up as a link, should delete any cached tokens and remove the user's profile information, such as their name, from your website. Then your website can present the login button again. Call the amazon.Login.logout() method to delete any cached tokens and clear the session created by Amazon. Subsequent calls to amazon.Login.authorize will present the login screen by default.

Complete code sample

<head>
  <script type='text/javascript'>
    window.onAmazonLoginReady = function() {
      amazon.Login.setClientId('YOUR_CLIENT_ID_HERE');
    };
  </script>

  <script type='text/javascript' 
    src='https://static-eu.payments-amazon.com/OffAmazonPayments/gbp/
    sandbox/lpa/js/Widgets.js'>
  </script>
</head>

<body>
  . . .
  <div id="AmazonPayButton"></div>
   
  <script type="text/javascript">
    var authRequest; 
    OffAmazonPayments.Button("AmazonPayButton", "SELLER_ID", { 
      type:  "TYPE_PARAMETER", 
      color: "COLOR_PARAMETER", 
      size:  "SIZE_PARAMETER",
      language: "ENTER_LANGUAGE_PARAMETER",    

      authorization: function() { 
        loginOptions = {scope: "SCOPES", popup: "POPUP_PARAMETER"}; 
        authRequest = amazon.Login.authorize (loginOptions, "REDIRECT_URL"); 
      }, 

      onError: function(error) { 
        // your error handling code.
        // alert("The following error occurred: " 
        //   + error.getErrorCode() 
        //   + ' - ' + error.getErrorMessage());
      } 
    }); 
  </script>
  . . .
  <script type="text/javascript">
    document.getElementById('Logout').onclick = function() {
      amazon.Login.logout();
    };
  </script>
</body>

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.