braintree-web/hosted-fields

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

Applying styles with a class name

// in document head
<style>
  .braintree-input-class {
    color: black;
  }
  .braintree-valid-class {
    color: green;
  }
  .braintree-invalid-class {
    color: red;
  }
</style>
// in a script tag
braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    'input': 'braintree-input-class',
    '.invalid': 'braintree-invalid-class',
    '.valid': {
      // you can also use the object syntax alongside
      // the class name syntax
      color: green;
    }
  },
  fields: {
    number: {
      selector: '#card-number'
    },
    // etc...
  }
}, 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);

Setting up Hosted Fields to tokenize CVV only

braintree.hostedFields.create({
  client: clientInstance,
  fields: {
    // Only add the `cvv` option.
    cvv: {
      selector: '#cvv',
      placeholder: '•••'
    }
  }
}, callback);

Creating an expiration date update form with prefilled data

var storedCreditCardInformation = {
  // get this info from your server
  // with a payment method lookup
  month: '09',
  year: '2017'
};

braintree.hostedFields.create({
  client: clientInstance,
  fields: {
    expirationMonth: {
      selector: '#expiration-month',
      prefill: storedCreditCardInformation.month
    },
    expirationYear: {
      selector: '#expiration-year',
      prefill: storedCreditCardInformation.year
    }
  }
}, callback);

Validate the card form for supported card types

braintree.hostedFields.create({
  client: clientInstance,
  fields: {
    number: {
      selector: '#card-number',
      rejectUnsupportedCards: true
    },
    cvv: {
      selector: '#cvv',
      placeholder: '•••'
    },
    expirationDate: {
      selector: '#expiration-date',
      type: 'month'
    }
  },
}, callback);

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