--- title: "Card Component integration" description: "Add cards to an existing Components integration." url: "https://docs.adyen.com/payment-methods/cards/react-native-component" source_url: "https://docs.adyen.com/payment-methods/cards/react-native-component.md" canonical: "https://docs.adyen.com/payment-methods/cards/react-native-component" last_modified: "2026-05-24T12:54:31+02:00" language: "en" --- # Card Component integration Add cards to an existing Components integration. [View source](/payment-methods/cards/react-native-component.md) This page explains how to add cards to your existing React Native Components integration. ## Requirements | Requirement | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------ | | **Integration type** | Make sure that you have built your [React Native Components integration](/online-payments/build-your-integration). | | **Setup steps** | Before you begin, [add cards in your test Customer Area](/payment-methods/add-payment-methods). | ## API reference You do not need to send additional fields for cards. See the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) endpoint API reference for the optional fields you can send. You can send additional fields for specific use cases. For example [showing debit and credit cards separately](#showing-debit-and-credit-cards-separately). ## Components configuration There is no required cards specific integration for Components. ### Optional configuration You can optionally include the following properties when you [configure `AdyenCheckout`](/online-payments//build-your-integration/advanced-flow?platform=React%20Native\&integration=Components\&version=latest#configure): | Parameter name | Description | Default | | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `holderNameRequired` | Set to **true** to show the field for the cardholder name. | **false** | | `hideCvc` | Set to **true** to hide the security code (CVV/CVC) field. | **false** | | `showStorePaymentField` | Set to **false** to hide the option to [store card details](#recurring-payments). | **true** | | `hideCvcStoredCard` | Set to **true** to hide the security code (CVV/CVC) code field for stored cards. | **false** | | `addressVisibility` | Sets which billing address fields to show in the payment form. Possible values: - **none**: do not show billing address fields. - **postal**: show only the postal code field. - **full**: show all address fields. - **lookup**: suggest addresses to the shopper when they enter data into address input. If using **lookup**, you must also implement the `onUpdateAddress` and `onConfirmAddress` callbacks. | **none** | | `supported` | List of [supported card types](/payment-methods/cards/custom-card-integration#supported-card-types) that you recognize. | The list of card `brands` from the [/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) response. | | `allowedAddressCountryCodes` | 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. | | | `kcpVisibility` | For Korean cards, sets if security fields show in the payment form. Possible values: - **show**: show the fields. - **hide**: do not show the fields. | **hide** | | `socialSecurity` | For Brazilian cards, sets if the [CPF](https://en.wikipedia.org/wiki/CPF_number)/[CNPJ](https://en.wikipedia.org/wiki/CNPJ) social security number field shows in the payment form. Possible values: - **show**: show the field. - **hide**: do not show the field. | **hide** | | `onUpdateAddress: (prompt, lookup) => {}` | If `addressVisibility` is set to **lookup**, the callback that provides `lookup` results for the shopper's `prompt`. | | | `onConfirmAddress: (address, lookup) => {}` | If `addressVisibility` is set to **lookup**, the callback to confirm the `address` selected by the shopper to `lookup`. | | | `onBinLookup` | Called when the shopper enters the card number. Requires a minimum of 11 digits of the card number to be entered. Returns the following- `brand`: The brands on the card. | | | `onBinValue` | Called when the shopper enters the card number. Returns the following- `binValue`: The first 6 digits of the card number.Requires the [client key](/development-resources/client-side-authentication/migrate-from-origin-key-to-client-key) for client-side authentication. | | 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.