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

Card Component

Add card payments to an existing Components integration.

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

Requirements

Select the server-side flow that your integration uses:

Import resources for v6

If you are using Web Components v6, import the Component that you need for cards:

import { AdyenCheckout, Card } from '@adyen/adyen-web'

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:

You can also send additional fields for specific use cases for example if you want to show debit and credit cards separately or make stored card payments.

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="card-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
const card = new Card(checkout).mount('#card-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const cardComponent = checkout.create('card').mount('#card-container');

Include optional configuration in the card configuration object. For example, to configure showing the cardholder name and billing address fields as required, and to customize the icon for Visa:

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
  • The payment method-specific configuration.
const card = new Card(checkout, cardConfiguration).mount('#card-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create an instance of the Component. Add the configuration object if you created one.

const cardComponent = checkout.create('card', cardConfiguration).mount('#card-container');

Properties

Field Description Default
brands Array of card brands that will be recognized. For a list of possible values, refer to Supported card types. ['mc','visa','amex']
brandsConfiguration
v4.5.0 or later
Object where you can customize the icons for different brands. For example, to customize the icon for Visa, include inside the brandsConfiguration:
visa: { icon: 'https://...' }
showBrandIcon Set to false to not show the brand logo when the card brand has been recognized. true
showBrandsUnderCardNumber
v5.12.0 or later
Shows brand logos under the card number field when the shopper selects the card payment method.
true
enableStoreDetails Set to true to show the checkbox for saving the card details for recurring payments. false
hasHolderName Set to true to show the input field for the cardholder name. false
holderNameRequired Set to true to make the cardholder name a required field. To show the field, you additionally need to set hasHolderName to true. false
positionHolderNameOnTop
v4.2.0 or later
Renders the cardholder name field at the top of the payment form. false
hideCVC Set to true to hide the CVC field. false
configuration.socialSecurityNumberMode
v4.2.0 or later
Renders a social security number field. For example, this is required for certain card payments in Brazil. Possible values are:
- show: Always renders the field.
- hide: Never renders the field.
- auto: Renders the field based on the card's BIN.
auto
styles Set a style object to customize the card input fields.
For a list of supported properties, refer to Styling card input fields.
Refer to
Default styles and labels.
billingAddressRequired Set to true to collect the shopper's billing address and mark the fields as required. false
billingAddressMode
v5.14.0 or later
If billingAddressRequired is set to true, you can set this to partial to require the shopper's postal code instead of the full address.

v5.31.0 or later:
When set to partial, you can configure data.country to validate the postal code your shopper enters.
If billingAddressRequired is false: none.
If billingAddressRequired is true: full.
billingAddressAllowedCountries Specify allowed country codes for the billing address. For example, ['US', 'CA', 'BR']. The Country field