HostedFields

Example

hostedFieldsInstance.addClass('number', 'custom-class', function (addClassErr) {
  if (addClassErr) {
    console.error(addClassErr);
  }
});

Examples

hostedFieldsInstance.clear('number', function (clearErr) {
  if (clearErr) {
    console.error(clearErr);
  }
});

Clear several fields

hostedFieldsInstance.clear('number');
hostedFieldsInstance.clear('cvv');
hostedFieldsInstance.clear('expirationDate');

Examples

hostedFieldsInstance.focus('number', function (focusErr) {
  if (focusErr) {
    console.error(focusErr);
  }
});

Using an event listener

myElement.addEventListener('click', function (e) {
  // In Firefox, the focus method can be suppressed
  //   if the element has a tabindex property or the element
  //   is an anchor link with an href property.
  // In Mobile Safari, the focus method is unable to
  //   programatically open the keyboard, as only
  //   touch events are allowed to do so.
  e.preventDefault();
  hostedFieldsInstance.focus('number');
});

Example

Check if all fields are valid

var state = hostedFieldsInstance.getState();

var formValid = Object.keys(state.fields).every(function (key) {
  return state.fields[key].isValid;
});

Example

Subscribing and then unsubscribing from a Hosted Field event, in this case 'focus'

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  var callback = function (event) {
    console.log(event.emittedBy, 'has been focused');
  };
  hostedFieldsInstance.on('focus', callback);

  // later on
  hostedFieldsInstance.off('focus', callback);
});

Example

Listening to a Hosted Field event, in this case 'focus'

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('focus', function (event) {
    console.log(event.emittedBy, 'has been focused');
  });
});

Example

Remove the placeholder attribute of a field

hostedFieldsInstance.removeAttribute({
  field: 'number',
  attribute: 'placeholder'
}, function (attributeErr) {
  if (attributeErr) {
    console.error(attributeErr);
  }
});

Example

hostedFieldsInstance.addClass('number', 'custom-class', function (addClassErr) {
  if (addClassErr) {
    console.error(addClassErr);
    return;
  }

  // some time later...
  hostedFieldsInstance.removeClass('number', 'custom-class');
});

Examples

Set the placeholder attribute of a field

hostedFieldsInstance.setAttribute({
  field: 'number',
  attribute: 'placeholder',
  value: '1111 1111 1111 1111'
}, function (attributeErr) {
  if (attributeErr) {
    console.error(attributeErr);
  }
});

Set the aria-required attribute of a field

hostedFieldsInstance.setAttribute({
  field: 'number',
  attribute: 'aria-required',
  value: true
}, function (attributeErr) {
  if (attributeErr) {
    console.error(attributeErr);
  }
});

Examples

Set an error message on a field

hostedFieldsInstance.setMessage({
  field: 'number',
  message: 'Invalid card number'
});

Remove the message on a field

hostedFieldsInstance.setMessage({
  field: 'number',
  message: ''
});

Example

Update the month options to spanish

hostedFieldsInstance.setMonthOptions([
  '01 - enero',
  '02 - febrero',
  '03 - marzo',
  '04 - abril',
  '05 - mayo',
  '06 - junio',
  '07 - julio',
  '08 - agosto',
  '09 - septiembre',
  '10 - octubre',
  '11 - noviembre',
  '12 - diciembre'
]);

Example

hostedFieldsInstance.teardown(function (teardownErr) {
  if (teardownErr) {
    console.error('Could not tear down Hosted Fields!');
  } else {
    console.info('Hosted Fields has been torn down!');
  }
});

Examples

Tokenize a card

hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
  if (tokenizeErr) {
    switch (tokenizeErr.code) {
      case 'HOSTED_FIELDS_FIELDS_EMPTY':
        // occurs when none of the fields are filled in
        console.error('All fields are empty! Please fill out the form.');
        break;
      case 'HOSTED_FIELDS_FIELDS_INVALID':
        // occurs when certain fields do not pass client side validation
        console.error('Some fields are invalid:', tokenizeErr.details.invalidFieldKeys);

        // you can also programtically access the field containers for the invalid fields
        tokenizeErr.details.invalidFields.forEach(function (fieldContainer) {
          fieldContainer.className = 'invalid';
        });
        break;
      case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':
        // occurs when:
        //   * the client token used for client authorization was generated
        //     with a customer ID and the fail on duplicate payment method
        //     option is set to true
        //   * the card being tokenized has previously been vaulted (with any customer)
        // See: https://developers.braintreepayments.com/reference/request/client-token/generate/#options.fail_on_duplicate_payment_method
        console.error('This payment method already exists in your vault.');
        break;
      case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':
        // occurs when:
        //   * the client token used for client authorization was generated
        //     with a customer ID and the verify card option is set to true
        //     and you have credit card verification turned on in the Braintree
        //     control panel
        //   * the cvv does not pass verfication (https://developers.braintreepayments.com/reference/general/testing/#avs-and-cvv/cid-responses)
        // See: https://developers.braintreepayments.com/reference/request/client-token/generate/#options.verify_card
        console.error('CVV did not pass verification');
        break;
      case 'HOSTED_FIELDS_FAILED_TOKENIZATION':
        // occurs for any other tokenization error on the server
        console.error('Tokenization failed server side. Is the card valid?');
        break;
      case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':
        // occurs when the Braintree gateway cannot be contacted
        console.error('Network error occurred when tokenizing.');
        break;
      default:
        console.error('Something bad happened!', tokenizeErr);
    }
  } else {
    console.log('Got nonce:', payload.nonce);
  }
});

Tokenize and vault a card

hostedFieldsInstance.tokenize({
  vault: true
}, function (tokenizeErr, payload) {
  if (tokenizeErr) {
    console.error(tokenizeErr);
  } else {
    console.log('Got nonce:', payload.nonce);
  }
});

Tokenize a card with cardholder name

hostedFieldsInstance.tokenize({
  cardholderName: 'First Last'
}, function (tokenizeErr, payload) {
  if (tokenizeErr) {
    console.error(tokenizeErr);
  } else {
    console.log('Got nonce:', payload.nonce);
  }
});

Tokenize a card with the postal code option

hostedFieldsInstance.tokenize({
  billingAddress: {
    postalCode: '11111'
  }
}, function (tokenizeErr, payload) {
  if (tokenizeErr) {
    console.error(tokenizeErr);
  } else {
    console.log('Got nonce:', payload.nonce);
  }
});

Tokenize a card with additional billing address options

hostedFieldsInstance.tokenize({
  billingAddress: {
    firstName: 'First',
    lastName: 'Last',
    company: 'Company',
    streetAddress: '123 Street',
    extendedAddress: 'Unit 1',
    // passing just one of the country options is sufficient to
    // associate the card details with a particular country
    // valid country names and codes can be found here:
    // https://developers.braintreepayments.com/reference/general/countries/ruby#list-of-countries
    countryName: 'United States',
    countryCodeAlpha2: 'US',
    countryCodeAlpha3: 'USA',
    countryCodeNumeric: '840'
  }
}, function (tokenizeErr, payload) {
  if (tokenizeErr) {
    console.error(tokenizeErr);
  } else {
    console.log('Got nonce:', payload.nonce);
  }
});

Example

Listening to a `binAvailable` event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('binAvailable', function (event) {
    event.bin // send bin to 3rd party bin service
  });
});

Example

Listening to a blur event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('blur', function (event) {
    console.log(event.emittedBy, 'lost focus');
  });
});

Example

Listening to a cardTypeChange event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('cardTypeChange', function (event) {
    if (event.cards.length === 1) {
      console.log(event.cards[0].type);
    } else {
      console.log('Type of card not yet known');
    }
  });
});

Example

Listening to an empty event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('empty', function (event) {
    console.log(event.emittedBy, 'is now empty');
  });
});

Example

Listening to a focus event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('focus', function (event) {
    console.log(event.emittedBy, 'gained focus');
  });
});

Example

Clicking a submit button upon hitting Enter (or equivalent) within a Hosted Field

var hostedFields = require('braintree-web/hosted-fields');
var submitButton = document.querySelector('input[type="submit"]');

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('inputSubmitRequest', function () {
    // User requested submission, e.g. by pressing Enter or equivalent
    submitButton.click();
  });
});

Example

Listening to an notEmpty event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('notEmpty', function (event) {
    console.log(event.emittedBy, 'is now not empty');
  });
});

Example

Listening to a validityChange event

hostedFields.create({ ... }, function (createErr, hostedFieldsInstance) {
  hostedFieldsInstance.on('validityChange', function (event) {
    var field = event.fields[event.emittedBy];

    if (field.isValid) {
      console.log(event.emittedBy, 'is fully valid');
    } else if (field.isPotentiallyValid) {
      console.log(event.emittedBy, 'is potentially valid');
    } else {
      console.log(event.emittedBy, 'is not valid');
    }
  });
});