---
title: "Apple Pay Component integration"
description: "Add Apple Pay to an existing Components integration."
url: "https://docs.adyen.com/payment-methods/apple-pay/react-native-component"
source_url: "https://docs.adyen.com/payment-methods/apple-pay/react-native-component.md"
canonical: "https://docs.adyen.com/payment-methods/apple-pay/react-native-component"
last_modified: "2026-05-24T12:54:31+02:00"
language: "en"
---

# Apple Pay Component integration

Add Apple Pay to an existing Components integration.

[View source](/payment-methods/apple-pay/react-native-component.md)

This page explains how to add Apple Pay to your existing React-Native Components integration.

## Requirements

| Requirement                                                               | Description                                                                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type**                                                      | Make sure that you have built an Advanced flow [React-Native Components integration](/online-payments/build-your-integration/advanced-flow?platform=React-Native\&integration=Components).                                                                                             |
| **[API credential roles](/development-resources/api-credentials/roles/)** | To [process live Apple Pay payments](#going-live) make sure that you have the following role- **API Clientside Encryption Payments role**.                                                                                                                                             |
| **Setup steps**                                                           | Before you begin, make sure that you have:- [Set up Apple Pay with your own certificate](/payment-methods/apple-pay/apple-pay-certificate/ios).
- [Added Apple Pay in your Customer Area](/payment-methods/apple-pay/apple-pay-certificate/ios#add-apple-pay-as-a-payment-method-ios). |

## API reference

You do not need to send additional fields for Apple Pay. See the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) endpoint API reference for the optional fields you can send.

If you run into an error, refer to [Handle Apple Pay errors](/payment-methods/apple-pay/handle-apple-pay-errors).

## Component configuration

When you [create configuration object for `AdyenCheckout`](/online-payments/react-native/components#configure-adyen-checkout), you must add additional properties for Apple Pay.

| Property       | Description                                                                                                                                     |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `merchantID`   | Your Apple Pay [merchant identifier](/payment-methods/apple-pay/apple-pay-certificate/ios#create-merchant-identifier).                          |
| `merchantName` | Your merchant name. This is used to generate [`PKPaymentSummaryItem` ](https://developer.apple.com/documentation/passkit/pkpaymentsummaryitem). |

**Configure Apple Pay**

```js
const configuration: Configuration = {
  environment: 'test', // When you're ready to accept real payments, change the value to a suitable live environment.
  clientKey: 'YOUR_CLIENT_KEY',
  returnUrl: 'your-app://',
  countryCode: 'NL',
  amount: {
      currency: 'EUR',
      value: 1000
  },
  applepay: {
    merchantID: 'APPLE_PAY_MERCHANT_ID',
    merchantName: 'APPLE_PAY_MERCHANT_NAME'
  }
};
```

### Optional configuration

You can optionally include the following properties when you [configure `AdyenCheckout`](/online-payments/react-native/components#configure):

| Property                                                                                                                                                       | Description                                                                                                                                                                                                                                                                                      |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `allowOnboarding`                                                                                                                                              | Set to **true** to let the shopper add new cards to their Apple Pay wallet if there are none or if their cards are not supported for the payment. By default this is set to **false**, and Apple Pay isn't shown as an available payment method if there are no cards in their Apple Pay wallet. |
| [`summaryItems`](https://developer.apple.com/documentation/passkit_apple_pay_and_wallet/pkpaymentrequest/1619231-paymentsummaryitems)                          | An array of the items included in the purchase that summarize the payment amount. The last item must have the same value as the `amount` you send in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request.                                                |
| [`requiredShippingContactFields`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2216121-requiredshippingcontactfields) | Shipping information fields that you require from the shopper to fulfill the order. Refer to Apple Pay documentation for sample values.                                                                                                                                                          |
| [`requiredBillingContactFields`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2216120-requiredbillingcontactfields)   | Billing information fields that you require from the shopper to process the transaction. Refer to Apple Pay documentation for sample values.                                                                                                                                                     |
| [`billingContact`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916125-billingcontact)                               | A prefilled billing address.                                                                                                                                                                                                                                                                     |
| [`shippingContact`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916127-shippingcontact)                             | A prefilled shipping address.                                                                                                                                                                                                                                                                    |
| [`shippingType`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916128-shippingtype)                                   | The type of shipping displayed, for example **Pick Up**, **Ship To**, or **Deliver To**. This is localized. Default: **PKShippingTypeShipping** = **.shipping**.                                                                                                                                 |
| [`supportedCountries`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2928612-supportedcountries)                       | Specify the [ISO 3166 country codes](https://www.iso.org/iso-3166-country-codes.html) if you only support payments from cards issued in specific countries.                                                                                                                                      |
| [`shippingMethods`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingmethod)                                                     | List of available methods for shipping physical goods. Refer to Apple Pay documentation for sample values.                                                                                                                                                                                       |
| `recurringPaymentRequest`                                                                                                                                      | Required for [recurring payments](#recurring-payments) to specify that the payment is a recurring payment. Corresponds to [`PKRecurringPaymentRequest` ](https://developer.apple.com/documentation/passkit_apple_pay_and_wallet/pkrecurringpaymentrequest).                                      |

Create a way, like a button, for `AdyenCheckout` to call the start function.

**Create a way to start the Component**

```javascript
import { useAdyenCheckout } from '@adyen/react-native';

// Set your View to use AdyenCheckout as the context.
const YourCheckoutView = () => {
const { start } = useAdyenCheckout();

    return (
    // Create a way, like a checkout button, that starts the Component.
        <Button
            title="Checkout"
            // Pass in the paymentMethod.type from the /paymentMethods response.
            onPress={() => { start('applepay'); }} />
    );
};
```

## Recurring payments

To enable recurring payments, you must include `recurringPaymentRequest` [when configuring Apple Pay](#optional-configuration), and include the [recurring payment properties](#recurring-payment-props).

To make recurring Apple Pay payments, you have to [create a token](/online-payments/tokenization/create-tokens) and then [make subsequent recurring transactions](/online-payments/tokenization/make-token-payments) with the token.

### Recurring payment properties

In the `recurringPaymentRequest` property, include the following:

| Property                                                                                                                                              | Required                                                                                    | Description                                                                                                                                                          |
| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`paymentDescription`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955956-paymentdescription/)    | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The description of the recurring payment that Apple Pay shows to the user in the payment sheet.                                                                      |
| [`regularBilling`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955957-regularbilling)             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The regular billing cycle for the recurring payment, including start and end dates, an interval, and an interval count.                                              |
| [`managementURL`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955955-managementurl)               | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | A URL to a web page where the user can update or delete the payment method for the recurring payment.                                                                |
| [`trialBilling`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955959-trialbilling)                 |                                                                                             | If the recurring payment has a trial period, the trial billing cycle for the recurring payment.                                                                      |
| [`tokenNotificationURL`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955958-tokennotificationurl) |                                                                                             | A URL you provide for receiving lifecycle updates from Apple Pay about the merchant token, for example, when the card issuer or the user deletes the merchant token. |
| [`billingAgreement`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest/3955954-billingagreement)         |                                                                                             | A localized billing agreement that the payment sheet shows to the user before the user authorizes the payment.                                                       |

For example:

**Configure Apple Pay for recurring payments**

```js
const configuration = {
  environment: 'test',
  clientKey: 'YOUR_CLIENT_KEY',
  // Your other configurations...
  applepay: {
      merchantID: 'YOUR_APPLE_PAY_MERCHANT_ID',
      merchantName: 'YOUR_APPLE_PAY_MERCHANT_NAME',
      // Your other optional Apple Pay configurations...
      recurringPaymentRequest: {
          description: 'My subscription'
          regularBilling: {
              amount: 1000,
              label: 'Monthly subscription payment',
              intervalCount: 1,
              intervalUnit: 'month',
              startDate: new Date('2025-04-28'),
              },
          managementURL: 'https://my-domain.com/managementURL'
      }
  }
}
```

## 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](https://developer.apple.com/apple-pay/sandbox-testing/) on Apple's Developer website.

Check the status of an Apple Pay test payment in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** >&#x20;**&#xA0;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](https://ca-live.adyen.com/) or ask your Admin user to verify.

[Set up Apple Pay](/payment-methods/apple-pay/apple-pay-certificate/ios) on your Apple Pay Developer account for your live merchant identifier.

## See also

* [Components integration guide](/online-payments/react-native/components)
* [Tokenization](/online-payments/tokenization)
* [Apple Pay error codes](/development-resources/error-codes#apple-pay-error-codes)
* [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)