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
Place the
translations
attribute in the root of the Configuration object and use the labelcreditCard.cvcField.title
to override the Security Code labelHere is a video explaining the different options to localize the Drop-in, on GitHub you can find the labels you can customise.