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

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

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
    },
    expirationMonth: {
      selector: '#expiration-year',
      prefill: storedCreditCardInformation.year
    }
  }
}, 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);