braintree.hostedFields.create

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:

Callbacks Promises
Copy
Copied
braintree.client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (clientErr, clientInstance) {
  if (clientErr) {
    // Handle error in client creation
    return;
  }

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

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

    // Use the Hosted Fields instance here to tokenize a card
  });
});

See the braintree.hostedFields.create reference for details.

Basic integration

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).

note

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:

HTML
Copy
Copied
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Checkout</title>
  </head>
  <body>
    <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 />
    </form>

    <script src="https://js.braintreegateway.com/web/3.37.0/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.37.0/js/hosted-fields.min.js"></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: {
              selector: '#card-number',
              placeholder: '4111 1111 1111 1111'
            },
            cvv: {
              selector: '#cvv',
              placeholder: '123'
            },
            expirationDate: {
              selector: '#expiration-date',
              placeholder: '10/2019'
            }
          }
        }, 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 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.

Customization

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

See also

Next Page: Styling →

Still have questions?

If you can’t find an answer, contact our Support team