Apple Pay Drop-in integration

On this page, you can find additional configuration for adding Apple Pay to your Drop-in integration.

Before you begin

This page assumes you've already:

• Built a Drop-in integration.
• Added Apple Pay in your Customer Area.

Set up Apple Pay

You don't need to create your own Apple Pay certificate for your web integration because you can process payments through Adyen's Apple Pay certificate. The benefits of using Adyen's Apple Pay certificate are:

• A faster way to add Apple Pay to your integration.
• There is less configuration required.
• You get access to new features.
• Apple Pay enabled by default for your Pay by Link integration, if you have one.

API reference

You don't need to send additional fields for Apple Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:

• /sessions: This is the default with Drop-in v5.0.0 or later.
• /payments: If you implemented an advanced use case, or integrated Drop-in before v5.0.0.

If you run into an error, refer to Handle Apple Pay errors.

Drop-in configuration

Select which endpoint you're integrating:

/sessions /payments

/sessions /payments

This is the default with Components v5.0.0 or later. If you are using /sessions together with Adyen's Apple Pay certificate, you don't need to add any additional configuration for Apple Pay. If using your own Apple Pay certificate, you need to include:

• onValidateMerchant: Required for displaying the Apple Pay payment sheet. For more information, see Apple Pay documentation.

The following example shows how to configure Drop-in if you're using your own Apple Pay certificate:

Apple Pay configuration

const applePayConfiguration = {
    //onValidateMerchant is required if you're using your own Apple Pay certificate
    onValidateMerchant: (resolve, reject, validationURL) => {
        // Your server uses the validation URL to request a session from the Apple Pay server.
        // Call resolve(MERCHANTSESSION) or reject() to complete merchant validation.
        validateMerchant(validationURL)
            .then(response => {
            // Complete merchant validation with resolve(MERCHANTSESSION) after receiving an opaque merchant session object, MerchantSession
            resolve(response);
            })
            .catch(error => {
            // Complete merchant validation with reject() if any error occurs
            reject();
            });
    }
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#apple-pay-configuration

Include the applePayConfiguration object when creating a configuration object:

AdyenCheckout configuration

const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    applepay: applePayConfiguration
  }
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#-code-adyencheckout-code-configuration

If you implemented an advanced use case, or integrated Components before v5.0.0.

Parameter name	Required	Description
amount.value		The value of the payment, in minor units.
amount.currency		The currency code of the payment.
countryCode		The two-letter country code of your merchant account.
onValidateMerchant	Required if you're using your own Apple Pay certificate.	Required for displaying the Apple Pay payment sheet. For more information, see Apple Pay documentation.
configuration.merchantName	Required for v3.17.0 or earlier	Specifies the name that will be displayed on the form. In v3.17.1 and later, the Component takes the value from the paymentMethodsResponse in the AdyenCheckout instance configuration.
configuration.merchantIdentifier	Required for v3.17.0 or earlier, or if you want to offer Pay by Link	Specifies your Apple merchantId. In v3.17.1 and later, the Component takes the value from the paymentMethodsResponse in the AdyenCheckout instance configuration.
supportedNetworks	Required for v3.19.0 or earlier	Specifies the card networks you support. Use values from Apple Pay documentation. For v3.20.0 or later, the supported networks are configured automatically based on your Adyen Merchant account settings, but you can override them here.

Use Adyen's Apple Pay certificate

The following example shows how to configure Drop-in if you're Adyen's Apple Pay certificate:

Apple Pay configuration

const applePayConfiguration = {
    amount: {
        value: 1000,
        currency: "EUR"
    },
    countryCode: "DE"
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#apple-pay-configuration

Include the applePayConfiguration object when creating a configuration object:

AdyenCheckout configuration

const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    applepay: applePayConfiguration
  }
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#-code-adyencheckout-code-configuration

Use your own Apple Pay certificate

The following example shows how to configure Drop-in if you're using your own Apple Pay certificate and Drop-in v3.17.0 or earlier.

Apple Pay configuration

const applePayConfiguration = {
    amount: {
        value: 1000,
        currency: "EUR"
    },
    //onValidateMerchant is required if you're using your own Apple Pay certificate
    onValidateMerchant: (resolve, reject, validationURL) => {
        // Your server uses the validation URL to request a session from the Apple Pay server.
        // Call resolve(MERCHANTSESSION) or reject() to complete merchant validation.
        validateMerchant(validationURL)
            .then(response => {
            // Complete merchant validation with resolve(MERCHANTSESSION) after receiving an opaque merchant session object, MerchantSession
            resolve(response);
            })
            .catch(error => {
            // Complete merchant validation with reject() if any error occurs
            reject();
            });
    },
    configuration: {
        // Name to be displayed on the form.
        merchantName: "Adyen Test merchant",
        // Your Apple merchant identifier as described in https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequest/2951611-merchantidentifier
        merchantIdentifier: "adyen.test.merchant"
    },
    // Required for v3.19.0 or earlier. The networks you support. Use the values from https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916122-supportednetworks
    supportedNetworks: [amex, discover, visa]
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#apple-pay-configuration

Include the applePayConfiguration object when creating a configuration object:

AdyenCheckout configuration

const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    applepay: applePayConfiguration
  }
};

https://docs.adyen.com/payment-methods/apple-pay/web-component#-code-adyencheckout-code-configuration

Optional configuration

This optional configuration parameter is only accepted on the dropin instance.

Instant payment button configuration

Use the instantPaymentTypes object to display the Apple Pay payment button at the top of the list of available payment methods. The sample below shows how to do this:

const dropin = checkout.create('dropin', {
    //... other optional configuration
    instantPaymentTypes: ['applepay']
}).mount('#dropin-container');

Optional Apple Pay configuration

You can do the following:

• Configure the appearance of the Apple Pay button.
• Include additional data such as transaction information, fields for billing and shipping contact information.
• Add logic for specific events on your payment form.

Button configuration

Payment request data

Events

The following event handlers are supported for Apple Pay. Select the event handler names to see the related Apple Pay documentation.

Recurring payments

To make recurring Apple Pay payments, you first need to create a shopper token and then make subsequent recurring transactions with the token.

Refer to Tokenization for more information and detailed instructions.

Test and go live

Use Apple's test card numbers to test your integration.

For a full list of test cards and instructions how to add these to your test device, see Sandbox testing on Apple's Developer website.

Check the status of an Apple Pay test payment in your Customer Area > Transactions >  Payments.

Going live

To process live Apple Pay payments, your API credential needs to have the API Clientside Encryption Payments role. You can check this in your live Customer Area or ask your Admin user to verify.

Make sure you follow Apple's guidelines on:

• Designing your Apple Pay integration.

See also