This page explains how to add cards to your existing Web Components integration.<\/p>\n
Select the server-side flow<\/a> that your integration uses:<\/p>\n\n If you are using Web Components v6, import the Component<\/a> that you need for cards:<\/p>\n 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:<\/p>\n You can also send additional fields for specific use cases for example if you want to show debit and credit cards separately<\/a> or make recurring card payments<\/a>.<\/p>\n Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n Create an instance of the Component, passing:<\/p>\n Use the 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:<\/p>\n Create an instance of the Component, passing:<\/p>\n Use the Import resources for v6<\/h2>\n
import { AdyenCheckout, Card } from '@adyen\/adyen-web'<\/code><\/pre>\nAPI reference<\/h2>\n
\n
Component configuration<\/h2>\n
Step 1: Create a DOM element<\/h3>\n
<div id=\"card-container\"><\/div><\/code><\/pre>\nStep 2: Create an instance of the Component<\/h3>\n
v6.0.0 or later<\/h4>\n
\n
AdyenCheckout<\/code>.<\/li>\n<\/ul>\nconst card = new Card(checkout).mount('#card-container');<\/code><\/pre>\nv5.x.x or earlier<\/h4>\n <\/div>\n <\/div>\n
create<\/code> method of your AdyenCheckout<\/code> instance, in this case checkout<\/code>, to create the Component:<\/p>\nconst cardComponent = checkout.create('card').mount('#card-container');<\/code><\/pre>\n\n <\/div>\n <\/div>\n<\/div>\n\nOptional configuration<\/h2>\n <\/div>\n <\/div>\n
v6.0.0 or later<\/h4>\n
\n
AdyenCheckout<\/code>.<\/li>\nconst cardComponent = new Card(checkout, cardConfiguration).mount('#card-container');<\/code><\/pre>\nv5.x.x or earlier<\/h4>\n <\/div>\n <\/div>\n
create<\/code> method of your AdyenCheckout<\/code> instance, in this case checkout<\/code>, to create an instance of the Component. Add the configuration object if you created one.<\/p>\nconst cardComponent = checkout.create('card', cardConfiguration).mount('#card-container');<\/code><\/pre>\n\n <\/div>\n <\/div>\n<\/div>\n\nProperties<\/h4>\n