Cannot use custom placeholders in Adyen Custom Card Secured field creation

Question

I am having an issue related to Adyen. I am creating a custom card implementation and everything works as it should, meaning the brands are configured correctly. the type as well, the styles as well, everything is fine!

But I am having an issue when I am trying to set custom placeholders for my payment card inputs. Has anyone observed this problem before and if yes did you fix it?

  checkout
     .create('securedfields', {
       type: 'card',
       brands: this.state.brands,
       styles: {
         error: {
           color: 'red'
         },
         validated: {
           color: 'green'
         },
         placeholder: {
           color: '#606064',
           fontWeight: '400',
         }
       },
       placeholders: {
         encryptedCardNumber: 'Card number'
       }

Thus, encryptedCardNumber placeholder will never be set. Any idea?

Documentation for palceholders: https://docs.adyen.com/online-payments/classic-integrations/checkout-sdks/web-sdk/customization/settings/

Answer 1

The styles attribute is to control the UI appearance, in order to override the default text you can use the translations attribute, effectively using Localization.

const translations = {
  "en_US" : {
    "creditCard.numberField.placeholder": "Card number"
    "payButton": "Pay Now",
  }
};

new AdyenCheckout(
    {
      clientKey,
      locale: "en_US",
      translations: translations,
      ....

Find here the list of all labels/text that can be customised.