braintree/hosted-fields

Members

(static) VERSION

Properties:
Name Type Description
VERSION string

the current version of the SDK
Source:

Methods

(static) create(options, callback) → {void}

Parameters:
Name Type 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 errback

The second argument, data, is the HostedFields instance
Source:
Returns:
Type
void
Example
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'
    }
  }
}, callback);

Type Definitions

field

Fields used in fields options

Type:
  • Object
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.
formatInput boolean <optional>
 true

Enable or disable automatic formatting on this field.
Source:

fieldOptions

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

Type:
  • Object
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

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.

color 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 line-height opacity outline text-shadow transition -moz-osx-font-smoothing -moz-tap-highlight-color -moz-transition -webkit-font-smoothing -webkit-tap-highlight-color -webkit-transition

Type:
  • Object
Source: