Card Drop-in integration

This page explains how to add cards to your existing React Native Drop-in integration.

Requirements

API reference

You do not need to send additional fields for cards. See the /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.

Drop-in configuration

There is no required cards specific integration for Drop-in.

Optional configuration

You can optionally include the following properties when you configure AdyenCheckout:

Showing debit and credit cards separately

Supported from Checkout API v53 or later.

When you make a /paymentMethods request from your server, include:

• splitCardFundingSources: Set to true.

The following example shows how to do this for a shopper in the Netherlands, making a EUR 47.00 payment.

The response includes the list of available payment methods, with debit and credit cards split into separate objects.

Combo cards

For debit transactions, we highly recommend using 3D Secure and automatic capture due to some issuers' restrictions.

Sweden

To comply with local legislation, set countryCode to SE in your request. Drop-in shows the payment form for Debit Card before the one for Credit Card.

Card brand recognition

When the shopper is entering their card details, Drop-in tries to recognize the card brand. When successful, Drop-in renders the brand icon and the corresponding input field for the card security code (CVC, CVV, or CID).

Co-badged cards

Co-badged cards are rendered by Drop-in according to the co-badged card regulations for the applicable regions. This means that Drop-in renders all supported brands, and allows the cardholder to choose their preferred brand.

Recurring payments

Cards support tokenization for one-click, subscription, and unscheduled card-on-file payments. Refer to Create tokens to integrate with our tokenization feature.

Store card details

When creating a token for cards:

• In your AdyenCheckout configuration, make sure that showStorePaymentField is set to true. This shows a switch for your shopper to choose to store their card details.

  // Configuration object.
  const configuration = {
      // Other required and optional configuration properties.
      showStorePaymentField: false
  };
  
  // Configuring Adyen Checkout.
  <AdyenCheckout
    config=configuration
    // Other properties.
    >
      <YourCheckoutView/> // Your checkout view that uses AdyenCheckout as the context.
  </AdyenCheckout>

• Make an API request to create a token using standard tokenization parameters. You do not need to include any additional parameters for cards.

When a token is created, you receive a recurring.token.created webhook. The webhook contains the storedPaymentMethodId that you can use to make subsequent payments using the stored payment details.

Make a one-click payment

Make a one-click payment using standard tokenization parameters. You do not need to include any additional parameters for cards.

Make a subscription payment

Make a subscription payment using standard tokenization parameters. You do not need to include any additional parameters for cards.

Make an unscheduled card-on-file payment

Make an unscheduled card-on-file payment using standard tokenization parameters. You do not need to include any additional parameters for cards.

Test and go live

If your client-side integration isn't ready, you can test API requests with encrypted card details by adding a test_ prefix to the test card details.

Before making live card payments:

1. Test your integration using our test card numbers. You can check the status of test payments in your Customer Area > Transactions > Payments.

2. Add the cards that you want to accept in your live Customer Area.