@flittpayments/js-sdk 2.0.0

package/dist/cjs/checkout.js

@@ -0,0 +1,2377 @@
+'use strict';
+
+/**
+ * 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;
+
+module.exports = Component;