var submitBtn = document.getElementById('my-submit');
var form = document.getElementById('my-sample-form');

braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, clientDidCreate);

function clientDidCreate(err, client) {
  braintree.hostedFields.create({
    client: client,
    styles: {
      'input': {
        'font-size': '16pt',
        'color': '#3A3A3A'
      },

      '.number': {
        'font-family': 'monospace'
      },

      '.valid': {
        'color': 'green'
      }
    },
    fields: {
      number: {
        selector: '#card-number'
      },
      cvv: {
        selector: '#cvv'
      },
      expirationDate: {
        selector: '#expiration-date'
      }
    }
  }, hostedFieldsDidCreate);
}

function hostedFieldsDidCreate(err, hostedFields) {
  submitBtn.addEventListener('click', submitHandler.bind(null, hostedFields));
  submitBtn.removeAttribute('disabled');
}

function submitHandler(hostedFields, event) {
  event.preventDefault();
  submitBtn.setAttribute('disabled', 'disabled');

  hostedFields.tokenize(function (err, payload) {
    if (err) {
      submitBtn.removeAttribute('disabled');
      console.error(err);
    } else {
      form['payment_method_nonce'].value = payload.nonce;
      form.submit();
    }
  });
}

braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (err, client) {
  client.request({
    endpoint: 'payment_methods/credit_cards',
    method: 'post',
    data: {
      creditCard: {
        number: '4111111111111111',
        expirationDate: '10/20',
        cvv: '123',
        billingAddress: {
          postalCode: '12345'
        }
      }
    }
  }, function (err, response) {
    // Send response.creditCards[0].nonce to your server
  });
});

var submitBtn = document.getElementById('my-submit');
var yourStylesConfig = { /* your Hosted Fields `styles` config */ };
var yourFieldsConfig = { /* your Hosted Hields `fields` config */ };

braintree.client.create({authorization: CLIENT_AUTHORIZATION}).then(function (client) {
  return braintree.hostedFields.create({
    client: client,
    styles: yourStylesConfig,
    fields: yourFieldsConfig
  });
}).then(function (hostedFields) {
  submitBtn.addEventListener('click', function (event) {
    event.preventDefault();
    submitBtn.setAttribute('disabled', 'disabled');

    hostedFields.tokenize().then(function (payload) {
      // send payload.nonce to your server
    }).catch(function (err) {
      submitBtn.removeAttribute('disabled');
      console.error(err);
    });
  });
});