No momento, esta página não está disponível em português
Payment-method icon

Card Component integration

Add cards to an existing Components integration.

On this page, you can find additional configuration for adding cards to your Components integration.

Before you begin

This page assumes you have already:

API reference

You don't 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.

Components configuration

There is no required cards specific integration for Components.

Optional configuration

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

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. 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: don't show billing address fields.
- postal: show only the postal code field.
none
allowedCardTypes List of supported card types that you recognize. The list of card brands from the /paymentMethods response.
kcpVisibility For Korean cards, sets if security fields show in the payment form. Possible values:
- show: show the fields.
- hide: don't show the fields.
hide
socialSecurity For Brazilian cards, sets if the CPF/CNPJ social security number field shows in the payment form. Possible values:
- show: show the field.
- hide: don't show the field.
hide

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

Showing debit and credit cards separately

Supported from Checkout API v53 or later.

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

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. Components shows the payment form for Debit Card before the one for Credit Card.

Card brand recognition

When the shopper is entering their card details, Components tries to recognize the card brand. When successful, Components 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 Component according to the co-badged card regulations for the applicable regions. This means that Components renders all supported brands, and allows the cardholder to choose their preferred brand.

Stored cards

Create a token

When a shopper chooses to pay with card, Drop-in renders a switch for saving the card details for future payments. If the shopper chooses to save their card details when making a payment, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper.

If you don't want to show the switch for saving card details, set showStorePaymentField to false when configuring AdyenCheckout.

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

Show a stored card in your payment form

To show a stored card in your payment form, include in your /paymentMethods request:

  • shopperReference: The unique shopper identifier that you specified when creating the token.

Make a payment with a token

When your shopper pays with a stored card:

  1. Pass the data.paymentMethod to your server.
  2. From your server, make a /payments request, specifying:

    • paymentMethod: The data.paymentMethod from the didSubmit event from your client app.

    • shopperReference: The unique shopper identifier that you specified when creating the token.
    • shopperInteractionContAuth.
    • recurringProcessingModel: CardOnFile.

The /payments response contains:

  • resultCode: Use this to inform the shopper about the payment status.

You can also use tokens to make shopper-not-present payments for subscriptions or contracts. For more information, refer to Making a payment for a subscription or contract.

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.

See also