Amazon Pay Component

Our Amazon Pay Web Component allows you to offer Amazon Pay in your checkout flow. 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 on your website.

Before you begin

This page explains how to add Amazon Pay to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your Amazon Pay integration:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. Add Amazon Pay in your test Customer Area.

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 and give information to Adyen

Amazon Pay uses asymmetric encryption to secure communication. Therefore, you need a public/private key pair. To get this set up:

1. Ask our Support Team to generate the key pair.
2. Receive the public key from our Support Team.
3. Send the public key to your Amazon Pay contact.
4. Receive the publicKeyId from your Amazon Pay contact.

5. Send the following to our Support Team:

   • Your merchant accounts to which you want to add Amazon Pay.
   • 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.

Show Amazon Pay in your payment page

To show Amazon Pay Component on your payment page, proceed with the following steps:

1. Create a DOM element for Amazon Pay, placing it where you want the button to be rendered:

   <div id="amazonpay_button-container"></div>

2. 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	required 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 the productType parameter to PayOnly.	{}
   environment	required 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 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 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	required 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.

1. Create a DOM element for the Confirm purchase button, placing it where you want it to be rendered:

   <div id="amazonpay_order-container"></div>

2. Create an instance of the Amazon Pay component, and this time pass the amazonCheckoutSessionId along with the amount object and a returnUrl.

   The returnUrl set at this step should bring the shopper to the page where the logic to execute the payment will take place. This returnUrl 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 to true.

   const amazonPayComponent = checkout
     .create('amazonpay', {
         amount: {
             currency: 'EUR',
             value: 1000
         },
         amazonCheckoutSessionId: '...',
         returnUrl: 'https://example.com/process_payment',
         showChangePaymentDetailsButton: true // Optional
     })
     .mount('#amazonpay_order-container');

3. 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

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.

1. 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>

2. Define a handleOnSubmit function to be passed to the Component configuration object as value for the onSubmit parameter. The function should accept the state.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 (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;
         });
   }

3. Create an instance of the Amazon Pay Component and pass the amazonCheckoutSessionId. This time, hide the Order button. After the Component is mounted, trigger the submit 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. 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: The state.data.paymentMethod from the onSubmit 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:// or https://. For example, https://your-company.com/checkout/. You can also include your own additional query parameters, for example, shopper ID or order reference number.

curl https://checkout-test.adyen.com/v67/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
  "amount": {
    "currency": "EUR",
    "value": 1000
  },
  "reference": "YOUR_ORDER_NUMBER",
  "paymentMethod": {
    "type": "amazonpay"
  },
  "returnUrl": "https://your-company.com/checkout?shopperOrder=12xy..",
  "merchantAccount": "YOUR_MERCHANT_ACCOUNT"
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"

response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "amazonpay"
  },
  :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
    Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
    Checkout checkout = new Checkout(client);

    PaymentsRequest paymentsRequest = new PaymentsRequest();

    String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
    paymentsRequest.setMerchantAccount(merchantAccount);

    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(1000L);
    paymentsRequest.setAmount(amount);

    DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
    paymentMethodDetails.setType("amazonpay");
    paymentsRequest.setPaymentMethod(paymentMethodDetails);

    paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");

    paymentsRequest.setReference("YOUR_ORDER_NUMBER");

    PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "amazonpay"
  ),
  "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'amazonpay'
   },
   'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("EUR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "amazonpay"
};
var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'amazonpay'
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    returnUrl: "adyencheckout://your.package.name"
}).then(res => res);

The /payments response contains:

• pspReference: Adyen's unique reference for the payment.
• resultCode: Authorised

{
   "pspReference": "8815658961765250",
   "resultCode": "Authorised"
}

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
    }
}

Present the payment result

Use the resultCode that you received in the /payments response to present the payment result to your shopper.

The resultCode values you can receive for Amazon Pay are:

