Pesquisar

Are you looking for test card numbers?

Would you like to contact support?

Atenção, esta página não se encontra disponível em Português
Payment-method icon

Amazon Pay Drop-in

Add Amazon Pay to an existing Drop-in integration.

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 v4.1.0.

Before you begin

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

  1. Make sure that you have set up your back end implementation, and added Drop-in to your payments form.
  2. Add Amazon Pay in your 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

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.
    We will then send you the public key.
  2. Send the public key to your Amazon Pay contacts.
    They will send back a publicKeyId.
  3. Send the publicKeyId to our Support Team, so that they can configure this in your account.

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:

  1. Make a /paymentMethods request with one of the supported combinations of countryCode and amount.currency.
  2. When creating an instance of Drop-in, make sure you're 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.

    Field Description Default
    addressDetails Set addressDetails with the shipping address provided by the shopper, if you are selling physical goods and the productType is PayAndShip. See address formatting and validation for more information on how to pass address data.
    amount required The currency and value of the payment, in minor units. It should match the ledger currency of the Amazon Pay merchant account. Supported values are EUR and GBP. If you went through the EU registration link in step 1 of this guide, use EUR, otherwise use GBP.
    buttonColor Color of the Amazon Pay button. Supported values: Gold, LightGray, DarkGray. Gold
    cancelUrl The URL where the shopper is redirected when cancelling the payment. The URL where the Amazon Pay button is hosted.
    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. Note that supported language(-s) is dependent on the region that your Amazon Pay account was registered in. Supported values: en_GB, de_DE, fr_FR, it_IT, es_ES. en_GB
    merchantMetadata.merchantReferenceId Merchant generated order identifier, shared in Amazon Pay shopper-facing emails.
    merchantMetadata.merchantStoreName Merchant store name. Setting this parameter will override the default value configured in Seller Central (the account management tool for merchants). The store name is shared in shopper communication and in the shopper transaction history on the Amazon Pay website.
    merchantMetadata.noteToBuyer Description of the order that is shared in shopper communication.
    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 are selling physical goods items, shipped to the address coming from the 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 because you are selling digital goods.
    PayOnly
    returnUrl required The URL where the shopper will be redirected back to after they complete the selection of details from the Amazon hosted page. The URL where the Amazon Pay button is hosted.

Here's an example of the Amazon Pay Drop-in configuration:

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'
                },
                amount: {
                    currency: 'EUR',
                    value: '1000'
                },
                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 and make a payment

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.

  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 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>
  2. Define a handleOnSubmit function to be passed to the Component configuration object as a value for the onSubmit parameter. The function should accept the state.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 (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;
          });
    }
  3. Create an instance of the Amazon Pay Component and pass amazonCheckoutSessionId. Hide the Order button by setting showOrderButton to false. 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.

  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');

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