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?
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.
A possible solution to retain PCI compliance would be to allow the user to specify the format of the hosted fields in the Braintree control Panel. As there are a limited set of hosted fields this should not be a massive rework.
This could be as simple as adding a HTML5 mask but it's in Braintrees hands.
I am just completing an integration now and formatting is still not available.
