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:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
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');
v5.x.x or earlier
Use the create
method of your AdyenCheckout
instance, in this case checkout
, to create the Component:
const cardComponent = checkout.create('card').mount('#card-container');
Optional configuration
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');
v5.x.x or earlier
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 |