On this page, you can find additional configuration for adding cards to your Components integration.
Before you begin
This page assumes you've already:
You don't need to send additional fields for cards. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an advanced use case, or integrated Components before v5.0.0.
You can send additional fields for specific use cases. For example showing debit and credit cards separately.
||Set to true to show the field for the card holder name.||false|
||Set to false to hide the checkbox for storing card details.||true|
||Set to false to hide the security code (CVV/CVC) field.||true|
||Array of supported card types that you recognize.||Values from
||Set to true to collect the shopper's billing address and mark the fields as required.||false|
||Sets which billing address fields to show in the payment form. Possible values:
- full: show all billing address fields.
- none: don't show billing address fields.
- postalCode: show only the postal code field.
||Array of allowed country codes for the billing address. For example,
||nil: all country codes are supported.|
||For Korean cards, sets if security fields show in the payment form. Possible values:
- show: show the fields.
- hide: don't show the fields.
- auto: the field appears for cards issued in South Korea.
||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.
- auto: the field appears based on the detected card number.
Showing debit and credit cards separately
Components can show separate payment forms for debit cards and credit cards. Here are example use cases for this feature:
- In Brazil, Mexico, and Finland, many shoppers use combo cards that can make both debit or credit transactions. Separate forms for Debit Card and Credit Card lets the shopper choose the type of transaction.
- To accept card payments in Sweden, local legislation requires you to show the debit card payment options before the credit card ones.
- splitCardFundingSources: Set to true.
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-branded cards issued in Europe are rendered by Drop-in according to the European regulatory guidelines (EU IFR Regulation 2015/751 article 8). This means that Components renders all supported brands, and allows the cardholder to choose their preferred brand.
Stored card payments
Adyen's tokenization service allows you to securely store shopper's card details for payments. You first need to create a token.
Creating a tokenBy default, Components shows a checkbox to your shopper for saving their card details for future payments. If the shopper chooses to save their card details, your instance of
AdyenSessioncreates a token when the shopper pays.
Making a payment with a tokenWhen the shopper pays, your instance of
AdyenSessionincludes the shopper's stored card details. You can also use tokens to make shopper-not-present payments for subscriptions or contracts.
Accepting credit card installments
1. Create installment optionsTo specify the numbers of monthly installments that the shopper can choose from, initialize
monthValues: an array of unsigned integers for the number of installments offered. Must not be empty and must include integers greater than 1. For example, if you offer three, six, or nine installments, include [3, 6, 9].
maxInstallmentMonth: an unsigned integer for the maximum number of installments offered. The result is the option from 2 to the number you specify. The integer must be greater than 1. For example, if you include 4, the shopper can choose 1, 2, 3, or 4 installments.
includesRevolving: set to true to offer revolving installments. Default is false.
2. Create installment configurationCreate the installment configuration by initializing
InstallmentConfigurationwith one or both of the following:
- Default options: apply to all card types. Create an installment configuration, providing the default options.
- Card-based options: offered based on card types. Create an installment configuration, providing the card-based options:
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:
- Test your integration using our test card numbers. You can check the status of test payments in your Customer Area > Transactions > Payments.
- Add the cards that you want to accept in your live Customer Area.
- Before you can start accepting card payments in the live environment, you need to assess your PCI DSS compliance and submit the required Self-Assessment Questionnaire A document.