{"title":"Card Component integration","category":"default","creationDate":1776961628,"content":"

This page explains how to add cards to your existing React Native Components integration.<\/p>\n

Requirements<\/h2>\n\n\n\n\n\n\n
Requirement<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Integration type<\/strong><\/td>\nMake sure that you have built your React Native Components integration<\/a>. <\/td>\n<\/tr>\n
Setup steps<\/strong><\/td>\nBefore you begin, add cards in your test Customer Area<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

API reference<\/h2>\n

You do not need to send additional fields for cards. See the \/payments<\/a> endpoint API reference for the optional fields you can send.<\/p>\n

You can send additional fields for specific use cases. For example showing debit and credit cards separately<\/a>.<\/p>\n

Components configuration<\/h2>\n

There is no required cards specific integration for Components.<\/p>\n

Optional configuration<\/h3>\n

You can optionally include the following properties when you configure AdyenCheckout<\/code><\/a>:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter name<\/th>\nDescription<\/th>\nDefault<\/th>\n<\/tr>\n<\/thead>\n
holderNameRequired<\/code><\/td>\nSet to true<\/strong> to show the field for the cardholder name.<\/td>\nfalse<\/strong><\/td>\n<\/tr>\n
hideCvc<\/code><\/td>\nSet to true<\/strong> to hide the security code (CVV\/CVC) field.<\/td>\nfalse<\/strong><\/td>\n<\/tr>\n
showStorePaymentField<\/code><\/td>\nSet to false<\/strong> to hide the option to store card details<\/a>.<\/td>\ntrue<\/strong><\/td>\n<\/tr>\n
hideCvcStoredCard<\/code><\/td>\nSet to true<\/strong> to hide the security code (CVV\/CVC) code field for stored cards.<\/td>\nfalse<\/strong><\/td>\n<\/tr>\n
addressVisibility<\/code><\/td>\nSets which billing address fields to show in the payment form. Possible values:
- none<\/strong>: do not show billing address fields.
- postal<\/strong>: show only the postal code field.
- full<\/strong>: show all address fields.
- lookup<\/strong>: suggest addresses to the shopper when they enter data into address input. If using lookup<\/strong>, you must also implement the onUpdateAddress<\/code> and onConfirmAddress<\/code> callbacks.<\/td>\n		none<\/strong><\/td>\n<\/tr>\n
supported<\/code><\/td>\nList of supported card types<\/a> that you recognize.<\/td>\nThe list of card brands<\/code> from the \/paymentMethods<\/a> response.<\/td>\n<\/tr>\n
allowedAddressCountryCodes<\/code><\/td>\nSpecify the ISO 3166 country codes<\/a> if you only support payments from cards issued in specific countries.<\/td>\n<\/td>\n<\/tr>\n
kcpVisibility<\/code><\/td>\nFor Korean cards, sets if security fields show in the payment form. Possible values:
- show<\/strong>: show the fields.
- hide<\/strong>: do not show the fields.<\/td>\n		hide<\/strong><\/td>\n<\/tr>\n
socialSecurity<\/code><\/td>\nFor Brazilian cards, sets if the CPF<\/a>\/CNPJ<\/a> social security number field shows in the payment form. Possible values:
- show<\/strong>: show the field.
- hide<\/strong>: do not show the field.<\/td>\n		hide<\/strong><\/td>\n<\/tr>\n
onUpdateAddress: (prompt, lookup) => {}<\/code><\/td>\nIf addressVisibility<\/code> is set to lookup<\/strong>, the callback that provides lookup<\/code> results for the shopper's prompt<\/code>.<\/td>\n<\/td>\n<\/tr>\n
onConfirmAddress: (address, lookup) => {}<\/code><\/td>\nIf addressVisibility<\/code> is set to lookup<\/strong>, the callback to confirm the address<\/code> selected by the shopper to lookup<\/code>.<\/td>\n<\/td>\n<\/tr>\n
onBinLookup<\/code><\/td>\nCalled when the shopper enters the card number. Requires a minimum of 11 digits of the card number to be entered. Returns the following
  • brand<\/code>: The brands on the card.<\/li><\/ul><\/td>\n
<\/td>\n<\/tr>\n
onBinValue<\/code><\/td>\nCalled when the shopper enters the card number. Returns the following <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Create a way, like a button, for AdyenCheckout<\/code> to call the start function.<\/p>\n

\n <\/code-sample>\n<\/div>\n

Showing debit and credit cards separately<\/h2>\n

Supported from Checkout API v53 or later.<\/p>\n

When you make a \/paymentMethods<\/a> request from your server, include:<\/p>\n