Apple Pay Drop-in integration

Our Web Drop-in renders Apple Pay in your payment form. When the shopper selects Apple Pay, Drop-in invokes the payment sheet, where shoppers select the card they want to use, provide contact details and shipping address, and then authenticate the payment through Face ID or Touch ID.

Before you begin

This page explains how to add Apple 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.

You can either use Adyen's Apple Pay certificate which makes it quicker to set up Apple Pay, or you can also use your own Apple Developer account and certificate which requires extra configuration steps:

Show Apple Pay in your payment form

After you have finished enabling Apple Pay, you can show Apple Pay in your payment form:

1. Drop-in uses the countryCode and the amount.currency from your /paymentMethods request to show the available payment methods to your shopper. From your server, make a /paymentMethods request specifying:

   • countryCode: Country where Apple Pay is supported. For example, NL.
   • amount.currency: Any supported currency. For example, EUR.
2. When creating an instance of Drop-in, add the required Apple Pay configuration:

• Use Adyen's Apple Pay certificate
• Use your own Apple Pay certificate

Parameter name	Required	Description
amount		The currency and value of the payment, in minor units.
countryCode		The two-letter country code of your merchant account.
onSubmit		Event called after shopper authorizes the payment with Apple Pay.

You can also include optional configuration, for example to customize the appearance of the Apple Pay button.

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

Configuration

const dropin = checkout
  .create('dropin', {
    paymentMethodsConfiguration: {
      // Required configuration for Apple Pay
      applepay: {
        amount: {
            value: 1000,
            currency: "EUR"
        },
        countryCode: "DE",
        onSubmit: (state) => {
          // Call your server to make `/payments` request
          makePayment(state.data)
            .then(response => {
              // Your function to show the final result to the shopper
              showFinalResult(response);
            })
            .catch(error => {
              throw Error(error);
            });
        }
      }
    },
  ...
})
.mount('#dropin');

Parameter name	Required	Description
amount		The currency and value of the payment, in minor units.
countryCode		The two-letter country code of your merchant account.
configuration	Required if you want to offer Apple Pay through Pay by Link or if you are using Drop-in v3.17.0 or earlier	Object that specifies the merchantName (name that will be displayed on the form) and your Apple merchantId. When you use your own certificate and want to offer Pay by Link, the merchantId is required. Both merchantId and merchantName are required if you use Drop-in v.3.17.0 or earlier. In v3.17.1 and later, Drop-in takes the values from the paymentMethodsResponse in the AdyenCheckout instance configuration.
onSubmit		Event called after shopper authorizes the payment with Apple Pay.
onValidateMerchant		Required for passing the applePayToken to Drop-in. For more information, see Apple Pay documentation.

You can also include optional configuration, for example to customize the appearance of the Apple Pay button.

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

Configuration

const dropin = checkout
  .create('dropin', {
    paymentMethodsConfiguration: {
      // Required configuration for Apple Pay
      applepay: {
        amount: {
            value: 1000,
            currency: "EUR"
        },
        countryCode: "DE",
        // configuration object is required on Drop-in v3.17.0 and earlier.
        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
          merchantId: 'adyen.test.merchant'
        },
        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();
            });
        },
        onSubmit: (state) => {
          // Call your server to make `/payments` request
          makePayment(state.data)
            .then(response => {
              // Your function to show the final result to the shopper
              showFinalResult(response);
            })
            .catch(error => {
              throw Error(error);
            });
        }
      }
    },
  ...
})
.mount('#dropin');

Optional Drop-in configuration

When creating an instance of Drop-in, you can also:

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

