'use strict';
/** @module braintree-web/hosted-fields */
var HostedFields = require('./external/hosted-fields');
var supportsInputFormatting = require('restricted-input/supports-input-formatting');
var wrapPromise = require('@braintree/wrap-promise');
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} [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 postal code field. Will be used as the `minlength` attribute of the input. 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.
*/
/**
* 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 CVV or CID.
* @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`).
*
* 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`
* @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>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);
*/
function create(options) {
var integration;
return new Promise(function (resolve) {
integration = new HostedFields(options);
integration.on('ready', function () {
resolve(integration);
});
});
}
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
};