Amazon maintains galleries of multiple versions and sizes of buttons that are available for your use. Button sizes depend on the category of button that you choose for your application.
The following chart explains more about each button widget option. Note that while the button text is not technically tied to the functionality that you assign to it, you should use the button labels according to the use cases below in order to avoid customer confusion.
Login with Amazon
Use this button to let a buyer sign in to your site using their Amazon account information. Buyers can sign in before or during the checkout process.
After your buyers click one of the Login with Amazon buttons, you can do this:
Use this button to let a buyer initiate an order transaction from your cart page or any product detail page and access their shipping and payment information using their Amazon account.
When a buyer clicks the Amazon Pay button, they sign in using their Amazon user name and password before accessing their shipping and payment information.
You can provide the following functionality with this button type:
Button widget parameters
Replace YOUR_MERCHANT_ID with your own Merchant ID, which you received during registration. If you aren't sure what your Merchant ID is, check your Merchant ID by signing in to Seller Central and going to Integration > MWS Access Key.
The type parameter is an optional parameter for indicating the type of button image that you want to choose for your webpage. Note that if you decide not to specify a value for type, the LwA (Login with Amazon) button is set as the default value.
The following table shows the valid type parameter values, button descriptions, and sample button images.
|Type codes||Button description||Button example|
|LwA||Specifies the Login with Amazon button. This is the default button if type is not specified.|
|PwA||Specifies the Amazon Pay button.|
The color parameter is an optional parameter for choosing a button color. The following table shows the valid color code values, color descriptions, and color samples.
|Color codes||Color description||Color example|
The size parameter is an optional parameter for choosing a button size. For more information about button size options, see the Button guidelines.
Valid size code values are:
The actual size rendered depends on the type of button selected:
|LwA - Specifies the Login with Amazon button.||
|PwA - Specifies the Amazon Pay button.||
The value of the parameter scope that you choose influences both the content returned in the response of the call and the type of consent screen that Amazon Pay shows to the buyer to secure their permission for sharing their information.
You can use a combination of the following scope parameters:
|profile||Gives access to the full user profile (username, email address, and userID) after login.|
|profile:user_id||Gives access only to the userID from the user profile after login.|
|postal_code||Gives the user's zip/postal code number from their primary shipping address.||When you request access to the postal_code scope, alone or in concert with the profile or profile:user_id scope, the user has to consent to share their information.|
|payments:widget||Required to show the Amazon Pay widgets (address and wallet widget) on your page. If used without the parameter below, it gives access to the full shipping address after ConfirmOrderReference call.|
|payments:shipping_address||Gives access to the full shipping address via the GetOrderReferenceDetails API call as soon as an address has been chosen in the address widget.||
Example: scope: profile payments:widget payments:shipping_address
The payments:shipping_address gives access to the buyer's shipping address. To retrieve the full shipping address, you need to call the getOrderReferenceDetails API. For more information, see "Getting the Shipping Address from Amazon" in Step 4: Add the AddressBook and Wallet Widgets, or GetOrderReferenceDetails in the Amazon Pay API reference guide.
The popup parameter determines whether the buyer is presented with a pop-up window to authenticate or if the buyer is instead redirected to an Amazon Pay page to authenticate.
Use one of the following popup parameters:
- true - An Amazon Pay authentication screen is presented in a pop-up dialog where buyers can authenticate without ever leaving your website. This value is recommended for desktops where the button widget is presented on a secure page. Be aware that this option requires the button to reside on an HTTPS page with a valid SSL certificate.
- false - The buyer is redirected to an Amazon Pay page within the same browser window. This value is recommended for smartphone optimized devices or if you are rendering the button widget on a non-secure page. Be aware that the redirect URL must use HTTPS protocol and have a valid SSL certificate. For more information, see Enabling a redirect authentication.
Default: popup: true
When you embed a Login with Amazon and/or Amazon Pay button with the pop-up parameter set to true, the buyer is asked for their Amazon Pay account email address and password:
As you can see in the previous screenshot, you can add your company logo to the authentication window. You can do this on Seller Central by clicking the Integration Settings link under Settings.
The redirect URL is a parameter that determines which page the buyer is redirected to after successfully authenticating. For example, after a successful authentication, you might want to take the buyer to the next page in your checkout pipeline to collect their shipping address and/or payment method details. Be aware that if you use popup:false in your button code – which means that you use the redirect login experience – you have to whitelist all the redirect URLs in Seller Central in the Login with Amazon settings for your application.
We also recommend that you implement an onError handler in your code. The onError code is optional, but it can save you considerable effort with troubleshooting integration issues. For more information, see Testing your integration in the sandbox environment.
For users who have logged in, you should provide a logout option (often a hyperlink) on your website. The logout option should delete any cached tokens and remove the user's profile information (like their name) from your website. Then your website can present the login button again.
Subsequent calls to amazon.Login.authorize present the login screen by default.