braintree-web/hosted-fields

Members

(static) VERSION :string

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

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

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', ...].
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: