Closed tarunbhargavk18 closed 4 years ago
The internal label is the label used for screen readers, not displayed in the UI.
You can change any of the locale elements in the Drop-in UI by passing a translations
object. See the "Use your own translations" example here: https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#.create
Here's a demo of it being used in action to change the "Card Number" label to "Custom Card Label":
This is the specific key you're looking to override: https://github.com/braintree/braintree-web-drop-in/blob/0b3d267cc9d4ee9f4334beeaeb675771280b1696/src/translations/en_US.js#L46
You can see the rest in that file that you can also override if desired.
Thanks a lot! That worked.
I also needed to modify the postal code field to include zip code. Apparently US people don't know what a postal code is. Thank you for the help!
General information
Issue description
Not able to understand how I can override the Braintree drop-in's labels (Eg: Card number, Postal Code etc.). I tried doing what the documentation suggested but it didn't work. It did work for placeholder but not for the label. Would really appreciate if someone can help.
My JavaScript Code trying to change Card Number label to Card number :
DropIn.create({ authorization: clientToken, // preselectVaultedPaymentMethod: false, container: ReactDOM.findDOMNode(action.ref), paypal: { flow: "vault", }, card: { vault: { vaultCard: true, allowVaultCardOverride: true }, overrides: { fields: { number: { internalLabel: "Card number", formatInput: false }, }, }, }, })