Braintree Drop In UI: How to override internal labels? (Eg: Card Number, Postal Code)

[tarunbhargavk18]

General information

• SDK/Library version: 1.23.0
• Environment: Sandbox
• Browser and OS: Chrome 85.0.4183.102 (Official Build) (64-bit) on Windows 10

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 }, }, }, }, })

[crookedneighbor]

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":

https://braintree.github.io/braintree-web-drop-in/?translations={%22cardNumberLabel%22:%22Custom%20Card%20Label%22}

[crookedneighbor]

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.

[tarunbhargavk18]

Thanks a lot! That worked.

[cklenk]

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!