Event	Required	Description
onChange or onSubmit		Called after the shopper authorizes the payment with Apple Pay. The first parameter (state) of this function contains all the necessary data to make a payment using the /payments API.
onClick(resolve,reject)		Called when the shopper clicks the Apple Pay button. Call resolve() to continue or reject() stop the payment flow. You must create the Apple Pay session from a user gesture handler.
onValidateMerchant		Called when the payment sheet is displayed.
onAuthorized		Also called after the shopper authorizes the payment with Apple Pay. This contains all the raw event from Apple Pay.
onPaymentMethodSelected		Called when the shopper selects a new payment method.
onShippingContactSelected		Called when the shopper selects a shipping contact.
onShippingMethodSelected		Called when the shopper selects a shipping method.

  const dropin = checkout
    .create('dropin', {
      paymentMethodsConfiguration: {
        applepay: {
          ...
          onChange: (state) => {},
          onSubmit: (state) => {},
          onValidateMerchant: (resolve, reject, validationURL) => {
          // Calls your server with validationURL, which then requests a payment session from Apple Pay servers.
         // Your server then receives the session and calls resolve(MERCHANTSESSION) or reject() to complete merchant validation.
          },

          onAuthorized: (resolve, reject, event) => {},

          /*
          * @param resolve(ApplePayPaymentMethodUpdate update) Completes the selection of a payment method with an update. This will call https://developer.apple.com/documentation/apple_pay_on_the_web /applepaysession/1777995-completepaymentmethodselection.
          * @param reject(ApplePayPaymentMethodUpdate update)
          * @param event The event parameter contains the paymentMethod attribute.
          */
          onPaymentMethodSelected: (resolve, reject, event) => {},

          /*
          * @param resolve(ApplePayShippingContactUpdate update) Completes the selection of a shipping contact with an update. This will call https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778008-completeshippingcontactselection.
          * @param reject(ApplePayShippingContactUpdate update)
          * @param event The event parameter contains the shippingContact attribute.
          */
          onShippingContactSelected: (resolve, reject, event) => {},

          /*
          * @param resolve(ApplePayShippingMethodUpdate update) Completes the selection of a shipping method with an update. Will call https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778024-completeshippingmethodselection
          * @param reject(ApplePayShippingMethodUpdate update)
          * @param event The event parameter contains the shippingMethod attribute.
          */
          onShippingMethodSelected: (resolve, reject, event) => {}
          ...

Make a payment

When the shopper selects to pay, Drop-in calls the onSubmit event, which contains a state.data.

1. Pass the state.data to your server.

2. From your server, make a /payments request, specifying:

   • paymentMethod: The state.data.paymentMethod from the onSubmit event from your front end.
   https://docs.adyen.com/payment-methods/apple-pay/web-drop-in#apple-pay-api

   • curl
   • Ruby
   • Java
   • PHP
   • Python
   • C#
   • NodeJS

   curl Ruby Java PHP Python C# NodeJS

   curl https://checkout-test.adyen.com/v67/payments \
   -H "x-API-key: YOUR_X-API-KEY" \
   -H "content-type: application/json" \
   -d '{
     "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
     "reference":"YOUR_ORDER_NUMBER",
     "amount":{
       "currency":"EUR",
       "value":1000
     },
     "{hint:state.data.paymentMethod from onSubmit}paymentMethod{/hint}":{
       "type":"applepay",
       "applePayToken": "QWIwMmI0YzAhQlFBQkFnQjMv.."
     }
   }'

   # 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 => "applepay",
       :applePayToken => "QWIwMmI0YzAhQlFBQkFnQjMv.."
     },
     :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(15000L);
       paymentsRequest.setAmount(amount);
   
       ApplePayDetails applePayDetails = new ApplePayDetails();
   
       applePayDetails.setApplePayToken(state.data.paymentMethod.applePayToken);
       paymentsRequest.setPaymentMethod(applePayDetails);
   
       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" => "applepay",
       "applePayToken" => "QWIwMmI0YzAhQlFBQkFnQjMv.."
     ),
     "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': 'applepay',
         'applePayToken': 'QWIwMmI0YzAhQlFBQkFnQjMv..'
      },
      '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 = "applepay",
     ApplePayToken = "QWIwMmI0YzAhQlFBQkFnQjMv.."
   };
   var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
   {
     Reference = "YOUR_ORDER_NUMBER",
     Amount = amount,
     MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
     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: 'applepay',
           applePayToken: 'QWIwMmI0YzAhQlFBQkFnQjMv..'
       },
       reference: "YOUR_ORDER_NUMBER",
       merchantAccount: config.merchantAccount
   }).then(res => res);

   The response contains the result of the payment.

   https://docs.adyen.com/payment-methods/apple-pay/web-drop-in#-payments-response

   /payments response

   {
     "pspReference": "881539337151149C",
     "resultCode": "Authorised"
   }

Present the payment result

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

The resultCode values you can receive for Apple Pay are:

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