If the shopper failed to return to your website or app, wait for notification webhooks to know the outcome of the payment. The notification webhooks you can receive for Amazon Pay are:

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.

1. Create a DOM element for the Sign out button, placing it where you want it to be rendered:

   <div id="amazonpay_signout"></div>

2. Create an instance of the Amazon Pay Component and pass the amazonCheckoutSessionId along with showSignOutButton set to true.

   const amazonPayComponent = checkout
     .create('amazonpay', {
         amazonCheckoutSessionId: '...',
         showSignOutButton: true
     })
     .mount('#amazonpay_signout');

Recurring payments

We support recurring transactions for Amazon Pay. To make recurring payments, you need to:

1. Create a shopper token.
2. Use the token to make future payments for the shopper.

Create a token

To create a token, include in your /payments request:

• storePaymentMethod: true
• shopperReference: Your unique identifier for the shopper.

When the payment has been settled, you receive a webhook notification containing:

• eventCode: RECURRING_CONTRACT
• originalReference: The pspReference of the initial payment.
• pspReference: This is the token that you need to make recurring payments for this shopper.

Make a payment with a token

To make a payment with the token, include in your /payments request:

• paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT.
  You can also get this value by using the /listRecurringDetails endpoint.
• shopperReference: The unique shopper identifier that you specified when creating the token.
• shopperInteraction: ContAuth.
• recurringProcessingModel: Subscription or UnscheduledCardOnFile.

For more information about the shopperInteraction and recurringProcessingModel fields, refer to Recurring transaction types.

curl https://checkout-test.adyen.com/v67/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
       "amount":{
          "value":1000,
          "currency":"EUR"
       },
       "paymentMethod":{
          "type":"amazonpay",
          "storedPaymentMethodId":"7219687191761347"
       },
       "reference":"YOUR_ORDER_NUMBER",
       "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
       "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
       "shopperInteraction":"ContAuth",
       "recurringProcessingModel": "Subscription"
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "amazonpay",
    :storedPaymentMethodId => "7219687191761347"
  },
  :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
  :shopperReference => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT",
  :shopperInteraction => "ContAuth",
  :recurringProcessingModel => "Subscription"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
Checkout checkout = new Checkout(client);

PaymentsRequest paymentsRequest = new PaymentsRequest();

String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
paymentsRequest.setMerchantAccount(merchantAccount);

Amount amount = new Amount();
amount.setCurrency("EUR");
amount.setValue(15000L);
paymentsRequest.setAmount(amount);

DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
paymentMethodDetails.setRecurringDetailReference("7219687191761347");
paymentMethodDetails.setType("amazonpay");
paymentsRequest.setPaymentMethod(paymentMethodDetails);

paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
paymentsRequest.setShopperInteraction("ContAuth");
paymentsRequest.setRecurringProcessingModel("Subscription");

PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "amazonpay",
    "storedPaymentMethodId" => "7219687191761347"
  ),
  "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
  "shopperReference" => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  "recurringProcessingModel" => "Subscription",
  "shopperInteraction" => "ContAuth",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'amazonpay',
      'storedPaymentMethodId': '7219687191761347'
   },
   'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
   'shopperReference': 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j'
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
   'shopperInteraction':'ContAuth',
   'recurringProcessingModel': 'Subscription'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("EUR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "amazonpay",
  StoredPaymentMethodId = "7219687191761347"
};
var paymentsRequest = new Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  RecurringProcessingModel = "Subscription",
  ShopperInteraction = "ContAuth",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'amazonpay',
        storedPaymentMethodId: "7219687191761347"
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
    returnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
    shopperInteraction: "ContAuth",
    recurringProcessingModel: "Subscription"
}).then(res => res);

Test and go live

To test Amazon Pay, you must follow the Amazon Pay testing guidelines.
You can check the status of an Amazon Pay test payment in your Customer Area > Transactions > Payments.

Before you can accept live Amazon Pay payments, you need to submit a request for Amazon Pay in your live Customer Area.

See also