'use strict';
/** @module braintree-web/hosted-fields */
var HostedFields = require('./external/hosted-fields');
var basicComponentVerification = require('../lib/basic-component-verification');
var errors = require('./shared/errors');
var supportsInputFormatting = require('restricted-input/supports-input-formatting');
var wrapPromise = require('@braintree/wrap-promise');
var BraintreeError = require('../lib/braintree-error');
var Promise = require('../lib/promise');
var VERSION = process.env.npm_package_version;
/**
* Fields used in {@link module:braintree-web/hosted-fields~fieldOptions fields options}
* @typedef {object} field
* @property {string} selector A CSS selector to find the container where the hosted field will be inserted.
* @property {string} [placeholder] Will be used as the `placeholder` attribute of the input. If `placeholder` is not natively supported by the browser, it will be polyfilled.
* @property {string} [type] Will be used as the `type` attribute of the input. To mask `cvv` input, for instance, `type: "password"` can be used.
* @property {boolean} [formatInput=true] Enable or disable automatic formatting on this field.
* @property {object|boolean} [maskInput=false] Enable or disable input masking when input is not focused. If set to `true` instead of an object, the defaults for the `maskInput` parameters will be used.
* @property {string} [maskInput.character=•] The character to use when masking the input. The default character ('•') uses a unicode symbol, so the webpage must support UTF-8 characters when using the default.
* @property {Boolean} [maskInput.showLastFour=false] Only applicable for the credit card field. Whether or not to show the last 4 digits of the card when masking.
* @property {object|boolean} [select] 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.
* @property {string[]} [select.options] 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', ...]`.
* @property {number} [maxlength] 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.
* @property {number} [minlength=3] This option applies only to the cvv and postal code fields. Will be used as the `minlength` attribute of the input.
* For postal code fields, 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.
* For cvv fields, the default value is 3. The `minlength` attribute only applies to integrations capturing a cvv without a number field.
* @property {string} [prefill] A value to prefill the field with. For example, when creating an update card form, you can prefill the expiration date fields with the old expiration date data.
* @property {boolean} [rejectUnsupportedCards=false] Only allow card types that your merchant account is able to process. Unsupported card types will invalidate the card form. e.g. if you only process Visa cards, a customer entering a American Express card would get an invalid card field. This can only be used for the `number` field.
*/
/**
* An object that has {@link module:braintree-web/hosted-fields~field field objects} for each field. Used in {@link module:braintree-web/hosted-fields~create create}.
* @typedef {object} fieldOptions
* @property {field} [number] A field for card number.
* @property {field} [expirationDate] A field for expiration date in `MM/YYYY` format. This should not be used with the `expirationMonth` and `expirationYear` properties.
* @property {field} [expirationMonth] A field for expiration month in `MM` format. This should be used with the `expirationYear` property.
* @property {field} [expirationYear] A field for expiration year in `YYYY` format. This should be used with the `expirationMonth` property.
* @property {field} [cvv] A field for 3 or 4 digit card verification code (like CVV or CID). If you wish to create a CVV-only payment method nonce to verify a card already stored in your Vault, omit all other fields to only collect CVV.
* @property {field} [postalCode] A field for postal or region code.
*/
/**
* 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`).
*
* You may also pass the name of a class on your site that contains the styles you would like to apply. The style properties will be automatically pulled off the class and applied to the Hosted Fields inputs. Note: this is recomended for `input` elements only. If using a `select` for the expiration date, unexpected styling may occur.
*
* 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`
* `padding`
* `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`
* @typedef {object} styleOptions
*/
/**
* @static
* @function create
* @param {object} options Creation options:
* @param {Client} options.client A {@link Client} instance.
* @param {fieldOptions} options.fields A {@link module:braintree-web/hosted-fields~fieldOptions set of options for each field}.
* @param {styleOptions} [options.styles] {@link module:braintree-web/hosted-fields~styleOptions Styles} applied to each field.
* @param {callback} [callback] The second argument, `data`, is the {@link HostedFields} instance. If no callback is provided, `create` returns a promise that resolves with the {@link HostedFields} instance.
* @returns {void}
* @example
* 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);
* @example <caption>Applying styles with a class name</caption>
* // 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);
* @example <caption>Right to Left Language Support</caption>
* 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);
* @example <caption>Setting up Hosted Fields to tokenize CVV only</caption>
* braintree.hostedFields.create({
* client: clientInstance,
* fields: {
* // Only add the `cvv` option.
* cvv: {
* selector: '#cvv',
* placeholder: '•••'
* }
* }
* }, callback);
* @example <caption>Creating an expiration date update form with prefilled data</caption>
* 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);
* @example <caption>Validate the card form for supported card types</caption>
* braintree.hostedFields.create({
* client: clientInstance,
* fields: {
* number: {
* selector: '#card-number',
* rejectUnsupportedCards: true
* },
* cvv: {
* selector: '#cvv',
* placeholder: '•••'
* },
* expirationDate: {
* selector: '#expiration-date',
* type: 'month'
* }
* },
* }, callback);
*/
function create(options) {
return basicComponentVerification.verify({
name: 'Hosted Fields',
client: options.client
}).then(function () {
var integration = new HostedFields(options);
return new Promise(function (resolve, reject) {
integration.on('ready', function () {
resolve(integration);
});
integration.on('timeout', function () {
reject(new BraintreeError(errors.HOSTED_FIELDS_TIMEOUT));
});
});
});
}
module.exports = {
/**
* @static
* @function supportsInputFormatting
* @description Returns false if input formatting will be automatically disabled due to browser incompatibility. Otherwise, returns true. For a list of unsupported browsers, [go here](https://github.com/braintree/restricted-input/blob/master/README.md#browsers-where-formatting-is-turned-off-automatically).
* @returns {Boolean} Returns false if input formatting will be automatically disabled due to browser incompatibility. Otherwise, returns true.
* @example
* <caption>Conditionally choosing split expiration date inputs if formatting is unavailable</caption>
* 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);
*/
supportsInputFormatting: supportsInputFormatting,
create: wrapPromise(create),
/**
* @description The current version of the SDK, i.e. `{@pkg version}`.
* @type {string}
*/
VERSION: VERSION
};