Custom input field text in Adyen card component in angular

282 Views Asked by At

I am trying to implement Adyen card component for card payment method. StyleObject works if I want to change the font, colour etc of the input fields for card number , security code etc. But I am unbale to change the input field label.I have tried using localisation and aria-label so far and they are not working.This is what my adyen.service.ts file looks like:

    export class AdyenService {

  translations={
    "en-GB":{
      "encryptedSecurityCode":"CVV/CVC",
      "payButton": "essfsdfsdf",
      "paymentMethods.moreMethodsButton": "More payment methods",    
    }
  };
  styleObject = {
    base: {
      color: 'black',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      fontFamily: 'Helvetica'
    },
    error: {
      color: 'red'
    },
    placeholder: {
      color: '#d8d8d8'
    },
    validated: {
      color: 'green'
    }
  };

  constructor(private readonly router: Router) { }
   ...

  getConfiguration(session: SessionResponseModel) {
    const configuration = {
      environment:environment,
      clientKey: clientKey,
      analytics: {
        enabled: true
      },
      ..
      },
      paymentMethodsConfiguration: {
        card: {
          hasHolderName: true,
          holderNameRequired: true,
          showPayButton: true,
          locale: "en-GB",
          translations: this.translations
          styles: this.styleObject

        }
      }
    };

    return configuration;
  }
}

Here are the links of angular docs I am following: localization custom Card component

1

There are 1 best solutions below

3
On BEST ANSWER

Place thetranslations attribute in the root of the Configuration object and use the label creditCard.cvcField.title to override the Security Code label

const translations={
    "en-GB":{
      "creditCard.cvcField.title":"CVV/CVC",
      "payButton": "essfsdfsdf",
      "paymentMethods.moreMethodsButton": "More payment methods",

    }
  }; 

const configuration = {
      environment: environment.options.adyen.environment,
      clientKey: environment.options.adyen.clientKey,
      locale: "en-GB",
      translations: translations,
      ...

Here is a video explaining the different options to localize the Drop-in, on GitHub you can find the labels you can customise.