Braintree Hosted Fields integration with Custom Stylesheet(css) and validation

Braintree hosted field integration offer great flexibility in customization of payment form design with custom style sheet (css) and validation error handling. You can change complete look and feel of your payment form as per site theme with hosted fields solution and it being so easy to do.

We will have example of custom design of payment form below in that we added auto payment method detection logic with braintree on the basis of card number as well as added error handing style on form fields.

With this script you can handle/ Manage full form validation with braintree internal card validation too.

Custom design mock-up :


Validation error handling :


You can edit the all style content in below script as per your requirement-






You can download full script from here.

For any queries regarding above script put comments below or reach me vie mail  –


  1. Jeff

    This example is pretty helpful, and a needed resource!

    However, although I was able to get several of the scripts working, YEA!,( I’ve just tried 2 so far), both would not work unless I removed a few fields, I got the same error with the drop-in and the hosted fields scripts…

    Notice: Undefined index: email in C:\Users\Jeff\Dropbox\_websites\braintree_02\public_html\braintree_dropin_demo.php on line 51

    Notice: Undefined index: phonenumber in C:\Users\Jeff\Dropbox\_websites\braintree_02\public_html\braintree_dropin_demo.php on line 58

    I thought it might be that email was a custom field, but that was not the case. Any idea what might be going on?

    Thanks, Jeff

Leave a Reply

Your email address will not be published. Required fields are marked *