With modern frameworks like React, Vue.js or Angular you mostly use a another framework based on them with reusable components. For example: Angular Material.
iFrames make it hard to use those components because they abstract a lot of HTML, JavaScript and CSS details away. Please remove the iFrame integration or let clients decide to use it or not.
Here is an example of a credit card input mask with automatic formating.
This would be very hard to simulate with iFrames and if the framework changes some CSS classes, one have to manually change it at the Braintree instance object.
The choice for iframes for the credit card form was not an arbitrary one. It's the very thing that eases PCI compliance by collecting all card details on a Braintree website through the iframes, then sending the credit card details from the iframes to Braintree and passing back a payment method nonce back to the merchant's website. With this structure, the credit card details are never present on the merchant's website.
See our original blog post about Hosted Fields, when it first came out in version 2 of the sdk.
If you are eligible to take raw credit card details on your site, you can always do a direct integration instead. You can even use Restricted input for credit card formatting.
@crookedneighbor I'm really, really sorry for not reading the documentation carefully and appreciate your explanation a lot! Have a great day.
No worries. It was a reasonable request!
Most helpful comment
No worries. It was a reasonable request!