braintree-web/hosted-fields

Members

(static) VERSION :string

The current version of the SDK, i.e. 3.19.0.

Source:

Methods

(static) create(options, callbackopt) → {void}
Parameters:
Name Type Attributes Description
options object

Creation options:

Properties
Name Type Description
client Client

A Client instance.
fields fieldOptions

A set of options for each field.
styles styleOptions

Styles applied to each field.
callback callback <optional>

The second argument, data, is the HostedFields instance. If no callback is provided, create returns a promise that resolves with the HostedFields instance.
Source:
Examples
braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    'input': {
      'font-size': '16pt',
      'color': '#3A3A3A'
    },
    '.number': {
      'font-family': 'monospace'
    },
    '.valid': {
      'color': 'green'
    }
  },
  fields: {
    number: {
      selector: '#card-number'
    },
    cvv: {
      selector: '#cvv',
      placeholder: '•••'
    },
    expirationDate: {
      selector: '#expiration-date',
      type: 'month'
    }
  }
}, callback);

Right to Left Language Support

braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    'input': {
      // other styles
      direction: 'rtl'
    },
  },
  fields: {
    number: {
      selector: '#card-number',
      // Credit card formatting is not currently supported
      // with RTL languages, so we need to turn it off for the number input
      formatInput: false
    },
    cvv: {
      selector: '#cvv',
      placeholder: '•••'
    },
    expirationDate: {
      selector: '#expiration-date',
      type: 'month'
    }
  }
}, callback);

(static) supportsInputFormatting() → {Boolean}

Returns false if input formatting will be automatically disabled due to browser incompatibility. Otherwise, returns true. For a list of unsupported browsers, go here.

Source:
Example

Conditionally choosing split expiration date inputs if formatting is unavailable

var canFormat = braintree.hostedFields.supportsInputFormatting();
var fields = {
  number: {
    selector: '#card-number'
  },
  cvv: {
    selector: '#cvv'
  }
};

if (canFormat) {
  fields.expirationDate = {
    selection: '#expiration-date'
  };
  functionToCreateAndInsertExpirationDateDivToForm();
} else {
  fields.expirationMonth = {
    selection: '#expiration-month'
  };
  fields.expirationYear = {
    selection: '#expiration-year'
  };
  functionToCreateAndInsertExpirationMonthAndYearDivsToForm();
}

braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    // Styles
  },
  fields: fields
}, callback);

Type Definitions

field :object

Fields used in fields options

Properties:
Name Type Attributes Default Description
selector string

A CSS selector to find the container where the hosted field will be inserted.
placeholder string <optional>

Will be used as the placeholder attribute of the input. If placeholder is not natively supported by the browser, it will be polyfilled.
type string <optional>

Will be used as the type attribute of the input. To mask cvv input, for instance, type: "password" can be used.
formatInput boolean <optional>
 true

Enable or disable automatic formatting on this field.
select object | boolean <optional>

If truthy, this field becomes a <select> dropdown list. This can only be used for expirationMonth and expirationYear fields. If you do not use a placeholder property for the field, the current month/year will be the default selected value.

Properties
Name Type Attributes Description
options Array.<string> <optional>

An array of 12 strings, one per month. This can only be used for the expirationMonth field. For example, the array can look like ['01 - January', '02 - February', ...].
maxlength number <optional>

This option applies only to the CVV and postal code fields. Will be used as the maxlength attribute of the input if it is less than the default. The primary use cases for the maxlength option are: limiting the length of the CVV input for CVV-only verifications when the card type is known and limiting the length of the postal code input when cards are coming from a known region.
minlength number <optional>
 3

This option applies only to the postal code field. Will be used as the minlength attribute of the input. The default value is 3, representing the Icelandic postal code length. This option's primary use case is to increase the minlength, e.g. for US customers, the postal code minlength can be set to 5.
Source:

fieldOptions :object

An object that has field objects for each field. Used in create.

Properties:
Name Type Attributes Description
number field <optional>

A field for card number.
expirationDate field <optional>

A field for expiration date in MM/YYYY format. This should not be used with the expirationMonth and expirationYear properties.
expirationMonth field <optional>

A field for expiration month in MM format. This should be used with the expirationYear property.
expirationYear field <optional>

A field for expiration year in YYYY format. This should be used with the expirationMonth property.
cvv field <optional>

A field for 3 or 4 digit CVV or CID.
postalCode field <optional>

A field for postal or region code.
Source:

styleOptions :object

An object that represents CSS that will be applied in each hosted field. This object looks similar to CSS. Typically, these styles involve fonts (such as font-family or color).

These are the CSS properties that Hosted Fields supports. Any other CSS should be specified on your page and outside of any Braintree configuration. Trying to set unsupported properties will fail and put a warning in the console.

Supported CSS properties are: appearance color direction font-family font-size-adjust font-size font-stretch font-style font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant font-weight font letter-spacing line-height opacity outline text-shadow transition -moz-appearance -moz-osx-font-smoothing -moz-tap-highlight-color -moz-transition -webkit-appearance -webkit-font-smoothing -webkit-tap-highlight-color -webkit-transition

Source: