Our Amazon Pay Web Component renders Amazon Pay in your payment form, and redirects the shopper to the Amazon website to complete the payment.
This component implements the pre-checkout flow so it can't be used inside a Web Drop-in.
Register for Amazon Pay
Sign up for an Amazon Pay merchant account on the Amazon Pay website. After the registration is complete, return to this page. Select the correct region for your account from the list below.
- EU Registration — For merchants with a legal entity in one of the following countries: Austria, Belgium, Cyprus, Denmark, France, Germany, Hungary, Ireland, Italy, Luxembourg, the Netherlands, Portugal, Spain, Sweden, or Switzerland. Select EUR as a currency in the registration page.
- UK Registration — For merchants with a legal entity in the United Kingdom.
Create an Amazon Pay Sandbox test buyer account
Use Sandbox to conduct end-to-end tests of your integration before going live. For details, see Amazon Pay Sandbox accounts. After creating an Amazon Pay Sandbox account, return to this page.
Get your PublicKeyId
Amazon Pay uses asymmetric encryption to secure communication. You can manually generate a public/private key pair on the Account > API credentials > Edit user page in the Customer Area (CA).
After that, send the publicKey
to your Amazon Pay contacts, and they will send back a publicKeyId
from Amazon Pay. Store this value in your company's accountDataType
in the CA.
Show Amazon Pay in your payment page
To show Amazon Pay Component on your payment page, proceed with the following steps:
-
Create a DOM element for Amazon Pay, placing it where you want the button to be rendered:
<div id="amazonpay_button-container"></div>
-
Create an instance of the Amazon Pay Component, specifying the following parameters:
Parameter Description Default buttonColor
Color of the Amazon Pay button. Supported values: Gold, LightGray, and DarkGray. Gold currency
Currency code in ISO 4217 format. It should match the ledger currency of the Amazon Pay merchant account. Supported values: EUR, GBP. If you went through the EU registration link in Step 1 of this guide, use EUR, otherwise use GBP. deliverySpecifications
Use the deliverySpecifications
parameter to specify shipping restrictions for your shop, and prevent buyers from selecting unsupported addresses from their Amazon address book. See address restriction samples for examples of common use cases. Don't set this parameter if you are selling digital goods. In this case, set theproductType
parameter to PayOnly.{} environment
Set to test. Change this to live when you're ready to accept live payments. test locale
Language used to render the button and text on Amazon Pay hosted pages. Please note that supported language(s) is dependent on the region that your Amazon Pay account was registered for. Supported values: en_GB, de_DE, fr_FR, it_IT, es_ES. en_GB merchantId
Amazon Pay merchant account identifier. placement
Placement of the Amazon Pay button on your website. Supported values: Home, Product, Cart, Checkout, Other. Cart productType
Product type selected for checkout. Supported values:
PayAndShip — Offer checkout using the shoppers's Amazon wallet and address book. Select this product type if you sell physical goods that you ship to the address associated with the shopper's Amazon account.
PayOnly — Offer checkout using only the shoppers's Amazon wallet. Select this product type if you do not need the buyer's shipping details, as you are selling digital goods.PayAndShip publicKeyId
The publicKeyId
from Step 3.returnUrl
The URL where the shopper will be redirected back to after they complete the selection of details from the Amazon hosted page. storeId
Retrieve this value from Amazon Pay Integration Central. Here's an example of the Amazon Pay component instance:
const amazonPayComponent = checkout .create('amazonpay', { // Returned in the `/paymentMethods` response configuration: { merchantId: 'YOUR_MERCHANT_ID', publicKeyId: 'YOUR_PUBLIC_KEY', storeId: '...' }, currency: 'EUR', environment: 'test', returnUrl: 'https://example.com/review_order' }) .mount('#amazonpay_button-container');
This displays the Amazon Pay button. The button is responsive and inherits the size of the container element. For more information about how to render and resize the Amazon Pay component refer to the Amazon Pay documentation.
When the shopper clicks the Amazon Pay button, they are redirected to the Amazon website to log in and select the shipping and payment details.
Handle the first redirect
The shopper will be redirected back to the returnUrl
with the amazonCheckoutSessionId
attached to the URL. The returnUrl
should point to the order review page where the shopper can review the details selected from the Amazon account, and finalize the purchase. Use the amazonCheckoutSessionId
to create a new instance of the Amazon Pay component to retrieve shopper details and create an order.
-
Create a DOM element for the Confirm purchase button, placing it where you want it to be rendered:
<div id="amazonpay_order-container"></div>
-
Create an instance of the Amazon Pay component, and this time pass the
amazonCheckoutSessionId
along with theamount
object and areturnUrl
.The
returnUrl
set at this step should bring the shopper to the page where the logic to execute the payment will take place. ThisreturnUrl
should be different from the one used at the previous step.Optionally, you can also show a button to go back and change the selected payment details by setting
showChangePaymentDetailsButton
totrue
.const amazonPayComponent = checkout .create('amazonpay', { amount: { currency: 'EUR', value: 4700 }, amazonCheckoutSessionId: '...', returnUrl: 'https://example.com/process_payment', showChangePaymentDetailsButton: true // Optional }) .mount('#amazonpay_order-container');
-
Get the shopper details by calling the
getShopperDetails
method from the Component. Use shopper details such as email address, name, shipping address and billing address to populate your order review page, as shown in the Amazon Pay documentation: Display shipping and payment info.amazonPayComponent.getShopperDetails() .then(details => { // Show shopper details });
When the shopper reviews the order and clicks the Order button, there is a second redirect to Amazon to update the checkout session state and enable the payment step.
Handle the second redirect and make a payment
The shopper is now redirected back to the returnUrl
with the amazonCheckoutSessionId
again attached to the URL. Use the amazonCheckoutSessionId
once again to create a new instance of the Amazon Pay component to make the payment.
-
Create a DOM element for the component, placing it where you want it to be rendered. At this point of the flow, the Component doesn't show anything. This page executes the logic of the payment and handles any additional buyer interaction. The Component uses this node, for example, in case a 3D Secure 2 challenge needs to be displayed.
<div id="amazonpay_payment-container"></div>
-
Define a
handleOnSubmit
function to be passed to the Component configuration object as value for theonSubmit
parameter. The function should accept thestate.data
object from the Component as an input, and trigger the backend function you define which executes the /payments API call.onSubmit: (state, component) => { component.setStatus('loading'); // Merchant's function to make a payment return makePayment(state.data) .then(response => { component.setStatus('ready'); if (response.action) { // Handle additional action (3DS / redirect / other) component.handleAction(response.action); } else { // The merchant's function to show the final result or redirect to a final status page handleFinalResult(response); } }) .catch(error => { // Handle error; }); }
-
Create an instance of the Amazon Pay Component and pass the
amazonCheckoutSessionId
. This time, hide the Order button. After the Component is mounted, trigger thesubmit
function which should be defined in the Adyen Checkout constructor.const amazonPayComponent = checkout .create('amazonpay', { amazonCheckoutSessionId: '...', showOrderButton: false }) .mount('#amazonpay_payment-container'); amazonPayOrder.submit();
This will call the onSubmit
event, which contains a state.data
object. Use this object to make a /payments request and parse the result of the payment.
Handle the decline flow
In case of a credit card decline, due to card expiration or insufficient funds, you should redirect the shopper back to the Amazon Pay payment method selection page. You can do this by calling the handleDeclineFlow
from the Amazon Pay Component.
This flow will allow you to Handle Authorization Declines as described in the Amazon Pay documentation.
onSubmit: async (state, component) => {
try {
const response = await makePayment(state.data);
// Check the result code
if (response.resultCode && checkPaymentResponse(response.resultCode)) {
// Show successful message
} else {
// Handle decline flow
amazonPayComponent.handleDeclineFlow();
}
} catch (error) {
// Fatal error
}
},
onError: (error) => {
if (error.resultCode) {
// Show payment failed message or start over the flow.
} else {
// Fatal error
}
}
Optional. Sign out from Amazon
After the transaction is finished, and the result is shown to the shopper, display a button to let them sign out from the Amazon account.
-
Create a DOM element for the Sign out button, placing it where you want it to be rendered:
<div id="amazonpay_signout"></div>
-
Create an instance of the Amazon Pay Component and pass the
amazonCheckoutSessionId
along withshowSignOutButton
set to true.const amazonPayComponent = checkout .create('amazonpay', { amazonCheckoutSessionId: '...', showSignOutButton: true }) .mount('#amazonpay_signout');