Hosted Fields

Upgrading From Custom To Hosted Fields

If you have previously setup Braintree.js using a custom integration, your form likely looks like this:

HTML

<form id="checkout" action="/your/server/endpoint" method="post">
  <input type="text" data-braintree-name="number">
  <input type="text" data-braintree-name="expiration_date">
  <input type="submit" id="submit" value="Pay">
</form>

<script>
braintree.setup("CLIENT-TOKEN-FROM-SERVER", "custom", {
  id: "checkout"
});
</script>

Markup

The first step is to replace your <input> elements with <div> elements. You will no longer need the data-braintree-name attributes, however you may keep them in place if you like. Once you have made the switch, declare references to them under a hostedFields configuration object in braintree.setup.

HTML

<form id="checkout" action="/your/server/endpoint" method="post">
  <div id="number"></div>
  <div id="expiration-date"></div>
  <input type="submit" id="submit" value="Pay">
</form>

<script>
braintree.setup("CLIENT-TOKEN-FROM-SERVER", "custom", {
  id: "checkout",
  hostedFields: {
    number: {
      selector: "#number"
    },
    expirationDate: {
      selector: "#expiration-date"
    }
  }
});
</script>

Styles

Your form likely contains input elements not rendered via Hosted Fields and your stylesheets may look something like this:

CSS

input[type="text"] {
  border: 1px solid #3A3A3A;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

By targeting your new containers with these same rules, your Hosted Fields inputs will quickly begin to take shape:

CSS

input[type="text"],
.hosted-field {
  border: 1px solid #3A3A3A;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

Note: In the above example, a class of hosted-field was used for styling. This is only for demonstration and would require you adding this class to your containers. You can target your container elements in your stylesheets anyway you wish.

Styling your text

Since the actual text entry is handled inside of Hosted Fields iframes, you can pass in custom styles to your configuration via a CSS-like declaration when calling braintree.setup. It is recommended you leave any font styles in your stylesheets in tact so as not to disrupt any other UI in your application.

Let's assume your CSS looked like this:

CSS

input[type="text"] {
  color: #777;
  font-size: 16px;

  -webkit-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
}

input[type="text"]:focus {
  color: #999;
}

You can apply that via JavaScript like this:

JavaScript

var colorTransition = 'color 100ms ease-out';

braintree.setup('TOKEN', 'custom', {
  id: 'checkout',
  hostedFields: {
    styles: {
      'input': {
        'color': '#777',
        'font-size': '16px',
        '-webkit-transition': colorTransition,
        'transition': colorTransition
      },
      'input:focus': {
        'color': '#999'
      }
    },
    number: {
      selector: '#number'
    },
    expirationDate: {
      selector: '#expiration-date'
    }
  }
});

Caveats