--- title: "KCP Direct Card Capture Web Component" description: "Add KCP Direct Card Capture to your Components integration." url: "https://docs.adyen.com/payment-methods/cards/korean-cards-direct/web-component" source_url: "https://docs.adyen.com/payment-methods/cards/korean-cards-direct/web-component.md" canonical: "https://docs.adyen.com/payment-methods/cards/korean-cards-direct/web-component" last_modified: "2026-09-23T16:30:22+02:00" language: "en" --- # KCP Direct Card Capture Web Component Add KCP Direct Card Capture to your Components integration. You can add KCP Direct Card Capture to your existing integration. The following instructions show only what you must add to your integration specifically for KCP Direct Card Capture. If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide. The additions you must make depend on the [server-side flow](https://docs.adyen.com/online-payments/build-your-integration) that your integration uses: ## Sessions flow Component ### Not-Available Sessions are not supported for KCP Direct Card Capture. ## Advanced flow Component ## Requirements | Requirement | Description | | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | | **Integration type** | Make sure that you have an existing Advanced flow [Web Components integration](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | | **Setup steps** | Before you begin, [add KCP Direct Card Capture in your Customer Area](https://docs.adyen.com/payment-methods/add-payment-methods). | | ### Import ## Import KCP Direct Card Capture When you [import Adyen Web](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-adyen-web), include `Card`. **Import** ```javascript import { AdyenCheckout, Card } from '@adyen/adyen-web'; ``` ### Add-Configuration ## Add additional configuration for KCP Direct Card Capture [Configure the Component](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#configure-the-component) with the following configuration object: | Parameter | Required | Description | | ------------------------------ | ------------------------------------------------------------------------------------------- | ---------------- | | `koreanAuthenticationRequired` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **true**. | | `countryCode` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **KR**. | Initialize the card component with `koreanAuthenticationRequired`: **true** and `countryCode`: **KR**. This causes the component to render the two additional KCP fields below the standard card fields. **Add a configuration object** ```bash const cardComponent = checkout.create('scheme', { type: 'card', configuration: { koreanAuthenticationRequired: true }, countryCode: 'KR', onSubmit: (state, component) => { // state.data contains the paymentMethod and additionalData // Pass state.data to your server and call /payments } }); cardComponent.mount('#card-container'); ``` The component renders: | Field | Shopper input | Sent as | | ----------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------ | | Card number | Card number | `paymentMethod.encryptedCardNumber` | | Expiry date | MM/YY | `paymentMethod.encryptedExpiryMonth` / `encryptedExpiryYear` | | Security code | CVC/CVV | `paymentMethod.encryptedSecurityCode` | | Cardholder birthdate or Corporate registration number | YYMMDD (6 digits) or 10-digit number | `additionalData["kcp.cardTaxno"]` | | First 2 digits of card password | 2 digits | `additionalData["kcp.cardPwd"]` | All fields are required. The component enforces this on client-side before the form can be submitted. ### Initialize ## Initialize the Component for KCP Direct Card Capture To [initialize](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) KCP Direct Card Capture, use the `Card` class. **Initialize the Component** ```javascript const cardComponent = new Card(checkout, { // The configuration object for KCP Direct Card Capture that you created. // Mount the Component to a container. }).mount('#card-container') ``` ### Add-Parameters-Payments-Request ## Add additional parameters to your /payments request When you [make a payment](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: | Parameter | Required | Description | | --------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `kcp.cardTaxno` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Card holder birthdate (private card) or corporate registration number (corporate card). Birthdate: YYMMDD (6 digits). Corporate: 10 digits. Max 10 digits. Required if `kcp.cardPwd` is present. | | `kcp.cardPwd` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | First 2 digits of the card holder's card PIN. Required if `kcp.cardTaxno` is present. | **Example payment request for KCP Direct Card Capture** ```bash curl https://checkout-test.adyen.com/v71/payments \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'idempotency-key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST \ -d '{ "amount":{ "currency":"KRW", "value":150000 }, "reference":"YOUR_ORDER_NUMBER", "countryCode": "KR", "paymentMethod": { "type": "scheme", "encryptedCardNumber": "test_4111111111111111", "encryptedExpiryMonth": "test_03", "encryptedExpiryYear": "test_2030", "encryptedSecurityCode": "test_737", "holderName": "Gildong Hong" }, "additionalData": { "kcp.cardTaxno": "890224", "kcp.cardPwd": "34" }, "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..", "merchantAccount":"ADYEN_MERCHANT_ACCOUNT", "channel": "Web" }' ``` **Example response for a successful payment** ```json { "pspReference": "ABCD1234EFGH5678", "resultCode": "Authorised", "amount": { "currency": "KRW", "value": 150000 }, "merchantReference": "YOUR_ORDER_NUMBER", "paymentMethod": { "brand": "visa", "type": "scheme" } } ``` ### Recurring ## Recurring payments Ensure the card component with `koreanAuthenticationRequired`: **true** is rendered whenever the shopper is present (initial purchase or initial save). ### Create a token Include the following parameters in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request. | Parameter | Required | Description | | -------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `storePaymentMethod` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **true**. | | `kcp.cardTaxno` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Card holder birthdate (private card) or corporate registration number (corporate card). Birthdate: YYMMDD (6 digits). Corporate: 10 digits. Max 10 digits. Required if `kcp.cardPwd` is present. | | `kcp.cardPwd` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | First 2 digits of the cardholder's card PIN. Required if `kcp.cardTaxno` is present. | | `shopperInteraction` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **Ecommerce**. | | `recurringProcessingModel` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **Subscription**. | **Example /payments request to create a token** ```json { "merchantAccount": "ADYEN_MERCHANT_ACCOUNT", "reference": "YOUR_ORDER_NUMBER", "amount": { "currency": "KRW", "value": 150000 }, "countryCode": "KR", "paymentMethod": { "type": "scheme", "encryptedCardNumber": "test_4111111111111111", "encryptedExpiryMonth": "test_03", "encryptedExpiryYear": "test_2030", "encryptedSecurityCode": "test_737", "holderName": "Gildong Hong" }, "additionalData": { "kcp.cardTaxno": "890224", "kcp.cardPwd": "34" }, "storePaymentMethod": true, "shopperReference": "SHOPPER-001", "shopperInteraction": "Ecommerce", "recurringProcessingModel": "Subscription", "returnUrl": "https://your-website.com/checkout/return", "channel": "Web" } ``` The response includes the `recurringDetailReference` that you must use in [subsequent payments with a token](https://docs.adyen.com/payment-methods/cards/korean-cards-direct/web-component#make-payment-with-token): **Example /payments response to create a token** ```json { "pspReference": "ABCD1234EFGH5678", "resultCode": "Authorised", "amount": { "currency": "KRW", "value": 150000 }, "merchantReference": "YOUR_ORDER_NUMBER", "additionalData": { "recurring.recurringDetailReference": "7219687191761347", "recurring.shopperReference": "SHOPPER-001" } } ``` ### Make a payment with a token | Parameter | Required | Description | | -------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | `storedPaymentMethodId` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The value returned in `recurringDetailReference` when the token was created. | | `shopperInteraction` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **ContAuth**. | | `recurringProcessingModel` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Set to **Subscription**. | **Example /payments request to make a payment with a token** ```json { "merchantAccount": "ADYEN_MERCHANT_ACCOUNT", "reference": "RECURRING-00002", "amount": { "currency": "KRW", "value": 150000 }, "countryCode": "KR", "paymentMethod": { "type": "scheme", "storedPaymentMethodId": "7219687191761347" }, "shopperReference": "SHOPPER-001", "shopperInteraction": "ContAuth", "recurringProcessingModel": "Subscription" } ``` ## Installments A shopper can split a payment across monthly installments. The card issuer processes monthly installments: * Maximum installments: 12 months * Minimum amount: 50000 KRW. Requests below this threshold, even with `installments.value` set, is rejected. The component does not render an installment selector. You must build and collect this in your own UI, then pass the value in the request. **Example /payments request for installments** ```json { "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "reference": "ORDER-12345", "amount": { "currency": "KRW", "value": 150000 }, "countryCode": "KR", "paymentMethod": { "type": "scheme", "encryptedCardNumber": "test_4111111111111111", "encryptedExpiryMonth": "test_03", "encryptedExpiryYear": "test_2030", "encryptedSecurityCode": "test_737", "holderName": "Gildong Hong" }, "additionalData": { "kcp.cardTaxno": "890224", "kcp.cardPwd": "34" }, "installments": { "value": 6 }, "returnUrl": "https://your-website.com/checkout/return", "channel": "Web" } ``` ## Key implementation notes Make sure that your implementation adheres to the following: * Component only: drop-in and sessions are not supported. Use `checkout.create('scheme', ...)` with `koreanAuthenticationRequired`: **true** and `countryCode`: **KR**. * All Korean-issued cards: the `kcp.cardTaxno` and `kcp.cardPwd` fields are required for all Korean-issued cards - domestic cards, and co-branded Visa, Mastercard, JCB, Diners, and UnionPay cards issued in Korea. Do not scope this to `korean_local_card` only. * One-time payments: always include both `additionalData` fields. * Tokenization: include both fields on the first (shopper-present) transaction only. Omit them on subsequent recurring charges. * Both fields together: `kcp.cardTaxno` and `kcp.cardPwd` are validated as a pair - sending one without the other returns a validation error. * No 3DS: this integration does not support 3D Secure. The KCP authentication fields serve as the alternative authentication mechanism mandated by Korean issuers. * No liability shift: because 3DS is not used, this flow does not provide liability shift on chargebacks. * Installments UI: the card component does not render an installments selector. Build and collect this in your own UI if you intend to offer installments.