Amazon Pay Component

Add Amazon Pay to an existing Components integration.

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.

This component implements the pre-checkout flow and thus 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. Therefore, you need a public/private key pair. Ask your Adyen contact person to create the key pair and send you the public key.

After that, send the public key to your Amazon Pay contacts, and they will send back publicKeyId from Amazon Pay. Store this value in your company's accountDataType in the Customer Area (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 the `productType` 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 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: 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 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 (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 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. 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 with showSignOutButton set to true.

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

Are you looking for test card numbers?

Would you like to contact support?