Our Web Drop-in renders Amazon Pay in your payment form. When clicking the Amazon Pay button, the component redirects the shopper to an Amazon Pay hosted page where they select the details of the purchase before reviewing and confirming the order. This is supported from Web Drop-in 4.1.0.
Requirements
Requirement | Description |
---|---|
Integration type | Make sure that you have built your Web Drop-in integration. |
Setup steps | Before you begin, add Amazon Pay in your test Customer Area. |
Register for Amazon Pay
Sign up for a 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 locations: 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.
- US Registration - For merchants with a legal entity in the United States.
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 and give information to Adyen
Amazon Pay uses asymmetric encryption to secure communication. Therefore, you need a public/private key pair.
To set this up, you must have one of the following user roles.
- Merchant admin
- Manage API Credentials
- Log in to your Customer Area and select the merchant account you want to set up Amazon Pay for.
- Select Developers > API credentials. Select the web service user that you will use for Amazon Pay transactions.
- In Wallet payment methods > Amazon Pay certificate, select + Add.
- Select Generate key pair.
- Copy the the public key and send it to your Amazon Pay contact.
- Receive the
publicKeyId
from your Amazon Pay contact. - Send the following to our Support Team:
publicKeyId
amazonMerchantId
: You can find this in your Amazon Seller Central or ask your Amazon Pay contact for it.amazonStoreId
: You can find this in your Amazon Seller Central or ask your Amazon Pay contact for it.
We configure Amazon Pay for you after receiving your information.
Your Amazon publicKeyId
is unique to a single web service user. You cannot use the same publicKeyId
for multiple web service users.
Import resources for v6
If you are using Web Drop-in v6, import the resources you need for Amazon Pay:
import { AdyenCheckout, AmazonPay} from '@adyen/adyen-web'
Show Amazon Pay in your payment page
After you have finished configuring Amazon Pay, you can show the Amazon Pay button in your payment form:
- Make a /paymentMethods request with one of the supported combinations of countryCode and amount.currency.
- When creating an instance of Drop-in, make sure you are adding an
amount
object containing the currency and value of the payment, in minor units.
When the shopper clicks the Amazon Pay button, they are redirected to the Amazon website to log in and select the payment details.
Drop-in configuration
When creating an instance of Drop-in, you can also:
- Configure the appearance of the Amazon Pay button.
- Change
productType
. - Include additional data, such as address and merchant metadata.
Parameter | Description | Default |
---|---|---|
buttonColor |
Color of the Amazon Pay button. Supported values: Gold, LightGray, and DarkGray. | Gold |
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. Do not set this parameter if you are selling digital goods. In this case, set the productType parameter to PayOnly. |
{} |
environment |
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 shopper'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 shopper's Amazon wallet. Select this product type if you do not need the shopper's shipping details, as you are selling digital goods. |
PayAndShip |
publicKeyId |
The publicKeyId from Step 3. |
|
returnUrl |
||
storeId |
Retrieve this value from Amazon Pay Integration Central. | |
chargePermissionType |
The type of charge permission requested. Supported values: OneTime — for a single payment. Recurring — for recurring payments. |
OneTime |
recurringMetadata
|
How often the shopper will be charged using a recurring charge permission, for example monthly or yearly. Required for payments with chargePermissionType Recurring. Specify a frequency even if you expect ad hoc charges. See Amazon Pay documentation more information. |
Here's an example of the Amazon Pay Drop-in configuration for a payment of USD 30 once a month:
const dropin = checkout
.create('dropin', {
// ...
paymentMethodsConfiguration: {
amazonpay: { // Optional configuration for Amazon Pay
productType: 'PayAndShip',
merchantMetadata: {
merchantReferenceId: 'Merchant-order-123',
merchantStoreName: 'MyStore',
noteToBuyer: 'Thank you for your order'
},
chargePermissionType: 'Recurring', // For a recurring payment
recurringMetadata: { // For a payment that happens once a month
frequency: {
unit: 'Month',
value: '1'
},
amount: {
amount: '30'
currencyCode: 'USD'
}
},
addressDetails: {
name: 'Simon Hopper',
addressLine1: 'Broadway 8-10',
city: 'London',
postalCode: 'SW1H 0BG',
countryCode: 'GB',
phoneNumber: '+44 203 936 4029'
},
environment: 'test',
returnUrl: 'https://example.com/process_payment'
}
}
})
.mount('#dropin');
Handle the redirect
When the shopper confirms the payment, they are redirected back to the returnUrl
with the amazonCheckoutSessionId
attached to the URL. Use the amazonCheckoutSessionId
to create an instance of the Amazon Pay Component to make the actual 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 shopper 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 a value for theonSubmit
parameter. The function should accept thestate.data
object from the Drop-in as an input, and trigger the backend function that 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 (3D Secure / 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
amazonCheckoutSessionId
. Hide the Order button by settingshowOrderButton
to false. 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 astate.data
object. Pass the object to the server to make a payment and parse the result of the payment.
Make a payment
From your server, make a /payments request, specifying the following parameters:
paymentMethod
: Thestate.data.paymentMethod
from theonSubmit
event from your front end.returnUrl
: The URL where the shopper will be redirected back to after completing the payment. The URL should include the protocol:http://
orhttps://
. For example,https://your-company.com/checkout/
. You can also include your own additional query parameters, for example, shopper ID or order reference number.