Braintree Payment

Hosted Field

Braintree Payment System is used to handle the credit card details of customers going through the checkout. We can apply some styling to these to ensure they are consistant with ours.

  <div class="braintree__hosted-field" id="postal-code"></div>
  

Joined Inputs

Styling to put the expiry date (month and year) inputs on the same line.

  <div class="braintree__joined-inputs">
    <div class="braintree__hosted-field" id="expiration-month"></div>
    <div class="braintree__hosted-field" id="expiration-year"></div>
  </div>
  

Validation Classes

While Hosted Fields manages the internal state and styles of the input fields, use the following classes to manage the visual state of the containers.

  <div class="braintree__hosted-field braintree-hosted-fields-focused"></div>
  <div class="braintree__hosted-field braintree-hosted-fields-valid"></div>
  <div class="braintree__hosted-field braintree-hosted-fields-invalid"></div>
  

Card Image

Styles to show the card vendor once the correct card number is inputted.

  <div id="card-image" class="visa"></div>