How to Customize Card Labels in Adyen's Advanced Flow Drop-in v6?

Question

I am working with Adyen's advanced flow Drop-in in a React application. I want to customize the labels for fields in the card payment component, such as changing the "Security code" label to "CVV/CVC." I found a similar question, but the solution provided there didn’t work for me.

Here is a simplified version of my implementation:

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


const getAdyenConfig = () => {
        return {
            paymentMethodsResponse: *response*,
            amount: *amount*,
            locale: 'en-US',
            countryCode: *country-code*,
            showPayButton: false,
            environment: *enviroment*,
            clientKey: *client-key*,
            translations: {
                'en-US': {
                    'creditCard.cvcField.title': 'CVV/CVC'
                }
            },
            paymentMethodsConfiguration: {
                applepay: *applePayConfiguration*
            },
            onSubmit: *onSubmit code*,
            onEnterKeyPressed: () => {},
            onPaymentCompleted: *onPaymentCompleted code*,
            onPaymentFailed: *onPaymentFailed code*,
            onError: *onErrorcode*
        }
    }

const adyenDropinConfig = (paymentMethod) => {

  const adyenPaymentComponents = paymentMethod?.paymentMethods?.map(
       (payment_method) => {
            if (payment_method.type === 'scheme') return Card
            if (payment_method.type === 'googlepay') return GooglePay
            if (payment_method.type === 'applepay') return ApplePay
       }
  )

  return {
     paymentMethodComponents: adyenPaymentComponents,
     disableFinalAnimation: true,
     showStoredPaymentMethods: false,
     onReady: *onReady code*
  }
}

const paymentMethod = *paymentMethod*

const checkoutConfig = getAdyenConfig()
const checkout = await AdyenCheckout(checkoutConfig)

const dropinConfiguration = adyenDropinConfig(paymentMethod)
const dropin = new Dropin(checkout, dropinConfiguration).mount(adyenDropinRef.current)

What I tried:

• Confirmed that the translations object is passed to the AdyenCheckout configuration.
• Checked that the locale matches the language in the translations key (e.g., 'en-US').

Question:

Is there a specific way to customize the labels for fields in Adyen's Drop-in? Am I missing a configuration step or an alternative approach to achieve this?

P.S: The similar question also provided links to the GitHub repository that contains the translations for the labels along side with a video explaining the implementation from the official Adyen channel.

Answer 1

For Dropin v6 the label name is creditCard.securityCode.label

Try

 translations: {
    'en-US': {
       'creditCard.securityCode.label': 'CVV/CVC'
     }
  }

Find here are the properties you can override or check the Localization section.