Braintree Hosted Fields + Bootstrap example

Form HTML

<form id="my-checkout-form">

<div class="form-group">
  <label class="control-label" for="email">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="foo@boo.biz">
</div>

<div class="form-group">
  <label class="control-label" for="hosted-field-number">Credit Card Number</label>
  <div id="hosted-field-number" placeholder="4111 1111 1111 1111"></div>
</div>

<div class="form-group">
  <label class="control-label" for="hosted-field-cvv">CVV</label>
  <div id="hosted-field-cvv" placeholder="123"></div>
</div>

<div class="form-group">
  <label class="control-label" for="hosted-field-expiration-date">Expiration Date</label>
  <div id="hosted-field-expiration-date" placeholder="04 / 2020"></div>
</div>

<div class="form-group">
  <button type="submit" class="btn btn-primary">Pay</button>
</div>

</form>

JavaScript files to load

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="braintree-client.js"></script>
<script src="braintree-hosted-fields.js"></script>
<script src="braintree-hosted-fields-bootstrap.js"></script>

JavaScript

$('#my-checkout-form').hostedFields({
  authorization: 'YOUR BRAINTREE CLIENT TOKEN',
  number: '#hosted-field-number',
  cvv: '#hosted-field-cvv',
  expirationDate: '#hosted-field-expiration-date'
})