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 and Login with Amazon
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 of Login with Amazon. You access the Login with Amazon configuration settings from the Login with Amazon Seller Central page.
- On the Login with Amazon Seller Central page, register a new application by clicking the Register new Application button.
- In the application details page, add basic details about your website. These details are used on your website and mobile apps (if applicable).
- Name Shown to Users 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.
- Logo Image File 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.
- When you are finished, click Save.
Add a website to your application
- From the Application screen, click Web Settings You are automatically assigned values for Client ID and Client Secret. The Client ID identifies your website, and the Client Secret is used in some circumstances to verify that your website is authentic. The Client Secret, like a password, is confidential. To see the Client Secret, click Show Secret.
- If your website will be making HTTPS calls to the Login with Amazon 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.
- To finish configuring Login with Amazon, click Save.
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.