This guide demonstrates how to integrate with Amazon Pay and Login with Amazon in a test environment. This test environment, the Amazon Pay Sandbox view, lets you conduct an end-to-end test of your integration before going live. After a successful test, you can switch to the Production environment.
For more information, see Testing your integration in the Sandbox environment.
Configure your website for Amazon Pay
Amazon Pay and Login with Amazon work together to provide a great customer experience. Regardless of which button option you choose to use (Login with Amazon or Amazon Pay), you need to perform some base configurations for Amazon Pay. You can access the Amazon Pay configuration settings by going to Seller Central and clicking Integration Central under the Integration menu item.
- Login to Seller Central and select Integration > Integration Central from the navigation bar on the top-left side
- Under the Manage client ID/store ID(s) section, click on Create new client ID/store ID
- In the application details, add basic details about your website. These details are used on your website and mobile apps (if applicable).
- Application or store name: This is the name that appears on the consent screen when the users agree to share their information with your website. This name applies to Android, iOS, and website versions of your application.
- Description: A description of your website for Login with Amazon users.
- Upload a logo: This logo is shown on the sign-in and consent screens when customers sign in to your website or mobile app. The logo automatically resizes to 50 x 150 pixels. The following formats are accepted: PNG, JPEG, or GIF.
- If your website will be making HTTPS calls to the Amazon Pay authorization service and specifying a redirect_uri for replies, add those redirect URIs to Allowed Return URLs. The return URL includes the protocol, domain, path, and query string(s) (for example, https://www.example.com/login.php). To add more than one return URL, click Add Another.
- Click Save changes when done
- You are automatically assigned values for Client ID and Client Secret. The Client ID identifies your application, and the Client Secret is used in some circumstances to verify that your application is authentic. The Client Secret, like a password, is confidential. To see the Client Secret, click Show Secret.
Getting ready to use the Amazon Pay and Login with Amazon widgets
Encode your data before processing
ESAPI, the Open Web Application Security Project (OWASP) API, provides a free, open source web application security control library that makes it easier to write lower-risk applications. Use this standard library to encode your output.
The following examples show how to encode data for some of the most common types of output:
- HTML: String safe = ESAPI.encoder().encodeForHTML( request.getParameter( "input" ) );
- HTML attributes values, like width, name or value: String safe = ESAPI.encoder().encodeForHTMLAttribute( request.getParameter( "input" ) );
- URL Parameter values: String safe = ESAPI.encoder().encodeForURL( request.getParameter( "input" ) );
To load the Amazon Pay button asynchronously:
- In the header of the page, set your clientId in the onAmazonLoginReady callback.
- Add the Widgets.js script tag, with the async attribute, below this definition.
To prevent timing issues, the script tags need to be positioned in the order listed above.
Here's an example:
Note: The example above is for the Sandbox. When moving your code to Production, be sure to change the URL accordingly.
For more information about the script tag async attribute, see the Mozilla Developer Network script tag Summary.