Card Component

Add card payments to an existing Components integration.

This page explains how to add cards to your existing iOS Components integration.

Requirements

Select which endpoint you are using:

API reference

You do not 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 additional use case.

You can send additional fields for specific use cases. For example showing debit and credit cards separately and storing payment details.

Component configuration

Optional configuration

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 and Finland, many shoppers use combo cards that can make both debit or credit transactions. If you use separate forms for Debit Card and Credit Card the shopper can 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.

Choose which server-side flow your integration uses:

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 the 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 card payments

Adyen's tokenization service allows you to securely store shopper's card details for payments. You first need to create a token.

Accepting credit card installments

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.