Hosted Fields

Setup and Integrationanchor


Set up the SDK and create a client. If you use other payment method types, such as PayPal, then you can re-use the same client.

Pass the client to braintree.hostedFields.create within the options object:

  1. Callback
  2. Promise
  authorization: 'CLIENT_AUTHORIZATION'
}, function (clientErr, clientInstance) {
  if (clientErr) {
    // Handle error in client creation

  var options = {
    client: clientInstance,
    styles: {
      /* ... */
    fields: {
      /* ... */

  braintree.hostedFields.create(options, function (hostedFieldsErr, hostedFieldsInstance) {
    if (hostedFieldsErr) {
      // Handle error in Hosted Fields creation

    // Use the Hosted Fields instance here to tokenize a card

See the braintree.hostedFields.create reference for details.

Basic integrationanchor

To start using Hosted Fields, you need to create a basic HTML checkout form. You will need to define <div> containers in place of the <input> elements that would normally comprise your credit card input fields (card number, expiration date, and CVV).


Depending on your AVS settings you may also want to include a postal/ZIP code field for later use in server-side Transaction calls.

Here's a sample form that uses Hosted Fields:

  1. HTML
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <form action="/" id="my-sample-form" method="post">
      <label for="card-number">Card Number</label>
      <div id="card-number"></div>

      <label for="cvv">CVV</label>
      <div id="cvv"></div>

      <label for="expiration-date">Expiration Date</label>
      <div id="expiration-date"></div>

      <input type="submit" value="Pay" disabled />
<script src=""></script>
<script src=""></script> <script> var form = document.querySelector('#my-sample-form'); var submit = document.querySelector('input[type="submit"]'); braintree.client.create({ authorization: 'CLIENT_AUTHORIZATION' }, function (clientErr, clientInstance) { if (clientErr) { console.error(clientErr); return; } // This example shows Hosted Fields, but you can also use this // client instance to create additional components here, such as // PayPal or Data Collector. braintree.hostedFields.create({ client: clientInstance, styles: { 'input': { 'font-size': '14px' }, 'input.invalid': { 'color': 'red' }, 'input.valid': { 'color': 'green' } }, fields: { number: { container: '#card-number', placeholder: '4111 1111 1111 1111' }, cvv: { container: '#cvv', placeholder: '123' }, expirationDate: { container: '#expiration-date', placeholder: '10/2022' } } }, function (hostedFieldsErr, hostedFieldsInstance) { if (hostedFieldsErr) { console.error(hostedFieldsErr); return; } submit.removeAttribute('disabled'); form.addEventListener('submit', function (event) { event.preventDefault(); hostedFieldsInstance.tokenize(function (tokenizeErr, payload) { if (tokenizeErr) { console.error(tokenizeErr); return; } // If this was a real integration, this is where you would // send the nonce to your server. console.log('Got a nonce: ' + payload.nonce); }); }, false); }); }); </script> </body> </html>

In this example, when the customer submits the form, Hosted Fields will securely collect and attempt to tokenize the card details. If tokenization succeeds, your callback will receive a nonce. Send this nonce to your server, which you can use to make a transaction. If you want to store this card in your Vault, Braintree strongly recommends verifying the card while vaulting.

If tokenization fails, you will receive a BraintreeError with pertinent details. For a detailed example of handling tokenization errors with Hosted Fields, see our client reference.


You can find all the Hosted Fields configuration options in the JavaScript reference.

See also

Next Page: Styling