Apple Pay Component

Our Apple Pay Component 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 iOS Components integration. The iOS 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 Apple Pay integration:

1. Make sure that you have set up your back end implementation for making API requests.

2. Enable Apple Pay with your own certificate.

Show Apple Pay in your payment form

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

1. Specify in your /paymentMethods request:
   • countryCode: Country where Apple Pay is supported. For example, NL.
   • amount.currency: Any supported currency. For example, EUR.
     
     

2. Decode the /paymentMethods response and find the ApplePayPaymentMethod.

   let paymentMethods = try JSONDecoder().decode(PaymentMethods.self, from: paymentMethodsResponse)
   
   guard let paymentMethod = paymentMethods.paymentMethod(ofType: ApplePayPaymentMethod.self) else {
        // Could not find Apple Pay payment method.
   }

3. Create an instance of APIContext with the following parameters:

   Parameter name	Required	Description
   clientKey		Your client key.
   environment		Use test. When you're ready to accept live payments, change the value to one of our live environments.

   https://docs.adyen.com/payment-methods/wechat-pay/wechat-pay-in-app-payments/ios-component#apicontext-initialization

   APIContext initialization

   // When you're ready to go live, change environment to Environment.live
   // You can also use other environment values described in https://adyen.github.io/adyen-ios/Docs/Structs/Environment.html
   let apiContext = APIContext(environment: Environment.test, clientKey: clientKey)
4. Create the Apple Pay Component:

First create configuration.

// Import this to use the PKPaymentSummaryItem class
// See documentation https://developer.apple.com/documentation/passkit/pkpaymentsummaryitem
import PassKit
//Submit the payment details here, including the amount, currency, and country code
let payment = Payment(amount: Amount(value: 15000, currencyCode: "EUR"),
                      countryCode: "NL")
// A set of line items that explain recurring payments, additional charges, and discounts.
// See Apple Pay documentation for sample values.
// https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916120-lineitems      
let summaryItems = [
                     PKPaymentSummaryItem(label: "Jeans", amount: 98.99, type: .final),
                     PKPaymentSummaryItem(label: "Bag", amount: 55.46, type: .final),
                     PKPaymentSummaryItem(label: "Discount", amount: -4.45, type: .final),
                     PKPaymentSummaryItem(label: "Total", amount: 150, type: .final)
                   ]
// See Apple Pay documentation https://docs.adyen.com/payment-methods/apple-pay/enable-apple-pay#create-merchant-identifier                 
let merchantIdentifier = "merchant.com.{YOUR_MERCHANT_IDENTIFIER}"
let applePayConfiguration = ApplePayComponent.Configuration(summaryItems: summaryItems,
                                                            merchantIdentifier: merchantIdentifier)

Then create the Apple Pay Component.

let component = try ApplePayComponent(paymentMethod: paymentMethod,
                                      apiContext: apiContext,
                                      payment: payment,
                                      configuration: applePayConfiguration)

applePayComponent.delegate = self
present(applePayComponent.viewController, animated: true)

5. Present the Apple Pay Component. It is important that the component is presented after the user taps on a PKPaymentButton as per Apple's guidelines

   /// Configure the PKPaymentButton for your needs
   let button = PKPaymentButton(paymentButtonType: .buy, paymentButtonStyle: .black)
   button.addTarget(self, action: #selector(presentComponent), for: .touchUpInside)
   ...
   @objc func presentComponent() {
   present(applePayComponent.viewController, animated: true)
   }

Make a payment

When the shopper proceeds to pay, the Component invokes the didSubmit method containing the data.paymentMethod from the PaymentComponentDelegate. On the app, Apple Pay shows a loading page and waits to be informed when the payment has been completed.

1. Pass the data.paymentMethod to your server.

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

   • paymentMethod: The data.paymentMethod from your client app.
   https://docs.adyen.com/payment-methods/apple-pay/ios-component#apple-pay-ios-component

   • 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:data.paymentMethod from didSubmit}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.."
     },
     :returnUrl => "my-app://",
     :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");
       paymentsRequest.setReturnUrl("my-app://");
   
       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.."
     ),
     "returnUrl" => "my-app://",
     "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..'
      },
      'returnUrl': 'my-app://',
      '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,
     ReturnUrl = @"my-app://",
     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,
       returnUrl: "my-app://"
   }).then(res => res);

   The response contains the result of the payment.

   https://docs.adyen.com/payment-methods/apple-pay/ios-component#-payments-response

   /payments response

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

Present the payment result

Get the payment result from the resultCode that you receive in the /payments response. Because Apple Pay shows a loading page on the app, you need to call the finalizeIfNeeded class to inform Apple Pay that the payment has been completed, and of the payment result.

1. Determine the result from the resultCode.

   The resultCode values you can receive for Apple Pay are:

   resultCode	Description	Action to take
   Authorised	The payment was successful.	Call finalizeIfNeeded(with: true).
   Refused	The payment was refused by the shopper's bank.	Call finalizeIfNeeded(with: false). Ask the shopper to try the payment again using a different payment method.

2. Call the finalizeIfNeeded class and pass the payment result.

   // Set to true if the payment was successful
   component.finalizeIfNeeded(with: true)

   Depending on the values you pass, Apple Pay shows the following on the app:

   • true: Apple Pay informs the shopper that the payment was successful.
   • false: Apple Pay informs the shopper that the payment failed.
     
     

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

See also