Formatting for Braintree hosted fields

Question

When using Braintree hosted fields I'd like to control the formatting of card number and expiration date. I'd like it to be in "1111 1111 1111 1111" (with spaces) and "11/1111" (with "/" delimiter) format instead of "1111111111111111" and "111111" format.

Previously, I was using https://github.com/stripe/jquery.payment for that, but that doesn't seems to be possible to use with iframe. Docs of Braintree also didn't shine any light on the problem.

Is there any way to solve this?

Answer 1

Full Disclosure: I work as a developer at Braintree. Changing the format of the inputs is not supported in Hosted Fields beta at this time. Allowing any external javascript to access the internals of the iframe would open you up to PCI compliance violations. The team is discussing a potential update to Hosted Fields that would allow for such functionality while maintaining PCI compliance.

You can separate the date field into two separate ones by creating an expirationMonth and an expirationYear hosted field if you prefer that format over the current expirationDate hosted field. The documentation on how to do that is found here.