@flittpayments/js-sdk 2.0.0

package/dist/esm/checkout.js

@@ -0,0 +1,2574 @@
+/**
+ * Modules registry
+ * @type {Object<string,any>}
+ */
+const modules = {};
+/**
+ * @type {Object<string,any>}
+ */
+const instance = {};
+/**
+ * @param {string} name
+ * @param {Object} [params]
+ * @returns {{}}
+ */
+const newModule = function (name, params) {
+  if (!modules[name]) {
+    throw Error(['module is undefined', name].join(' '))
+  }
+  return new modules[name](params || {})
+};
+
+const addModule = function (name, module) {
+  if (modules[name]) {
+    throw Error(['module already added', name].join(' '))
+  }
+  modules[name] = module;
+};
+
+function Component(name, params) {
+  if (instance[name]) return instance[name]
+  return (instance[name] = newModule(name, params))
+}
+
+Component.get = function (name, params) {
+  return newModule(name, params)
+};
+
+Component.add = function (name, module) {
+  addModule(name, module);
+  return this
+};
+
+const digitTest = /^\d+$/;
+const keyBreaker = /([^\[\]]+)|(\[\])/g;
+const paramTest = /([^?#]*)(#.*)?$/;
+const r20 = /%20/g;
+const rbracket = /\[\]$/;
+const matchSymbol = /\s([a-zA-Z]+)/;
+
+const prep = (str) => {
+  return decodeURIComponent(str.replace(/\+/g, ' '))
+};
+const flatten = (array) => {
+  let result = [];
+  forEach(array, (item) => {
+    result = result.concat(isArray(item) ? flatten(item) : item);
+  });
+  return result
+};
+
+const recursiveParams = (prefix, obj, next) => {
+  if (isArray(obj)) {
+    forEach(obj, (item, prop) => {
+      if (rbracket.test(prefix)) {
+        next(prefix, item);
+      } else {
+        recursiveParams(prefix + '[' + (isPlainObject(obj) ? prop : '') + ']', item, next);
+      }
+    });
+  } else if (isPlainObject(obj)) {
+    forEach(obj, (item, prop) => {
+      recursiveParams(prefix + '[' + prop + ']', item, next);
+    });
+  } else {
+    next(prefix, obj);
+  }
+};
+
+const getType = (o) => {
+  return {}.toString.call(o).match(matchSymbol)[1].toLowerCase()
+};
+const isPlainObject = (o) => {
+  return !!o && typeof o === 'object' && o.constructor === Object
+};
+
+const isFunction = (o) => {
+  return getType(o) === 'function'
+};
+
+const isArray = (o) => {
+  return getType(o) === 'array'
+};
+
+const isElement = (o) => {
+  return o && o.nodeType === 1
+};
+
+const toArray = (o) => {
+  return [].slice.call(o)
+};
+
+const hasProp = (o, v) => {
+  return o && o.hasOwnProperty(v)
+};
+
+const forEach = (ob, cb, cx) => {
+  for (let p in ob) if (hasProp(ob, p)) cb.call(cx || null, ob[p], p);
+};
+
+const cleanObject = (ob) => {
+  for (let p in ob) {
+    if (hasProp(ob, p)) {
+      if (ob[p].length === 0) {
+        if (isArray(ob)) ob.splice(p, 1);
+        if (isPlainObject(ob)) delete ob[p];
+      } else if (isPlainObject(ob[p])) {
+        cleanObject(ob[p]);
+      }
+    }
+  }
+  return ob
+};
+
+const extend = (obj, ...args) => {
+  forEach(args, function (o) {
+    if (o !== null) {
+      forEach(o, function (value, key) {
+        if (isPlainObject(value)) {
+          obj[key] = extend(obj[key] || {}, value);
+        } else {
+          obj[key] = value;
+        }
+      });
+    }
+  });
+  return obj
+};
+
+const uuid = () => {
+  let a = 0,
+    b = '';
+  while (a++ < 36) {
+    if ((a * 51) & 52) {
+      b += (a ^ 15 ? 8 ^ (Math.random() * (a ^ 20 ? 16 : 4)) : 4).toString(16);
+    } else {
+      b += '-';
+    }
+  }
+  return b
+};
+
+const isObject = (o) => {
+  return getType(o) === 'object'
+};
+
+const isRegexp = (o) => {
+  return getType(o) === 'regexp'
+};
+
+const isArguments = (o) => {
+  return getType(o) === 'arguments'
+};
+
+const isError = (o) => {
+  return getType(o) === 'error'
+};
+
+const isDate = (o) => {
+  return getType(o) === 'date'
+};
+
+const isString = (o) => {
+  return getType(o) === 'string'
+};
+
+const isNumber = (o) => {
+  return getType(o) === 'number'
+};
+
+const map = (ob, cb, cx) => {
+  let p,
+    t,
+    r = [];
+  for (p in ob) if (hasProp(ob, p)) if ((t = cb.call(cx || null, ob[p], p)) !== undefined) r[p] = t;
+  return r
+};
+
+const querySelectorAll = (o, p) => {
+  return toArray((p || document).querySelectorAll(o))
+};
+
+const querySelector = (o, p) => {
+  return (p || document).querySelector(o)
+};
+
+const deparam = (params) => {
+  const data = {};
+  if (params.charAt(0) === '?') params = params.slice(1);
+  if (params && paramTest.test(params)) {
+    forEach(params.split('&'), (pair) => {
+      let parts = pair.split('='),
+        key = prep(parts.shift()),
+        value = prep(parts.join('=')),
+        current = data;
+      if (key) {
+        parts = key.match(keyBreaker);
+        for (let j = 0, l = parts.length - 1; j < l; j++) {
+          if (!current[parts[j]]) {
+            current[parts[j]] = digitTest.test(parts[j + 1]) || parts[j + 1] === '[]' ? [] : {};
+          }
+          current = current[parts[j]];
+        }
+        const lastPart = parts.pop();
+        if (lastPart === '[]') {
+          current.push(value);
+        } else {
+          current[lastPart] = value;
+        }
+      }
+    });
+  }
+  return data
+};
+
+const param = (obj) => {
+  const result = [];
+  forEach(obj, (item, prop) => {
+    recursiveParams(prop, item, (key, value) => {
+      value = value == null ? '' : value;
+      result.push([encodeURIComponent(key), encodeURIComponent(value)].join('='));
+    });
+  });
+  return result.join('&').replace(r20, '+')
+};
+
+const removeElement = (el) => {
+  el.parentNode.removeChild(el);
+};
+
+const createElement = (tag) => {
+  return document.createElement(tag)
+};
+
+const addClass = (...args) => {
+  const el = args.shift();
+  if (isElement(el) === false) return
+  const classList = el.className.trim().split(/\s+/);
+  const tokens = flatten(args.map((item) => item.trim().split(/\s+/)));
+  tokens.forEach((token) => {
+    if (token && !~classList.indexOf(token)) {
+      classList.push(token);
+    }
+  });
+  el.className = classList.join(' ').trim();
+};
+
+const removeClass = (...args) => {
+  const el = args.shift();
+  if (isElement(el) === false) return
+  const classList = el.className.trim().split(/\s+/);
+  const tokens = flatten(args.map((item) => item.trim().split(/\s+/)));
+  tokens.forEach((token) => {
+    if (token) {
+      const index = classList.indexOf(token);
+      if (!!~index) {
+        classList.splice(index, 1);
+      }
+    }
+  });
+  el.className = classList.join(' ').trim();
+};
+
+const removeAttr = (el, attrs) => {
+  if (isElement(el) === false) return false
+  if (isPlainObject(attrs)) {
+    forEach(attrs, (value) => {
+      el.removeAttribute(value);
+    });
+  }
+};
+
+const addAttr = (el, attrs) => {
+  if (isElement(el) === false) return false
+  if (isPlainObject(attrs)) {
+    forEach(attrs, (value, name) => {
+      el.setAttribute(name, value);
+    });
+  }
+};
+
+const getStyle = (el, prop, getComputedStyle) => {
+  getComputedStyle = window.getComputedStyle;
+  return (getComputedStyle ? getComputedStyle(el) : el['currentStyle'])[
+    prop.replace(/-(\w)/gi, function (word, letter) {
+      return letter.toUpperCase()
+    })
+  ]
+};
+
+const getPath = (path) => {
+  const props = path.split('.');
+  const first = props.shift();
+  let value = null;
+  if (hasProp(window, first)) {
+    value = window[first];
+    forEach(props, (name) => {
+      value = hasProp(value, name) ? value[name] : null;
+    });
+  }
+  return value
+};
+
+const stringFormat = (format, params, expr) => {
+  return (format || '').replace(expr || /{(.+?)}/g, (match, prop) => {
+    return params[prop] || match
+  })
+};
+
+const cssUnit = (value, unit) => {
+  return String(value || 0)
+    .concat(unit || '')
+    .concat(' !important')
+};
+/**
+ * @function
+ * @type {function(*, *, *)}
+ */
+const getPaymentRequest = ((cx) => {
+  let NativePaymentRequest;
+  if (hasProp(cx, 'PaymentRequest') && isFunction(cx.PaymentRequest)) {
+    NativePaymentRequest = cx.PaymentRequest;
+  }
+  return (methods, details, options) => {
+    let request = null;
+    details = details || {};
+    details.id = uuid();
+    options = options || {};
+    if (NativePaymentRequest) {
+      try {
+        request = new NativePaymentRequest(methods, details, options);
+      } catch (e) {
+        request = null;
+      }
+    }
+    return request
+  }
+})(window);
+
+const jsonParse = (value, defaults) => {
+  try {
+    return JSON.parse(value)
+  } catch (e) {
+    return defaults
+  }
+};
+
+var Utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  addAttr: addAttr,
+  addClass: addClass,
+  cleanObject: cleanObject,
+  createElement: createElement,
+  cssUnit: cssUnit,
+  deparam: deparam,
+  extend: extend,
+  forEach: forEach,
+  getPath: getPath,
+  getPaymentRequest: getPaymentRequest,
+  getStyle: getStyle,
+  getType: getType,
+  hasProp: hasProp,
+  isArguments: isArguments,
+  isArray: isArray,
+  isDate: isDate,
+  isElement: isElement,
+  isError: isError,
+  isFunction: isFunction,
+  isNumber: isNumber,
+  isObject: isObject,
+  isPlainObject: isPlainObject,
+  isRegexp: isRegexp,
+  isString: isString,
+  jsonParse: jsonParse,
+  map: map,
+  param: param,
+  querySelector: querySelector,
+  querySelectorAll: querySelectorAll,
+  removeAttr: removeAttr,
+  removeClass: removeClass,
+  removeElement: removeElement,
+  stringFormat: stringFormat,
+  toArray: toArray,
+  uuid: uuid
+});
+
+const ApiOrigin = 'https://pay.flitt.com';
+
+const ApiEndpoint = {
+  gateway: '/latest/checkout-v2/index.html',
+  element: '/latest/checkout-v2/button/element.html',
+};
+
+const ProxyUrl = 'http://secure-redirect.cloudipsp.com/submit/';
+
+const GooglePayApi = 'https://pay.google.com/gp/p/js/pay.js';
+
+const GoogleBaseRequest = {
+  apiVersion: 2,
+  apiVersionMinor: 0,
+  allowedPaymentMethods: [
+    {
+      type: 'CARD',
+      parameters: {
+        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+        allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'],
+      },
+    },
+  ],
+};
+
+const GooglePayLanguages = [
+  'ar',
+  'bg',
+  'ca',
+  'zh',
+  'hr',
+  'cs',
+  'da',
+  'nl',
+  'en',
+  'et',
+  'fi',
+  'fr',
+  'de',
+  'el',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'ms',
+  'no',
+  'pl',
+  'pt',
+  'ru',
+  'sr',
+  'sk',
+  'sl',
+  'es',
+  'sv',
+  'th',
+  'tr',
+  'uk',
+];
+
+const PaymentRequestDetails = {
+  total: {
+    label: 'Total',
+    amount: {
+      currency: 'USD',
+      value: '0.00',
+    },
+  },
+};
+
+const ApiFrameCss = {
+  width: '1px !important',
+  height: '1px !important',
+  left: '1px !important',
+  bottom: '1px !important',
+  position: 'fixed !important',
+  border: '0px !important',
+};
+
+const ButtonFrameCss = {
+  border: 'none !important',
+  margin: '0 !important',
+  padding: '0 !important',
+  display: 'block !important',
+  width: '1px !important',
+  'min-width': '100% !important',
+  background: 'transparent !important',
+  position: 'relative !important',
+  opacity: '0 !important',
+  overflow: 'hidden !important',
+  height: '100% !important',
+  outline: 'none !important',
+  'z-index': '1 !important',
+};
+
+const ButtonFrameAttrs = {
+  tabindex: '-1',
+  scrolling: 'no',
+  frameborder: 0,
+  allowtransparency: true,
+  allowpaymentrequest: true,
+};
+
+const ButtonCoverCss = {
+  'z-index': '2 !important',
+  position: 'absolute !important',
+  border: 'none !important',
+  background: 'transparent !important',
+  left: '0 !important',
+  top: '0 !important',
+  cursor: 'pointer !important',
+  outline: 'none !important',
+  width: '100% !important',
+  height: '100% !important',
+};
+
+const ButtonCoverAttrs = {
+  role: 'button',
+  'aria-pressed': 'false',
+};
+
+const ButtonContainerCss = {
+  border: '0 !important',
+  margin: '0 !important',
+  padding: '0 !important',
+  display: 'block !important',
+  background: 'transparent !important',
+  'user-select': 'none !important',
+  overflow: 'hidden !important',
+  position: 'relative !important',
+  opacity: '1 !important',
+  height: '0 !important',
+  width: '100% !important',
+  outline: 'none !important',
+};
+
+const ButtonDefaultColor = 'dark';
+
+const ButtonColorMap = {
+  dark: 'dark',
+  light: 'light',
+  black: 'dark',
+  white: 'light',
+};
+
+const ButtonLabelMap = {
+  ar: '',
+  bg: '',
+  ca: '',
+  zh: '',
+  hr: '',
+  cs: '',
+  da: '',
+  nl: '',
+  en: 'Pay with',
+  et: '',
+  es: 'Comprar con',
+  el: '',
+  fi: '',
+  fr: 'Acheter avec',
+  de: 'Zahlen über',
+  id: '',
+  it: 'Acquista con',
+  ja: '',
+  ko: '',
+  ms: '',
+  no: '',
+  pl: 'Zapłać przez',
+  pt: '',
+  ru: 'Оплатить через',
+  sr: '',
+  sk: 'Zaplatiť cez',
+  sl: '',
+  sv: '',
+  th: '',
+  tr: '',
+  uk: 'Оплатити через',
+};
+
+var Config = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ApiEndpoint: ApiEndpoint,
+  ApiFrameCss: ApiFrameCss,
+  ApiOrigin: ApiOrigin,
+  ButtonColorMap: ButtonColorMap,
+  ButtonContainerCss: ButtonContainerCss,
+  ButtonCoverAttrs: ButtonCoverAttrs,
+  ButtonCoverCss: ButtonCoverCss,
+  ButtonDefaultColor: ButtonDefaultColor,
+  ButtonFrameAttrs: ButtonFrameAttrs,
+  ButtonFrameCss: ButtonFrameCss,
+  ButtonLabelMap: ButtonLabelMap,
+  GoogleBaseRequest: GoogleBaseRequest,
+  GooglePayApi: GooglePayApi,
+  GooglePayLanguages: GooglePayLanguages,
+  PaymentRequestDetails: PaymentRequestDetails,
+  ProxyUrl: ProxyUrl
+});
+
+const PENDING = 0;
+const RESOLVED = 1;
+const REJECTED = 2;
+const PROGRESS = 3;
+
+function Deferred() {
+  const resolveCallbacks = [];
+  const rejectCallbacks = [];
+  const notifyCallbacks = [];
+  let status = PENDING;
+  let resultContext = undefined;
+  let resultArgs = null;
+  let chainArgs = null;
+  const executeCallback = (context, args, callbacks) => {
+    const list = [].concat(callbacks);
+    const save = (chainArgs, isArgs) => {
+      if (isArgs) {
+        resultArgs = Array.from(chainArgs);
+      } else {
+        resultArgs = [chainArgs];
+      }
+    };
+    const execute = () => {
+      const item = list.shift();
+      if (item) {
+        chainArgs = item.apply(resultContext, resultArgs);
+        if (chainArgs !== undefined) {
+          if (chainArgs && chainArgs.then) {
+            chainArgs.then((...chainArgs) => {
+              save(chainArgs, true);
+              execute();
+            });
+          } else {
+            save(chainArgs);
+            execute();
+          }
+        } else {
+          execute();
+        }
+      }
+    };
+    resultContext = context;
+    resultArgs = args;
+    execute();
+  };
+  /**
+   * @lends Deferred.prototype
+   */
+  const promise = {
+    done(callback) {
+      if (isFunction(callback)) {
+        if (status === REJECTED) {
+          callback.apply(resultContext, resultArgs);
+        }
+        resolveCallbacks.push(callback);
+      }
+      return this
+    },
+    fail(callback) {
+      if (isFunction(callback)) {
+        if (status === REJECTED) {
+          callback.apply(resultContext, resultArgs);
+        }
+        rejectCallbacks.push(callback);
+      }
+      return this
+    },
+    progress(callback) {
+      if (isFunction(callback)) {
+        if (status === PROGRESS) {
+          callback.apply(resultContext, resultArgs);
+        }
+        notifyCallbacks.push(callback);
+      }
+      return this
+    },
+    always(callback) {
+      return this.done(callback).fail(callback)
+    },
+    then(resolve, reject, progress) {
+      if (isFunction(resolve)) {
+        this.done(resolve);
+      }
+      if (isFunction(reject)) {
+        this.fail(reject);
+      }
+      if (isFunction(progress)) {
+        this.progress(reject);
+      }
+      return this
+    },
+    promise(object) {
+      if (object === null) {
+        return promise
+      }
+      forEach(promise, (item, prop) => {
+        object[prop] = item;
+      });
+      return object
+    },
+    state: function () {
+      return status
+    },
+    isPending() {
+      return status === PENDING
+    },
+    isRejected() {
+      return status === REJECTED
+    },
+    isResolved() {
+      return status === RESOLVED
+    },
+    resetState() {
+      status = PENDING;
+      return this
+    },
+    resolveWith(context, args) {
+      if (status === PENDING) {
+        status = RESOLVED;
+        executeCallback(context, args, resolveCallbacks);
+      }
+      return this
+    },
+    rejectWith(context, args) {
+      if (status === PENDING) {
+        status = REJECTED;
+        executeCallback(context, args, rejectCallbacks);
+      }
+      return this
+    },
+    notifyWith(context, args) {
+      if (status === PENDING) {
+        status = PROGRESS;
+        executeCallback(context, args, notifyCallbacks);
+        status = PENDING;
+      }
+      return this
+    },
+
+    resolve() {
+      return this.resolveWith(this, Array.from(arguments))
+    },
+    reject() {
+      return this.rejectWith(this, Array.from(arguments))
+    },
+    notify() {
+      return this.notifyWith(this, Array.from(arguments))
+    },
+  };
+  return promise
+}
+
+let init = false;
+const fnTest = /xyz/.test(
+  function () {
+    return 'xyz'
+  }.toString()
+)
+  ? /\b_super\b/
+  : /.*/;
+
+function ClassObject() {}
+
+ClassObject.prototype._super = function () {};
+
+ClassObject.prototype.instance = function (params) {
+  return new this.constructor(params)
+};
+
+ClassObject.prototype.proxy = function (fn) {
+  fn = typeof fn == 'string' ? this[fn] : fn;
+  return (function (cx, cb) {
+    return function () {
+      return cb.apply(cx, [this].concat(Array.prototype.slice.call(arguments)))
+    }
+  })(this, fn)
+};
+
+function superMethod(parent, name, method) {
+  return function () {
+    let temp = this._super,
+      result;
+    this._super = parent[name];
+    result = method.apply(this, arguments);
+    this._super = temp;
+    return result
+  }
+}
+
+function assign(target, instance) {
+  let prop,
+    proto,
+    parent = target.prototype;
+  init = true;
+  proto = new target();
+  init = false;
+  for (prop in instance) {
+    if (instance.hasOwnProperty(prop)) {
+      if (
+        typeof parent[prop] == 'function' &&
+        typeof instance[prop] == 'function' &&
+        fnTest.test(instance[prop])
+      ) {
+        proto[prop] = superMethod(parent, prop, instance[prop]);
+      } else {
+        proto[prop] = instance[prop];
+      }
+    }
+  }
+  return proto
+}
+
+ClassObject.extend = function extend(instance) {
+  function Class() {
+    if (!init && this) this['init'].apply(this, arguments);
+  }
+  Class.prototype = assign(this, instance);
+  Class.prototype.constructor = Class;
+  Class.extend = extend;
+  return Class
+};
+
+const Event = ClassObject.extend({
+  init() {
+    this.events = {};
+    this.empty = [];
+  },
+  on(type, callback) {
+(this.events[type] = this.events[type] || []).push(callback);
+    return this
+  },
+  off(type, callback) {
+    type || (this.events = {});
+    let list = this.events[type] || this.empty,
+      i = (list.length = callback ? list.length : 0);
+    while (i--) callback === list[i] && list.splice(i, 1);
+    return this
+  },
+  trigger(type) {
+    let e = this.events[type] || this.empty,
+      list = e.length > 0 ? e.slice(0, e.length) : e,
+      i = 0,
+      j;
+    while ((j = list[i++])) j.apply(j, this.empty.slice.call(arguments, 1));
+    return this
+  },
+});
+
+const Module = ClassObject.extend({
+  utils: Utils,
+  getListener() {
+    if (!this._listener_) this._listener_ = new Event();
+    return this._listener_
+  },
+  destroy() {
+    this.off();
+  },
+  on(type, callback) {
+    this.getListener().on(type, callback);
+    return this
+  },
+  off(type, callback) {
+    this.getListener().off(type, callback);
+    return this
+  },
+  proxy(fn) {
+    if (!this._proxy_cache_) this._proxy_cache_ = {};
+    if (this.utils.isString(fn)) {
+      if (!this._proxy_cache_[fn]) {
+        this._proxy_cache_[fn] = this._super(fn);
+      }
+      return this._proxy_cache_[fn]
+    }
+    return this._super(fn)
+  },
+  trigger() {
+    this.getListener().trigger.apply(this.getListener(), arguments);
+    return this
+  },
+  each(ob, cb) {
+    this.utils.forEach(ob, this.proxy(cb));
+  },
+  addAttr(el, ob) {
+    if (!this.utils.isElement(el)) return false
+    this.utils.forEach(ob, function (v, k) {
+      el.setAttribute(k, v);
+    });
+  },
+  addCss(el, ob) {
+    if (!this.utils.isElement(el)) return false
+    this.utils.forEach(
+      ob,
+      function (v, k) {
+        this.addCssProperty(el, k, v);
+      },
+      this
+    );
+  },
+  addCssProperty(el, style, value) {
+    let result = el.style.cssText.match(
+        new RegExp('(?:[;\\s]|^)(' + style.replace('-', '\\-') + '\\s*:(.*?)(;|$))')
+      ),
+      idx;
+    if (result) {
+      idx = result.index + result[0].indexOf(result[1]);
+      el.style.cssText =
+        el.style.cssText.substring(0, idx) +
+        style +
+        ': ' +
+        value +
+        ';' +
+        el.style.cssText.substring(idx + result[1].length);
+    } else {
+      el.style.cssText += ' ' + style + ': ' + value + ';';
+    }
+  },
+  addEvent(el, ev, cb) {
+    if (!el || !ev || !cb) return false
+    cb = this.proxy(cb);
+    if (el.addEventListener) el.addEventListener(ev, cb);
+    else if (el['attachEvent']) el['attachEvent']('on' + ev, cb);
+  },
+  removeEvent(el, ev, cb) {
+    if (!el || !ev || !cb) return false
+    cb = this.proxy(cb);
+    if (el.removeEventListener) el.removeEventListener(ev, cb, false);
+    else if (el['detachEvent']) el['detachEvent']('on' + ev, cb);
+  },
+  prepareForm(url, data, target, method) {
+    const form = this.utils.createElement('form');
+    this.addAttr(form, {
+      action: url,
+      target: target || '_self',
+      method: method || 'POST',
+    });
+    this.addCss(form, {
+      display: 'none',
+    });
+    this.utils.forEach(
+      data,
+      function (v, k, el) {
+        el = this.utils.createElement('input');
+        el.type = 'hidden';
+        el.name = k;
+        el.value = v;
+        form.appendChild(el);
+      },
+      this
+    );
+    return form
+  },
+});
+
+const Connector = Module.extend({
+  ns: 'crossDomain',
+  origin: '*',
+  uniqueId: 1,
+  signature: null,
+  init(params) {
+    this.setTarget(params.target);
+    this.setOrigin(params.origin);
+    this.create();
+  },
+  create() {
+    this.addEvent(window, 'message', 'router');
+  },
+  setOrigin(origin) {
+    this.origin = origin || '*';
+  },
+  setTarget(target) {
+    this.target = target;
+    return this
+  },
+  getUID() {
+    return ++this.uniqueId
+  },
+  destroy() {
+    this.removeEvent(window, 'message', 'router');
+    this._super();
+  },
+  router(window, ev, response) {
+    if (this.target !== ev.source) return false
+    try {
+      response = JSON.parse(ev.data);
+    } catch (e) {}
+    if (response && response.action && response.data) {
+      this.trigger(response.action, response.data);
+    }
+  },
+  send(action, data, request, options) {
+    if (!this.target) {
+      return
+    }
+    request = JSON.stringify({
+      action: action,
+      data: data,
+    });
+    options = {
+      targetOrigin: this.origin,
+      delegate: 'payment',
+    };
+    try {
+      this.target.postMessage(request, options);
+    } catch (e) {
+      this.target.postMessage(request, this.origin, []);
+    }
+  },
+});
+
+var styles = (data) => `
+<style>
+    .flitt-modal {
+        box-sizing: border-box;
+        margin: 100px auto;
+        max-width: 680px;
+        background-color: #fff;
+        border-radius: 5px;
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+        overflow: hidden;
+    }
+
+    @media (max-width: 850px) {
+        .flitt-modal {
+            margin: 50px auto;
+        }
+    }
+
+    @media (max-width: 695px) {
+        .flitt-modal {
+            max-width: 100%;
+            margin: 5px;
+        }
+    }
+
+    .flitt-modal-wrapper {
+        box-sizing: border-box;
+        overflow: auto;
+        position: fixed;
+        z-index: 99999;
+        left: 0;
+        bottom: 0;
+        top: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .flitt-modal-header {
+        box-sizing: border-box;
+        background-color: #fafafa;
+        height: 50px;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+    }
+
+    .flitt-modal-close {
+        box-sizing: border-box;
+        float: right;
+        overflow: hidden;
+        height: 50px;
+        text-decoration: none;
+        border-top-right-radius: 5px;
+        color: #949494;
+    }
+
+    .flitt-modal-close:hover, .flitt-modal-close:focus, .flitt-modal-close:active {
+        text-decoration: none;
+        color: #646464;
+    }
+
+    .flitt-modal-close:before {
+        content: "×";
+        font-size: 50px;
+        line-height: 50px;
+        padding: 0 10px;
+    }
+
+    .flitt-modal-title {
+        box-sizing: border-box;
+        border-top-left-radius: 5px;
+        line-height: 20px;
+        height: 50px;
+        padding: 5px 15px;
+        font-size: 12px;
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .flitt-modal-content {
+        box-sizing: border-box;
+        border-bottom-left-radius: 5px;
+        min-height: 650px;
+    }
+    .flitt-modal-iframe {
+        overflow-x: hidden;
+        border: 0;
+        display: block;
+        width: 100%;
+        height: 750px;
+    }
+</style>
+`;
+
+var acs = (data) => `
+${styles()}
+<div class="flitt-modal-wrapper">
+    <div class="flitt-modal">
+        <div class="flitt-modal-header">
+            <a href="javascript:void(0)" class="flitt-modal-close"></a>
+            <div class="flitt-modal-title">
+                ${data.messages.modalHeader}
+                <a href='javascript:void(0)'>${data.messages.modalLinkLabel}</a>
+            </div>
+        </div>
+        <div class="flitt-modal-content">
+            <iframe src="about:blank" class="flitt-modal-iframe" frameborder="0" allowtransparency="true"></iframe>
+        </div>
+    </div>
+</div>
+`;
+
+var Views = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  acs: acs
+});
+
+function empty(name) {
+  return function (data) {
+    return ['template', name, 'not found'].join(' ')
+  }
+}
+
+const Template = ClassObject.extend({
+  init(name) {
+    this.view = Views[name] || empty(name);
+  },
+  render(data) {
+    return this.view(data)
+  },
+});
+
+const Modal = Module.extend({
+  init(data) {
+    this.checkout = data.checkout;
+    this.model = data.model || {};
+    this.messages = data.checkout.params.messages || {};
+    this.template = new Template('acs');
+    this.body = this.utils.querySelector('body');
+    this.initModal();
+    this.initConnector();
+  },
+  initModal() {
+    this.name = ['modal-iframe', this.getRandomNumber()].join('-');
+    this.modal = this.utils.createElement('div');
+    this.modal.innerHTML = this.template.render({
+      model: this.model,
+      messages: this.messages,
+    });
+    this.iframe = this.find('.flitt-modal-iframe');
+    this.addAttr(this.iframe, { name: this.name, id: this.name });
+    if (this.model['send_data']) {
+      this.form = this.prepareForm(this.model['url'], this.model['send_data'], this.name);
+      this.modal.appendChild(this.form);
+    } else {
+      this.iframe.src = this.model['url'];
+    }
+    this.addEvent(this.find('.flitt-modal-close'), 'click', 'closeModal');
+    this.addEvent(this.find('.flitt-modal-title a'), 'click', 'submitForm');
+    this.initScrollbar();
+    this.body.appendChild(this.modal);
+    if (this.form) {
+      this.form.submit();
+    }
+  },
+  measureScrollbar() {
+    const scrollDiv = document.createElement('div');
+    scrollDiv.className = 'modal-scrollbar-measure';
+    this.body.appendChild(scrollDiv);
+    this.utils.removeElement(scrollDiv);
+    return scrollDiv.offsetWidth - scrollDiv.clientWidth
+  },
+  checkScrollbar() {
+    let documentElementRect;
+    let fullWindowWidth = window.innerWidth;
+    if (!fullWindowWidth) {
+      documentElementRect = document.documentElement.getBoundingClientRect();
+      fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
+    }
+    this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
+    this.scrollbarWidth = this.measureScrollbar();
+  },
+  initScrollbar() {
+    this.checkScrollbar();
+    this.bodyPad = parseInt(this.utils.getStyle(this.body, 'padding-right') || 0, 10);
+    this.originalBodyPad = document.body.style.paddingRight || '';
+    this.originalOverflow = document.body.style.overflow || '';
+    if (this.bodyIsOverflowing) {
+      this.addCss(this.body, {
+        paddingRight: [this.bodyPad + this.scrollbarWidth, 'px'].join(''),
+        overflow: 'hidden',
+      });
+    }
+  },
+  resetScrollbar() {
+    this.addCss(this.body, {
+      paddingRight: this.originalBodyPad ? [this.originalBodyPad, 'px'].join('') : '',
+      overflow: this.originalOverflow,
+    });
+  },
+  getRandomNumber() {
+    return Math.round(Math.random() * 1000000000)
+  },
+  find(selector) {
+    return this.utils.querySelector(selector, this.modal)
+  },
+  closeModal(el, ev) {
+    ev.preventDefault();
+    this.trigger('close', this.data);
+    this.removeModal();
+  },
+  submitForm(el, ev) {
+    ev.preventDefault();
+    this.trigger('submit', this.data);
+    this.addAttr(this.form, {
+      target: '_blank',
+    });
+    this.form.submit();
+  },
+  removeModal() {
+    this.destroy();
+  },
+  destroy() {
+    this.utils.removeElement(this.modal);
+    this.resetScrollbar();
+    this.connector.destroy();
+    this._super();
+  },
+  initConnector() {
+    this.connector = new Connector({ target: this.iframe.contentWindow });
+    this.connector.on('response', this.proxy('onResponse'));
+  },
+  onResponse(ev, data) {
+    this.sendResponse(data);
+    this.removeModal();
+  },
+  sendResponse(data) {
+    this.checkout.connector.send('request', {
+      uid: data.uid,
+      action: 'api.checkout.proxy',
+      method: 'send',
+      params: data,
+    });
+  },
+});
+
+const Model = Module.extend({
+  init(data) {
+    this.data = data || {};
+    this.create();
+  },
+  create() {},
+  eachProps(args) {
+    const name = args[1] ? args[0] : null;
+    const callback = args[1] ? args[1] : args[0];
+    const list = name ? this.alt(name, []) : this.data;
+    return {
+      list: list,
+      callback: callback,
+    }
+  },
+  each() {
+    const props = this.eachProps(arguments);
+    for (let prop in props.list) {
+      if (props.list.hasOwnProperty(prop)) {
+        props.callback(this.instance(props.list[prop]), props.list[prop], prop);
+      }
+    }
+  },
+  filter() {
+    const props = this.eachProps(arguments);
+    for (let prop in props.list) {
+      if (props.list.hasOwnProperty(prop)) {
+        const item = this.instance(props.list[prop]);
+        if (props.callback(item, props.list[prop], prop)) {
+          return props.list[prop]
+        }
+      }
+    }
+  },
+  find() {
+    const props = this.eachProps(arguments);
+    for (let prop in props.list) {
+      if (props.list.hasOwnProperty(prop)) {
+        const item = this.instance(props.list[prop]);
+        if (props.callback(item, props.list[prop], prop)) {
+          return item
+        }
+      }
+    }
+    return false
+  },
+  alt(prop, defaults) {
+    prop = this.attr(prop);
+    return typeof prop === 'undefined' ? defaults : prop
+  },
+  attr(key, value) {
+    let i = 0,
+      data = this.data,
+      name = (key || '').split('.'),
+      prop = name.pop(),
+      len = arguments.length;
+    for (; i < name.length; i++) {
+      if (data && data.hasOwnProperty(name[i])) {
+        data = data[name[i]];
+      } else {
+        if (len === 2) {
+          data = data[name[i]] = {};
+        } else {
+          break
+        }
+      }
+    }
+    if (len === 1) {
+      return data ? data[prop] : undefined
+    }
+    if (len === 2) {
+      data[prop] = value;
+    }
+    return this
+  },
+  stringify() {
+    return JSON.stringify(this.serialize())
+  },
+  serialize() {
+    return this.data
+  },
+});
+
+const Response = Model.extend({
+  stringFormat(string) {
+    const that = this;
+    return (string || '').replace(/{(.+?)}/g, function (match, prop) {
+      return that.attr(['order.order_data', prop].join('.')) || match
+    })
+  },
+  setConnector(connector) {
+    this.connector = connector;
+    return this
+  },
+  setUID(uid) {
+    this.uid = uid;
+    return this
+  },
+  getUID() {
+    return this.uid
+  },
+  formDataProxy(url, data, target, method) {
+    location.assign(
+      [
+        ProxyUrl,
+        JSON.stringify({
+          url: url,
+          params: data,
+          target: target,
+          method: method,
+        }),
+      ].join('#')
+    );
+  },
+  formDataSubmit(url, data, target, method) {
+    if (url.match(/^http:/)) {
+      return this.formDataProxy(url, data, target, method)
+    }
+    const action = this.stringFormat(url);
+    const form = this.prepareForm(action, data, target, method);
+    const body = this.utils.querySelector('body');
+    body.appendChild(form);
+    form.submit();
+    form.parentNode.removeChild(form);
+  },
+  inProgress() {
+    return this.attr('order.in_progress')
+  },
+  readyToSubmit() {
+    return this.attr('order.ready_to_submit')
+  },
+  waitForResponse() {
+    return this.attr('order.pending')
+  },
+  needVerifyCode() {
+    return this.attr('order.need_verify_code')
+  },
+  redirectUrl() {
+    if (this.attr('url')) {
+      this.redirectToUrl(this.attr('url'));
+      return true
+    }
+    return false
+  },
+  redirectToUrl(url) {
+    location.assign(url);
+  },
+  submitToMerchant() {
+    const ready = this.attr('order.ready_to_submit');
+    const url = this.attr('model.url') || this.attr('order.response_url');
+    const method = this.attr('order.method');
+    const action = this.attr('order.action');
+    const data = this.attr('model.send_data') || this.attr('order.order_data');
+    if (ready && url && data) {
+      if (action === 'redirect' || data['get_without_parameters'] === true) {
+        this.redirectToUrl(url);
+      } else {
+        this.formDataSubmit(url, data, '_self', method);
+      }
+      return true
+    }
+  },
+  submitForm() {
+    const method = this.attr('method');
+    const url = this.attr('url');
+    const data = this.attr('send_data');
+    if (url && data) {
+      this.formDataSubmit(url, data, '_self', method);
+      return true
+    }
+    return false
+  },
+  sendResponse() {
+    const action = this.attr('action');
+    if (action === 'submit') return this.submitForm()
+    if (action === 'redirect') return this.redirectUrl()
+    return false
+  },
+  prepare3dsData() {
+    const params = {};
+    const data = this.attr('submit3ds');
+    if (data['3ds']) {
+      params.token = this.attr('token');
+      params.uid = this.getUID();
+      params.frame = true;
+      if (data['send_data'].TermUrl) {
+        data['send_data'].TermUrl = [data['send_data'].TermUrl, this.utils.param(params)].join(
+          '#!!'
+        );
+      }
+    }
+    return data
+  },
+  waitOn3dsDecline() {
+    const data = this.alt('submit3ds.checkout_data', {
+      js_wait_on_3ds_decline: false,
+      js_wait_on_3ds_decline_duration: 0,
+    });
+    return data.js_wait_on_3ds_decline ? data.js_wait_on_3ds_decline_duration : 0
+  },
+  submit3dsForm() {
+    if (this.attr('submit3ds.checkout_data')) {
+      this.connector.trigger('modal', this.prepare3dsData());
+    }
+  },
+  supportedMethod(method) {
+    const item = this.find('methods', function (item) {
+      return item.alt('supportedMethods', '').match(method)
+    });
+    if (item) {
+      this.attr('methods', [item.serialize()]);
+    } else {
+      this.attr('methods', []);
+    }
+  },
+});
+
+const Api = Module.extend({
+  defaults: {
+    origin: ApiOrigin,
+    endpoint: ApiEndpoint,
+    messages: {
+      modalHeader:
+        'Now you will be redirected to your bank 3DSecure. If you are not redirected please refer',
+      modalLinkLabel: 'link',
+    },
+  },
+  init(params) {
+    this.initParams(params);
+  },
+  url(type, url) {
+    return [this.params.origin, this.params.endpoint[type] || '/', url || ''].join('')
+  },
+  extendParams(params) {
+    this.utils.extend(this.params, params);
+    return this
+  },
+  initParams(params) {
+    this.params = this.utils.extend({}, this.defaults);
+    this.extendParams(params);
+    this.setOrigin(this.params.origin);
+    this.loaded = false;
+    this.created = false;
+  },
+  setOrigin(origin) {
+    if (this.utils.isString(origin)) {
+      this.params.origin = origin;
+    }
+    return this
+  },
+  scope(callback) {
+    callback = this.proxy(callback);
+    if (this.createFrame().loaded === true) {
+      callback();
+    } else {
+      this.on('checkout.api', callback);
+    }
+  },
+  request(model, method, params) {
+    const defer = Deferred();
+    const data = {
+      uid: this.connector.getUID(),
+      action: model,
+      method: method,
+      params: params || {},
+    };
+    this.connector.send('request', data);
+    this.connector.on(
+      data.uid,
+      this.proxy(function (ev, response, model, action) {
+        const responseModel = new Response(response);
+        responseModel.setUID(data.uid);
+        responseModel.setConnector(this.connector);
+        action = 'resolveWith';
+        if (responseModel.attr('submit3ds')) {
+          action = 'notifyWith';
+        }
+        if (responseModel.attr('error')) {
+          action = 'rejectWith';
+        }
+        defer[action](this, [responseModel]);
+      })
+    );
+    return defer
+  },
+  loadFrame(url) {
+    this.iframe = this.utils.createElement('iframe');
+    this.addAttr(this.iframe, {
+      allowtransparency: true,
+      frameborder: 0,
+      scrolling: 'no',
+    });
+    this.addAttr(this.iframe, { src: url });
+    this.addCss(this.iframe, ApiFrameCss);
+    this.body = this.utils.querySelector('body');
+    if (this.body.firstChild) {
+      this.body.insertBefore(this.iframe, this.body.firstChild);
+    } else {
+      this.body.appendChild(this.iframe);
+    }
+    return this.iframe
+  },
+  createFrame() {
+    if (this.created === false) {
+      this.created = true;
+      this.iframe = this.loadFrame(this.url('gateway'));
+      this.connector = new Connector({
+        target: this.iframe.contentWindow,
+        origin: this.params.origin,
+      });
+      this.connector.on('load', this.proxy('onLoadConnector'));
+      this.connector.on('modal', this.proxy('onOpenModal'));
+    }
+    return this
+  },
+  onOpenModal(xhr, model) {
+    this.modal = new Modal({
+      checkout: this,
+      model: model,
+    });
+    this.modal.on('close', this.proxy('_onCloseModal'));
+  },
+  onCloseModal(modal, data) {
+    this.trigger('modal.close', modal, data);
+  },
+  onLoadConnector() {
+    this.loaded = true;
+    this.connector.off('load');
+    this.trigger('checkout.api');
+    this.off('checkout.api');
+  },
+});
+
+const GooglePayClient = Module.extend({
+  id: 'google-payments-api',
+  init() {
+    this.client = null;
+    this.wrapper = this.utils.querySelector('head');
+    this.defer = Deferred();
+  },
+  load() {
+    if (this.utils.getPath('google.payments.api.PaymentsClient')) {
+      return this.defer.resolveWith(this)
+    }
+    if (this.utils.querySelector('#'.concat(this.id))) {
+      return this.defer
+    }
+    this.script = this.utils.createElement('script');
+    this.addAttr(this.script, {
+      id: this.id,
+      async: true,
+      src: GooglePayApi,
+    });
+    this.utils.isElement(this.wrapper) && this.wrapper.appendChild(this.script);
+    this.addEvent(this.script, 'load', 'onLoadSuccess');
+    this.addEvent(this.script, 'error', 'onLoadError');
+    return this.defer
+  },
+  show(methods) {
+    const method = methods.find(function (item) {
+      return item.supportedMethods === 'https://google.com/pay'
+    });
+    const client = this.getClient({ environment: method.data.environment });
+    return client.loadPaymentData(method.data)
+  },
+  readyToPay(cx, response) {
+    if (response.result) {
+      this.defer.resolveWith(this);
+    }
+  },
+  onError(cx, error) {
+    this.defer.rejectWith(this, error);
+  },
+  onLoadSuccess() {
+    const client = this.getClient();
+    if (client)
+      client
+        .isReadyToPay(GoogleBaseRequest)
+        .then(this.proxy('readyToPay'))
+        .catch(this.proxy('onError'));
+  },
+  onLoadError() {
+    this.defer.rejectWith(this);
+  },
+  getClient(options) {
+    if (options || this.client === null) {
+      const PaymentClient = this.utils.getPath('google.payments.api.PaymentsClient');
+      if (PaymentClient) {
+        this.client = new PaymentClient(options);
+      } else {
+        this.onError(null, new Error('Google Client Error'));
+      }
+    }
+    return this.client
+  },
+});
+
+const GooglePay = new GooglePayClient();
+
+const getPaymentMethods = () => {
+  return [
+    [
+      'google',
+      {
+        supportedMethods: 'https://google.com/pay',
+        data: GoogleBaseRequest,
+      },
+    ],
+    [
+      'apple',
+      {
+        supportedMethods: 'https://apple.com/apple-pay',
+      },
+      () => hasProp(window, 'ApplePaySession'),
+    ],
+  ]
+};
+
+let requestDeferred = null;
+
+let requestSupported = {
+  fallback: false,
+  provider: [],
+};
+
+const getSupportedMethods = () => {
+  if (requestDeferred) return requestDeferred
+  requestDeferred = Deferred();
+  const methods = getPaymentMethods();
+  const details = PaymentRequestDetails
+  ;(function check() {
+    const item = methods.shift();
+    if (item === undefined) {
+      if (requestSupported.provider.indexOf('google') === -1) {
+        requestSupported.fallback = true;
+        requestSupported.provider.push('google');
+      }
+      return requestDeferred.resolve(requestSupported)
+    }
+    const method = item.shift();
+    const config = item.shift();
+    const callback = item.shift();
+    if (isFunction(callback) && callback() === false) {
+      setTimeout(check, 25);
+      return false
+    }
+    const request = getPaymentRequest([config], details, {});
+    if (request) {
+      request
+        .canMakePayment()
+        .then(function (status) {
+          if (status === true) requestSupported.provider.push(method);
+          setTimeout(check, 25);
+        })
+        .catch(function () {
+          setTimeout(check, 25);
+        });
+    } else {
+      setTimeout(check, 25);
+    }
+  })();
+  return requestDeferred
+};
+
+const PaymentRequestInterface = Module.extend({
+  config: {
+    payment_system: '',
+    fallback: false,
+    methods: [],
+    details: {},
+    options: {},
+  },
+  supported: {
+    fallback: false,
+    provider: [],
+  },
+  payload: {
+    payment_system: null,
+    provider: [],
+  },
+  params: {},
+  getSupportedMethods() {
+    return getSupportedMethods().then((supported) => {
+      this.setSupported(supported);
+      return supported
+    })
+  },
+  init(params) {
+    this.params = params || {};
+  },
+  setSupported(supported) {
+    this.supported = supported;
+    this.trigger('supported', supported);
+    return this
+  },
+  setPayload(payload) {
+    this.payload = payload;
+    this.trigger('payload', payload);
+    return this
+  },
+  setMerchant(merchant) {
+    this.merchant = merchant;
+  },
+  setApi(api) {
+    if (api instanceof Api) this.api = api;
+    return this
+  },
+  getProviderPayload(method) {
+    return this.payload.provider[method] || {}
+  },
+  isMethodSupported(method) {
+    return this.supported.provider.indexOf(method) !== -1
+  },
+  isFallbackMethod(method) {
+    return method === 'google' && this.supported.fallback
+  },
+});
+
+const PaymentRequestApi = PaymentRequestInterface.extend({
+  request(method, params, success, failure) {
+    if (this.api) {
+      this.api.scope(
+        this.proxy(function () {
+          this.api
+            .request('api.checkout.pay', method, params)
+            .done(this.proxy(success))
+            .fail(this.proxy(failure));
+        })
+      );
+    }
+  },
+  update(data) {
+    const defer = Deferred();
+    this.request(
+      'methods',
+      data,
+      function (cx, model) {
+        this.onUpdate(cx, model);
+        defer.resolveWith(this, [model]);
+      },
+      function (cx, model) {
+        this.onError(cx, model);
+        defer.rejectWith(this, [model]);
+      }
+    );
+    return defer
+  },
+  onUpdate(cx, model) {
+    this.setPayload(model.serialize());
+  },
+  onError(cx, model) {
+    this.trigger('error', model);
+  },
+  isPending() {
+    return this.pendingState === true
+  },
+  setPending(state) {
+    this.pendingState = state;
+    setTimeout(() => {
+      this.trigger('pending', state);
+    }, 100);
+  },
+  beforeCallback(defer) {
+    defer.resolve();
+  },
+  setBeforeCallback(callback) {
+    if (isFunction(callback)) {
+      this.beforeCallback = callback;
+    }
+    return this
+  },
+  before() {
+    if (this.isPending()) return
+    this.setPending(true);
+    const defer = Deferred();
+    defer.always(
+      this.proxy(function () {
+        this.setPending(false);
+      })
+    );
+    this.beforeCallback(defer);
+    return defer
+  },
+  pay(method) {
+    if (this.isPending()) return
+    this.setPending(true);
+    const payload = this.getProviderPayload(method);
+    const response = Deferred();
+    response.always(function () {
+      this.setPending(false);
+    });
+    if (this.isMethodSupported(method) === false) {
+      return response.rejectWith(this, [{ test: true }])
+    }
+    if (this.isFallbackMethod(method)) {
+      this.makePaymentFallback(response, payload.methods);
+    } else {
+      this.makeNativePayment(response, payload);
+    }
+    return response
+      .done(function (details) {
+        this.trigger('details', {
+          payment_system: this.payload.payment_system,
+          data: details,
+        });
+      })
+      .fail(function (error) {
+        this.trigger('error', error);
+        if (this.params.embedded === true) {
+          location.reload();
+          this.trigger('reload', this.params);
+        }
+      })
+  },
+  makeNativePayment(defer, payload) {
+    const self = this;
+    const request = getPaymentRequest(payload.methods, payload.details, payload.options);
+    this.addEvent(request, 'merchantvalidation', 'merchantValidation');
+    request
+      .canMakePayment()
+      .then(function () {
+        request
+          .show()
+          .then(function (response) {
+            response.complete('success').then(function () {
+              defer.resolveWith(self, [response.details]);
+            });
+          })
+          .catch(function (e) {
+            defer.rejectWith(self, [{ code: e.code, message: e.message }]);
+          });
+      })
+      .catch(function (e) {
+        defer.rejectWith(self, [{ code: e.code, message: e.message }]);
+      });
+  },
+  makePaymentFallback(defer, methods) {
+    const self = this;
+    GooglePay.load().then(() => {
+      GooglePay.show(methods)
+        .then((details) => {
+          defer.resolveWith(self, [details]);
+        })
+        .catch((e) => {
+          defer.rejectWith(self, [{ code: e.code, message: e.message }]);
+        });
+    });
+  },
+  appleSession(params) {
+    const defer = Deferred();
+    this.request(
+      'session',
+      params,
+      function (c, model) {
+        defer.resolveWith(this, [model.serialize()]);
+      },
+      function (c, model) {
+        defer.rejectWith(this, [model]);
+      }
+    );
+    return defer
+  },
+  merchantValidation(cx, event) {
+    const { validationURL } = event;
+    const { host } = location;
+    this.appleSession({
+      url: validationURL,
+      domain: host,
+      merchant_id: this.merchant,
+    })
+      .done(function (session) {
+        try {
+          event.complete(session.data);
+        } catch (error) {
+          this.trigger('error', error);
+        }
+      })
+      .fail(function (error) {
+        this.trigger('error', error);
+      });
+  },
+});
+
+const PaymentElement = Module.extend({
+  defaults: {
+    method: null,
+    appendTo: null,
+    className: 'payment-element',
+    origin: ApiOrigin,
+    endpoint: ApiEndpoint.element,
+    mode: 'plain',
+    color: 'black',
+    lang: 'en',
+    height: 38,
+  },
+  init(params) {
+    this.params = {};
+    this.utils.extend(this.params, this.defaults);
+    this.utils.extend(this.params, params);
+    this.initElement();
+  },
+  getElementUrl() {
+    return [this.params.origin, this.params.endpoint].join('')
+  },
+  getElementOptions() {
+    return this.utils.param({
+      method: this.params.method,
+      mode: this.params.mode,
+      style: this.params.style,
+      color: this.params.color,
+      lang: this.params.lang,
+    })
+  },
+  initElement() {
+    this.element = this.utils.createElement('div');
+    this.iframe = this.utils.createElement('iframe');
+    this.button = this.utils.createElement('a');
+    this.addCss(this.element, ButtonContainerCss);
+    this.addCss(this.button, ButtonCoverCss);
+    this.addAttr(this.button, ButtonCoverAttrs);
+    this.addCss(this.iframe, ButtonFrameCss);
+    this.addAttr(this.iframe, ButtonFrameAttrs);
+    this.addAttr(this.iframe, {
+      src: [this.getElementUrl(), this.getElementOptions()].join('?'),
+    });
+    this.addEvent(this.iframe, 'load', 'onloadConnector');
+    this.addEvent(this.iframe, 'error', 'errorConnector');
+    this.addAttr(this.element, {
+      class: this.params.className,
+    });
+    this.element.appendChild(this.iframe);
+    this.element.appendChild(this.button);
+  },
+  errorConnector() {
+    log('frame load error');
+  },
+  onloadConnector() {
+    this.connector = new Connector({
+      target: this.iframe.contentWindow,
+      origin: this.params.origin,
+    });
+  },
+  send(action, data) {
+    if (this.connector) {
+      this.connector.send(action, data);
+    }
+  },
+  onEvent(cx, ev) {
+    ev.preventDefault();
+    if (this.pending) return false
+    this.send('event', { type: ev.type });
+  },
+  onClick() {
+    if (this.pending) return false
+    this.request.before().done(this.proxy('onClickDone')).fail(this.proxy('onClickFail'));
+  },
+  onClickDone() {
+    this.request.pay(this.params.method);
+  },
+  onClickFail() {},
+  onSupported(cx, supported) {
+    if (supported.provider.includes(this.params.method)) {
+      this.mount();
+    }
+  },
+  onPayload(cx, payload) {
+    if (payload.allowed.includes(this.params.method)) {
+      this.show();
+    }
+  },
+  onPending(cx, state) {
+    this.pending = state;
+    this.send('pending', { state: state });
+  },
+  initEvents() {
+    this.addEvent(this.button, 'mouseenter', 'onEvent');
+    this.addEvent(this.button, 'mouseleave', 'onEvent');
+    this.addEvent(this.button, 'blur', 'onEvent');
+    this.addEvent(this.button, 'focus', 'onEvent');
+    this.addEvent(this.button, 'click', 'onClick');
+  },
+  setPaymentRequest(request) {
+    if (!(request instanceof PaymentRequestApi))
+      throw Error('request is not instance of PaymentRequestApi')
+    this.request = request;
+    const onSupported = this.proxy('onSupported');
+    const onPayload = this.proxy('onPayload');
+    const onPending = this.proxy('onPending');
+    this.request.off('supported', onSupported).on('supported', onSupported);
+    this.request.off('payload', onPayload).on('payload', onPayload);
+    this.request.off('pending', onPending).on('pending', onPending);
+    return this
+  },
+  appendTo(appendTo) {
+    const container = this.utils.querySelector(appendTo);
+    if (container) container.appendChild(this.element);
+    this.initEvents();
+    return this
+  },
+  mount() {
+    this.appendTo(this.params.appendTo);
+  },
+  isMounted() {
+    return document.body.contains(this.element)
+  },
+  show() {
+    if (this.isMounted() === false) return this
+    this.addCss(this.iframe, {
+      transition: 'opacity 0.6s 0.4s ease-out',
+      opacity: this.utils.cssUnit(1),
+    });
+    this.addCss(this.element, {
+      transition: 'height 0.2s ease-out',
+      height: this.utils.cssUnit(this.params.height, 'px'),
+    });
+    this.trigger('show', {});
+    return this
+  },
+  hide() {
+    if (this.isMounted() === false) return this
+    this.addCss(this.iframe, {
+      transition: 'opacity 0.4s ease-out',
+      opacity: this.utils.cssUnit(0),
+    });
+    this.addCss(this.element, {
+      transition: 'height 0.2s 0.4s ease-out',
+      height: this.utils.cssUnit(0, 'px'),
+    });
+    this.trigger('hide', {});
+    return this
+  },
+});
+
+const PaymentButton = Module.extend({
+  defaults: {
+    origin: ApiOrigin,
+    endpoint: ApiEndpoint,
+    methods: ['apple', 'google'],
+    element: null,
+    style: {
+      height: 38,
+      mode: 'default',
+      type: 'long',
+      color: 'black',
+    },
+    data: {
+      lang: 'en',
+    },
+    before(defer) {
+      defer.resolve();
+    },
+  },
+  init(params) {
+    this.elements = {};
+    this.supported = false;
+    this.params = {
+      element: params.element,
+      methods: params.methods || this.defaults.methods,
+      origin: params.origin || this.defaults.origin,
+      endpoint: this.utils.extend({}, this.defaults.endpoint, params.endpoint),
+      style: this.utils.extend({}, this.defaults.style, params.style),
+      before: params.before || this.defaults.before,
+      data: this.utils.extend({}, this.defaults.data, params.data),
+    };
+    this.initApi(params.api);
+    this.initPaymentRequestApi();
+    this.initElements();
+    this.update();
+  },
+  initApi(api) {
+    if (api instanceof Api) {
+      this.api = api;
+    } else {
+      this.api = new Api({
+        origin: this.params.origin,
+        endpoint: this.params.endpoint,
+      });
+    }
+  },
+  initPaymentRequestApi() {
+    this.request = new PaymentRequestApi();
+    this.request.setApi(this.api);
+    this.request.setMerchant(this.params.data.merchant_id);
+    this.request.setBeforeCallback(this.params.before);
+    this.request.on('details', this.proxy('onDetails'));
+    this.request.on('error', this.proxy('onError'));
+  },
+  initElements() {
+    const style = this.params.style;
+    const data = this.params.data;
+    const origin = this.params.origin;
+    const appendTo = this.params.element;
+    const endpoint = this.params.endpoint.element;
+    const request = this.request;
+    this.container = this.utils.querySelector(this.params.element);
+    this.addCss(this.container, {
+      display: 'flex',
+      gap: '1rem',
+      'flex-direction': 'column',
+    });
+    forEach(this.params.methods, function (method) {
+      const element = new PaymentElement({
+        origin: origin,
+        endpoint: endpoint,
+        method: method,
+        appendTo: appendTo,
+        color: style.color,
+        mode: style.mode,
+        lang: data.lang,
+        height: style.height,
+      });
+      element.setPaymentRequest(request);
+    });
+    request.getSupportedMethods();
+  },
+  update(data) {
+    return this.request.update(this.utils.extend(this.params.data, data || {}))
+  },
+  onDetails(cx, data) {
+    this.api.scope(() => {
+      this.api
+        .request('api.checkout.form', 'request', this.utils.extend({}, this.params.data, data))
+        .done(this.proxy('onSuccess'))
+        .fail(this.proxy('onError'));
+    });
+  },
+  onSuccess(cx, data) {
+    this.trigger('success', data);
+  },
+  onError(cx, data) {
+    this.trigger('error', data);
+  },
+});
+
+const parseConfig = (config) => {
+  const data = {
+    payment_system: config.payment_system,
+    provider: {},
+  };
+  const methods = config.methods || [];
+  const details = config.details || {};
+  const options = config.options || {};
+  const regex = new RegExp('//([a-z]+)\\.com/');
+  methods.forEach(function (item) {
+    const match = regex.exec(item.supportedMethods);
+    if (match === null) return
+    data.provider[match[1]] = {
+      methods: [item],
+      details: details,
+      options: options,
+    };
+  });
+  return data
+};
+
+const PaymentContainer = Module.extend({
+  defaults: {
+    element: null,
+    method: 'card',
+    data: {
+      lang: 'en',
+    },
+    style: {},
+  },
+  init(params) {
+    this.initParams(params);
+    this.initEvents();
+  },
+  initParams(params) {
+    this.params = this.utils.extend({}, this.defaults, params);
+    this.element = this.utils.querySelector(this.params.element);
+    this.connector = new Connector({
+      target: window.parent,
+    });
+    this.payment = new PaymentRequestApi({
+      embedded: true,
+    });
+  },
+  extendParams(params) {
+    this.utils.extend(this.params, {
+      method: params.method,
+      style: params.style,
+      data: params.data,
+      css: params.css,
+    });
+  },
+  getGoogleLangSupport(lang, defaults) {
+    return GooglePayLanguages.indexOf(lang) !== -1 ? lang : defaults
+  },
+  getButtonColor(color) {
+    return ButtonColorMap[color] || ButtonDefaultColor
+  },
+  getGoogleSvg(color, lang, mode) {
+    const params = {
+      endpoint: 'https://www.gstatic.com/instantbuy/svg',
+      color: this.getButtonColor(color),
+      mode: mode || 'plain',
+      lang: lang || 'en',
+    };
+    let format = 'url("{endpoint}/{color}/{mode}/{lang}.svg")';
+    if (mode === 'plain') {
+      format = 'url("{endpoint}/{color}_gpay.svg")';
+    }
+    if (mode === 'buy') {
+      format = 'url("{endpoint}/{color}/{lang}.svg")';
+    }
+    return this.utils.stringFormat(format, params)
+  },
+  getAppleSvg(color) {
+    const format = 'url("svg/apple-pay-{color}.svg")';
+    const params = {
+      color: this.getButtonColor(color),
+    };
+    return this.utils.stringFormat(format, params)
+  },
+  getAppleLabel(lang) {
+    return ButtonLabelMap[lang || 'en']
+  },
+  addFrameImage() {
+    const frame =
+      this.utils.querySelector('iframe', this.element) || this.utils.createElement('iframe');
+    const url = 'https://pay.google.com/gp/p/generate_gpay_btn_img';
+    const style = this.params.style || {};
+    const lang = this.getGoogleLangSupport(this.params.data.lang, 'en');
+    const query = {
+      buttonColor: style.color || 'black',
+      browserLocale: lang,
+      buttonSizeMode: 'fill',
+    };
+    const src = [url, this.utils.param(query)].join('?');
+    this.addAttr(frame, {
+      scrolling: 'no',
+      frameborder: 0,
+      src: src,
+    });
+    this.element.appendChild(frame);
+    this.element.classList.remove('short', 'long');
+  },
+  styleButton() {
+    let element = this.element;
+    let params = this.params;
+    let method = params.method;
+    let style = params.style || {};
+    let lang = params.data.lang || 'en';
+    let css = params.css || {};
+    element.setAttribute('class', '');
+    element.classList.add('button', 'pending');
+    if (method === 'card') method = 'google';
+    if (method) {
+      element.classList.add(method);
+    }
+    {
+      element.classList.add(lang);
+    }
+    if (style.type) {
+      element.classList.add(style.type);
+    }
+    if (style.mode) {
+      element.classList.add(style.mode);
+    }
+    if (style.color) {
+      element.classList.add(style.color);
+    }
+    if (method === 'google') {
+      if (style.type === 'short') {
+        style.mode = 'plain';
+      }
+      if (style.mode === 'default') {
+        this.addFrameImage();
+      } else {
+        css.image = this.getGoogleSvg(style.color, lang, style.mode);
+      }
+    }
+    if (method === 'apple') {
+      css.image = this.getAppleSvg(style.color);
+      css.label = this.getAppleLabel(lang, style.mode);
+    }
+    {
+      this.utils.forEach(css, function (value, name) {
+        element.style.setProperty(['--', name].join(''), value);
+      });
+    }
+  },
+  initEvents() {
+    this.payment.on(
+      'details',
+      this.proxy(function (cx, data) {
+        this.connector.send('details', data);
+        this.connector.send('complete', data);
+      })
+    );
+    this.payment.on(
+      'reload',
+      this.proxy(function (cx, data) {
+        this.connector.send('reload', data);
+      })
+    );
+    this.payment.on(
+      'error',
+      this.proxy(function (cx, data) {
+        this.connector.send('error', data);
+      })
+    );
+    this.connector.on(
+      'options',
+      this.proxy(function (cx, data) {
+        this.extendParams(data);
+        this.styleButton();
+      })
+    );
+    this.connector.on(
+      'pay',
+      this.proxy(function () {
+        if (!this.element.classList.contains('pending')) {
+          if (this.params.method === 'apple') {
+            const payload = this.payment.payload || {};
+            const apple = payload.provider['apple'] || {};
+            this.connector.send('pay', {
+              payment_system: payload.payment_system,
+              methods: apple.methods,
+              details: apple.details,
+              options: apple.options,
+            });
+          } else {
+            this.payment
+              .setSupported({
+                fallback: false,
+                provider: ['google'],
+              })
+              .pay('google');
+          }
+        }
+      })
+    );
+    this.connector.on(
+      'config',
+      this.proxy(function (cx, data) {
+        this.payment.setPayload((data = parseConfig(data)));
+        if (data.payment_system && Object.keys(data.provider).length > 0) {
+          this.element.classList.remove('pending');
+          this.element.classList.add('ready');
+          this.connector.send('show', {});
+        } else {
+          this.connector.send('hide', {});
+        }
+      })
+    );
+    this.connector.on(
+      'event',
+      this.proxy(function (cx, data) {
+        if (data.type === 'mouseenter') {
+          this.element.classList.add('hover');
+        }
+        if (data.type === 'mouseleave') {
+          this.element.classList.remove('hover');
+        }
+        if (data.type === 'focusin') {
+          this.element.classList.add('active');
+        }
+        if (data.type === 'focusout') {
+          this.element.classList.remove('active');
+        }
+      })
+    );
+  },
+});
+
+const Widget = Api.extend({
+  init(params) {
+    this.initParams(params);
+    this.initWidget();
+  },
+  initWidget() {
+    this.initOptions(this.params.options);
+    if (this.utils.isString(this.params.element)) {
+      this.initElement(this.params.element);
+    }
+  },
+  initOptions() {
+    if (this.utils.isPlainObject(this.params.options)) {
+      this.params.options = this.params.options || {};
+    }
+  },
+  initElement(el) {},
+  addSelectorEvent(el, ev, cb) {
+    this.each(this.utils.querySelectorAll(el), function (cx, element) {
+      this.addEvent(element, ev, cb);
+    });
+    return this
+  },
+  getRequestParams() {
+    return {}
+  },
+  sendRequest(el, ev) {
+    if (ev.defaultPrevented) return
+    ev.preventDefault();
+    this.trigger('request', this.getRequestParams(el));
+    this.scope(function () {
+      this.request('api.checkout.form', 'request', this.getRequestParams(el))
+        .done(this.proxy('onSuccess'))
+        .fail(this.proxy('onError'))
+        .progress(this.proxy('onProgress'));
+    });
+  },
+  onProgress(cx, model) {
+    this.trigger('progress', model);
+  },
+  onSuccess(cx, model) {
+    model.sendResponse();
+    model.submitToMerchant();
+    this.trigger('success', model);
+  },
+  onError(cx, model) {
+    this.trigger('error', model);
+  },
+});
+
+const FormData = Module.extend({
+  init(form) {
+    this.setFormElement(form);
+  },
+  setFormElement(form) {
+    if (this.utils.isElement(form)) {
+      this.form = form;
+    }
+  },
+  getData(filter) {
+    const params = this.deparam(this.serializeArray());
+    return filter === true ? this.utils.cleanObject(params) : params
+  },
+  serializeArray() {
+    const list = this.utils.toArray(this.form.elements);
+    return this.utils.map(list, function (field) {
+      if (field.disabled || field.name === '') return
+      if (field.type.match('checkbox|radio') && !field.checked) return
+      return {
+        name: field.name,
+        value: field.value,
+      }
+    })
+  },
+  serializeAndEncode() {
+    return this.utils
+      .map(this.serializeArray(), function (field) {
+        return [field.name, encodeURIComponent(field.value)].join('=')
+      })
+      .join('&')
+  },
+  deparam(obj) {
+    let prop,
+      result = {};
+    const breaker = /[^\[\]]+|\[\]$/g;
+    const attr = function (name, value) {
+      let i,
+        data = result,
+        last = name.pop(),
+        len = name.length;
+      for (i = 0; i < len; i++) {
+        if (!data[name[i]]) data[name[i]] = len === i + 1 && last === '[]' ? [] : {};
+        data = data[name[i]];
+      }
+      if (last === '[]') {
+        data.push(value);
+      } else {
+        data[last] = value;
+      }
+    };
+    for (prop in obj) {
+      if (obj.hasOwnProperty(prop)) {
+        attr(obj[prop].name.match(breaker), obj[prop].value);
+      }
+    }
+    return result
+  },
+});
+
+const WidgetForm = Widget.extend({
+  initElement(el) {
+    this.addSelectorEvent(el, 'submit', 'sendRequest');
+  },
+  getRequestParams(el) {
+    return this.utils.extend({}, this.params.options, new FormData(el).getData())
+  },
+});
+
+const WidgetButton = Widget.extend({
+  attributes: {},
+  initElement(el) {
+    if (this.utils.isPlainObject(this.params.attributes)) {
+      this.utils.extend(this.attributes, this.params.attributes);
+    }
+    this.addSelectorEvent(el, 'click', 'sendRequest');
+  },
+  getRequestParams(el) {
+    return this.utils.extend({}, this.params.options, this.getElementData(el))
+  },
+  getElementData(el) {
+    const result = {};
+    this.utils.forEach(this.attributes, function (value, key) {
+      if (el.hasAttribute(key)) {
+        result[value] = el.getAttribute(key);
+      }
+    });
+    return result
+  },
+});
+
+Component.add('Api', Api);
+Component.add('Connector', Connector);
+Component.add('PaymentButton', PaymentButton);
+Component.add('PaymentRequestApi', PaymentRequestApi);
+Component.add('PaymentElement', PaymentElement);
+Component.add('FormWidget', WidgetForm);
+Component.add('ButtonWidget', WidgetButton);
+
+Component.Utils = Utils;
+Component.Config = Config;
+Component.Api = Api;
+Component.Module = Module;
+Component.Connector = Connector;
+Component.Response = Response;
+Component.PaymentRequestApi = PaymentRequestApi;
+Component.PaymentContainer = PaymentContainer;
+Component.PaymentElement = PaymentElement;
+Component.PaymentButton = PaymentButton;
+
+export { Api, Config, Connector, Module, PaymentButton, PaymentContainer, PaymentElement, PaymentRequestApi, Response, Utils, Component as default };