@flittpayments/js-sdk 2.0.5 → 2.0.6

package/dist/cjs/checkout.js

@@ -312,9 +312,144 @@ const jsonParse = (value, defaults) => {
     return defaults;
   }
 };
+const PromiseWithResolvers = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+  return {
+    promise,
+    resolve,
+    reject
+  };
+};
+
+/**
+ * @typedef PaymentRequestMethod
+ * @property {{[string]:any}} data
+ */
+
+/**
+ * @typedef PaymentRequestOptions
+ * @property {boolean} [requestPayerEmail]
+ * @property {boolean} [requestPayerPhone]
+ * @property {boolean} [requestPayerName]
+ * @property {boolean} [requestShipping]
+ */
+
+/**
+ * @typedef PaymentRequestConfig
+ * @property [PaymentRequestMethod] methods
+ * @property {{[string]:any}} options
+ */
+
+/**
+ * @param {PaymentRequestConfig} config
+ */
+const getAppleSessionConfig = config => {
+  const {
+    methods,
+    details,
+    options
+  } = config;
+  const method = methods.find(item => item.supportedMethods === 'https://apple.com/apple-pay');
+  const requiredShippingContactFields = [];
+  const requiredBillingContactFields = [];
+  if (options.requestShipping) requiredBillingContactFields.push('postalAddress');
+  if (options.requestPayerName) requiredShippingContactFields.push('name');
+  if (options.requestPayerEmail) requiredShippingContactFields.push('email');
+  if (options.requestPayerPhone) requiredShippingContactFields.push('phone');
+  //method.data.recurringPaymentRequest = recurringPaymentRequest
+  //method.data.deferredPaymentRequest = deferredPaymentRequest
+  return {
+    version: method.data.version,
+    countryCode: method.data.countryCode,
+    supportedNetworks: method.data.supportedNetworks,
+    merchantCapabilities: method.data.merchantCapabilities,
+    merchantIdentifier: method.data.merchantIdentifier,
+    lineItems: method.data.lineItems || details.displayItems,
+    additionalLineItems: method.data.additionalLineItems,
+    recurringPaymentRequest: method.data.recurringPaymentRequest,
+    deferredPaymentRequest: method.data.deferredPaymentRequest,
+    //
+    currencyCode: method.data.currencyCode || details.total.amount.currency,
+    total: {
+      label: details.total.label,
+      amount: details.total.amount.value
+    },
+    //
+    requiredBillingContactFields,
+    requiredShippingContactFields
+  };
+};
+
+// export const deferredPaymentRequest = {
+//   paymentDescription: 'Бронювання готельного номеру',
+//   deferredBilling: {
+//     label: 'Бронювання',
+//     amount: '50.00',
+//     type: 'final',
+//     paymentTiming: 'deferred',
+//     deferredPaymentDate: new Date('2026-01-05'),
+//   },
+//   managementURL: 'https://flitt.ksv.app/manage-booking.html',
+// }
+
+// export const recurringPaymentRequest = {
+//   paymentDescription: 'Місячна підписка',
+//   regularBilling: {
+//     label: 'Підписка на місяць',
+//     amount: '20.00',
+//     type: 'final',
+//     paymentTiming: 'recurring',
+//     recurringPaymentStartDate: new Date('2026-01-01T00:00:00'),
+//     recurringPaymentIntervalUnit: 'month',
+//     recurringPaymentIntervalCount: 6,
+//     recurringPaymentEndDate: new Date('2028-01-01T00:00:00'),
+//   },
+//   managementURL: 'https://flitt.ksv.app/manage-subscription.html',
+// }
+
+const getFunction = path => {
+  const props = path.split('.');
+  const value = props.reduce((acc, cur) => {
+    if (acc && acc.hasOwnProperty(cur)) {
+      acc = acc[cur];
+      return acc;
+    }
+    return null;
+  }, window);
+  return isFunction(value) ? value : value;
+};
+const loadExternalApi = (url, path) => {
+  const [existScript] = toArray(document.scripts).filter(script => script.src === url);
+  if (existScript) return Promise.resolve(getFunction(path));
+  const {
+    promise,
+    resolve
+  } = PromiseWithResolvers();
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = url;
+  script.addEventListener('load', () => {
+    const value = getFunction(path);
+    console.log('api loading', 'success', url);
+    resolve(value);
+  });
+  script.addEventListener('error', e => {
+    const value = getFunction(path);
+    console.log('api loading', 'error', url);
+    resolve(value);
+  });
+  document.head.appendChild(script);
+  return promise;
+};
 
 var Utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  PromiseWithResolvers: PromiseWithResolvers,
   addAttr: addAttr,
   addClass: addClass,
   cleanObject: cleanObject,
@@ -323,6 +458,8 @@ var Utils = /*#__PURE__*/Object.freeze({
   deparam: deparam,
   extend: extend,
   forEach: forEach,
+  getAppleSessionConfig: getAppleSessionConfig,
+  getFunction: getFunction,
   getPath: getPath,
   getPaymentRequest: getPaymentRequest,
   getStyle: getStyle,
@@ -340,6 +477,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   isRegexp: isRegexp,
   isString: isString,
   jsonParse: jsonParse,
+  loadExternalApi: loadExternalApi,
   map: map,
   param: param,
   querySelector: querySelector,
@@ -370,6 +508,32 @@ const GoogleBaseRequest = {
     }
   }]
 };
+const PaymentMethodsConfig = [{
+  url: 'https://pay.google.com/gp/p/js/pay.js',
+  name: 'google',
+  path: 'google.payments.api.PaymentsClient',
+  callback(PaymentsClient) {
+    if (PaymentsClient) {
+      return new PaymentsClient({
+        environment: 'TEST'
+      }).isReadyToPay(GoogleBaseRequest).catch(e => {
+        console.log(e);
+        return false;
+      });
+    }
+    return false;
+  }
+}, {
+  url: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js',
+  name: 'apple',
+  path: 'ApplePaySession',
+  callback(ApplePaySession) {
+    if (ApplePaySession) {
+      return ApplePaySession.supportsVersion(3);
+    }
+    return false;
+  }
+}];
 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: {
@@ -497,6 +661,7 @@ var Config = /*#__PURE__*/Object.freeze({
   GoogleBaseRequest: GoogleBaseRequest,
   GooglePayApi: GooglePayApi,
   GooglePayLanguages: GooglePayLanguages,
+  PaymentMethodsConfig: PaymentMethodsConfig,
   PaymentRequestDetails: PaymentRequestDetails,
   ProxyUrl: ProxyUrl
 });
@@ -551,28 +716,31 @@ function Deferred() {
   const promise = {
     done(callback) {
       if (isFunction(callback)) {
-        if (status === RESOLVED) {
+        if (this.isResolved()) {
           callback.apply(resultContext, resultArgs);
+        } else {
+          resolveCallbacks.push(callback);
         }
-        resolveCallbacks.push(callback);
       }
       return this;
     },
     fail(callback) {
       if (isFunction(callback)) {
-        if (status === REJECTED) {
+        if (this.isRejected()) {
           callback.apply(resultContext, resultArgs);
+        } else {
+          rejectCallbacks.push(callback);
         }
-        rejectCallbacks.push(callback);
       }
       return this;
     },
     progress(callback) {
       if (isFunction(callback)) {
-        if (status === PROGRESS) {
+        if (this.isProgress()) {
           callback.apply(resultContext, resultArgs);
+        } else {
+          notifyCallbacks.push(callback);
         }
-        notifyCallbacks.push(callback);
       }
       return this;
     },
@@ -612,26 +780,25 @@ function Deferred() {
     isResolved() {
       return status === RESOLVED;
     },
-    resetState() {
-      status = PENDING;
-      return this;
+    isProgress() {
+      return status === PROGRESS;
     },
     resolveWith(context, args) {
-      if (status === PENDING) {
+      if (this.isPending()) {
         status = RESOLVED;
         executeCallback(context, args, resolveCallbacks);
       }
       return this;
     },
     rejectWith(context, args) {
-      if (status === PENDING) {
+      if (this.isPending()) {
         status = REJECTED;
         executeCallback(context, args, rejectCallbacks);
       }
       return this;
     },
     notifyWith(context, args) {
-      if (status === PENDING) {
+      if (this.isPending()) {
         status = PROGRESS;
         executeCallback(context, args, notifyCallbacks);
         status = PENDING;
@@ -1345,6 +1512,7 @@ const Api = Module.extend({
     }
   },
   init(params) {
+    this.iframeDeferred = Deferred();
     this.initParams(params);
   },
   url(type, url) {
@@ -1358,8 +1526,6 @@ const Api = Module.extend({
     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)) {
@@ -1370,16 +1536,21 @@ const Api = Module.extend({
   scope(callback) {
     callback = this.proxy(callback);
     this.domReady(function () {
-      if (this.createFrame().loaded === true) {
-        callback();
+      this.createFrame();
+      if (this.iframeDeferred.isPending()) {
+        this.iframeDeferred.done(callback);
       } else {
-        this.on('checkout.api', callback);
+        callback();
       }
     });
   },
   domReady(callback) {
     callback = this.proxy(callback);
-    document.readyState !== 'loading' ? callback() : window.addEventListener('DOMContentLoaded', callback);
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', callback);
+    } else {
+      callback();
+    }
   },
   request(model, method, params) {
     const defer = Deferred();
@@ -1405,7 +1576,8 @@ const Api = Module.extend({
     }));
     return defer;
   },
-  loadFrame(url) {
+  createFrame() {
+    if (this.iframe) return this;
     this.iframe = this.utils.createElement('iframe');
     this.addAttr(this.iframe, {
       allowtransparency: true,
@@ -1413,31 +1585,29 @@ const Api = Module.extend({
       scrolling: 'no'
     });
     this.addAttr(this.iframe, {
-      src: url
+      src: this.url('gateway')
     });
     this.addCss(this.iframe, ApiFrameCss);
-    this.container = this.utils.querySelector(this.params.container);
+    if (this.utils.isElement(this.params.container)) {
+      this.container = this.params.container;
+    }
+    if (this.utils.isString(this.params.container)) {
+      this.container = this.utils.querySelector(this.params.container);
+    }
     if (this.container) {
       if (this.container.firstChild) {
         this.container.insertBefore(this.iframe, this.container.firstChild);
       } else {
         this.container.appendChild(this.iframe);
       }
-    } else {
-      throw Error(`container element not found: querySelector("${this.params.container}")`);
-    }
-    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'));
+    } else {
+      throw Error(`container element not found: document.querySelector("${this.params.container}")`);
     }
     return this;
   },
@@ -1452,125 +1622,36 @@ const Api = Module.extend({
     this.trigger('modal.close', modal, data);
   },
   onLoadConnector() {
-    this.loaded = true;
+    this.iframeDeferred.resolve(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: []
-};
+let supportedMethodsDeferred = null;
 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');
+  if (supportedMethodsDeferred) return supportedMethodsDeferred;
+  supportedMethodsDeferred = Deferred();
+  const promises = [];
+  const supported = {
+    provider: []
+  };
+  forEach(PaymentMethodsConfig, method => {
+    promises.push(loadExternalApi(method.url, method.path).then(method.callback).then(state => {
+      if (state) {
+        supported.provider.push(method.name);
+      } else {
+        console.log('error loading api', 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;
+    }));
+  });
+  Promise.all(promises).then(() => {
+    supportedMethodsDeferred.resolve(supported);
+  }, () => {
+    supportedMethodsDeferred.resolve(supported);
+  });
+  return supportedMethodsDeferred;
 };
-const PaymentRequestInterface = Module.extend({
+const PaymentRequestApi = Module.extend({
   config: {
     payment_system: '',
     fallback: false,
@@ -1609,6 +1690,16 @@ const PaymentRequestInterface = Module.extend({
   setMerchant(merchant) {
     this.merchant = merchant;
   },
+  setBeforeCallback(beforeCallback) {
+    if (isFunction(beforeCallback)) {
+      this.params.before = beforeCallback;
+    }
+  },
+  setAfterCallback(afterCallback) {
+    if (isFunction(afterCallback)) {
+      this.params.after = afterCallback;
+    }
+  },
   setApi(api) {
     if (api instanceof Api) this.api = api;
     return this;
@@ -1621,32 +1712,40 @@ const PaymentRequestInterface = Module.extend({
   },
   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));
-      }));
+  },
+  request(model, method, params, success, failure) {
+    const context = this;
+    if (context.api) {
+      context.api.scope(function () {
+        context.api.request(model, method, params).done(success).fail(failure);
+      });
     }
   },
-  update(data) {
+  session(params) {
     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]);
+    this.request('api.checkout.pay', 'session', params, function (model) {
+      defer.resolve(model.serialize());
+    }, function (model) {
+      defer.reject(model);
     });
     return defer;
   },
-  onUpdate(cx, model) {
-    this.setPayload(model.serialize());
-  },
-  onError(cx, model) {
-    this.trigger('error', model);
+  update(data) {
+    if (this.isPending()) return;
+    this.setPending(true);
+    const context = this;
+    const defer = Deferred();
+    this.params.data = data;
+    this.request('api.checkout.pay', 'methods', this.params.data, function (model) {
+      context.setPending(false);
+      context.setPayload(model.serialize());
+      defer.resolve(model);
+    }, function (model) {
+      context.setPending(false);
+      context.trigger('error', model);
+      defer.reject(model);
+    });
+    return defer;
   },
   isPending() {
     return this.pendingState === true;
@@ -1654,123 +1753,100 @@ const PaymentRequestApi = PaymentRequestInterface.extend({
   setPending(state) {
     this.pendingState = state;
     clearTimeout(this.pendingTimeoutEvent);
-    this.pendingTimeoutEvent = setTimeout(() => {
-      this.trigger('pending', state);
-    }, 100);
-  },
-  beforeCallback(defer) {
-    defer.resolve();
-  },
-  setBeforeCallback(callback) {
-    if (isFunction(callback)) {
-      this.beforeCallback = callback;
-    }
-    return this;
+    this.pendingTimeoutEvent = setTimeout(function (context) {
+      context.trigger('pending', state);
+    }, 50, this);
   },
   before() {
     if (this.isPending()) return;
     this.setPending(true);
     const defer = Deferred();
-    defer.always(this.proxy(function () {
-      this.setPending(false);
-    }));
-    this.beforeCallback(defer);
+    const context = this;
+    defer.always(function () {
+      context.setPending(false);
+    });
+    this.params.before(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);
-      }
-    });
+  after(params) {
+    const defer = Deferred();
+    this.params.after(defer, params);
+    return defer;
   },
-  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
-        }]);
+  withApplePay(response, config) {
+    const sessionConfig = getAppleSessionConfig(config);
+    const request = new ApplePaySession(sessionConfig.version, sessionConfig);
+    const merchant = this.merchant;
+    const context = this;
+    request.onvalidatemerchant = function (event) {
+      context.session({
+        url: event.validationURL,
+        domain: location.host,
+        merchant_id: merchant
+      }).done(session => {
+        try {
+          request.completeMerchantValidation(session.data);
+        } catch (error) {
+          response.reject({
+            code: error.code,
+            message: error.message
+          });
+        }
       });
-    }).catch(function (e) {
-      defer.rejectWith(self, [{
-        code: e.code,
-        message: e.message
-      }]);
-    });
+    };
+    request.oncancel = function () {
+      response.reject({
+        code: 20,
+        message: 'cancel'
+      });
+    };
+    request.onpaymentauthorized = function (event) {
+      request.completePayment(ApplePaySession.STATUS_SUCCESS);
+      response.resolve(event.payment);
+    };
+    request.begin();
   },
-  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
-        }]);
+  withGooglePay(response, config) {
+    const {
+      methods
+    } = config;
+    const method = methods.find(item => item.supportedMethods === 'https://google.com/pay');
+    const client = new google.payments.api.PaymentsClient({
+      environment: method.data.environment
+    });
+    client.loadPaymentData(method.data).then(paymentData => {
+      response.resolve(paymentData);
+    }).catch(error => {
+      response.reject({
+        code: error.code,
+        message: error.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]);
+  pay(method) {
+    if (this.isPending()) return;
+    this.setPending(true);
+    const context = this;
+    const response = Deferred();
+    const payload = this.getProviderPayload(method);
+    response.always(function () {
+      context.setPending(false);
     });
-    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);
-      }
+    switch (method) {
+      case 'google':
+        this.withGooglePay(response, payload);
+        break;
+      case 'apple':
+        this.withApplePay(response, payload);
+        break;
+    }
+    return response.done(function (data) {
+      context.trigger('details', {
+        payment_system: context.payload.payment_system,
+        data
+      });
     }).fail(function (error) {
-      this.trigger('error', error);
+      context.trigger('error', error);
     });
   }
 });
@@ -1788,11 +1864,22 @@ const PaymentElement = Module.extend({
     height: 38
   },
   init(params) {
+    this.state = {
+      isSupported: false,
+      isAllowed: false,
+      isMounted: false
+    };
     this.params = {};
     this.utils.extend(this.params, this.defaults);
     this.utils.extend(this.params, params);
     this.initElement();
   },
+  timeout(callback, timeout) {
+    this.timeoutMap = this.timeoutMap || {};
+    clearTimeout(this.timeoutMap[timeout]);
+    this.timeoutMap[callback] = setTimeout(callback, timeout);
+    return this;
+  },
   getElementUrl() {
     return [this.params.origin, this.params.endpoint].join('');
   },
@@ -1853,19 +1940,18 @@ const PaymentElement = Module.extend({
   },
   onClickFail() {},
   onSupported(cx, supported) {
-    if (supported.provider.includes(this.params.method)) {
-      this.mount();
-    }
+    this.state.isSupported = supported.provider.includes(this.params.method);
   },
   onPayload(cx, payload) {
-    if (payload.allowed.includes(this.params.method)) {
-      this.show();
-    }
+    this.state.isAllowed = payload.allowed.includes(this.params.method);
+    this.render();
   },
   onPending(cx, state) {
     this.pending = state;
-    this.send('pending', {
-      state: state
+    this.addCss(this.element, {
+      transition: 'height 0.2s ease-out, opacity 0.4s ease-out',
+      pointerEvents: this.pending ? 'none' : '',
+      opacity: this.pending ? '0.5' : '1'
     });
   },
   initEvents() {
@@ -1892,36 +1978,50 @@ const PaymentElement = Module.extend({
     this.initEvents();
     return this;
   },
-  mount() {
-    this.appendTo(this.params.appendTo);
+  render() {
+    if (this.state.isSupported === false) return this;
+    if (this.state.isAllowed === false) return this;
+    this.mount();
+    this.show();
   },
-  isMounted() {
-    return document.body.contains(this.element);
+  unmount() {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+    return this;
+  },
+  mount() {
+    if (document.body.contains(this.element) === false) {
+      this.appendTo(this.params.appendTo);
+    }
+    return this;
   },
   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', {});
+    this.timeout(() => {
+      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', {});
+    }, 25);
     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', {});
+    this.timeout(() => {
+      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', {});
+    }, 25);
     return this;
   }
 });
@@ -1943,6 +2043,9 @@ const PaymentButton = Module.extend({
     },
     before(defer) {
       defer.resolve();
+    },
+    after(defer, params) {
+      defer.resolve(params);
     }
   },
   init(params) {
@@ -1954,7 +2057,8 @@ const PaymentButton = Module.extend({
       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,
+      before: isFunction(params.before) ? params.before : this.defaults.before,
+      after: isFunction(params.after) ? params.after : this.defaults.after,
       data: this.utils.extend({}, this.defaults.data, params.data)
     };
     this.initApi(params.api);
@@ -1979,10 +2083,12 @@ const PaymentButton = Module.extend({
     }
   },
   initPaymentRequestApi() {
-    this.request = new PaymentRequestApi();
+    this.request = new PaymentRequestApi({
+      before: this.params.before,
+      after: this.params.after
+    });
     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'));
   },
@@ -2019,7 +2125,9 @@ const PaymentButton = Module.extend({
   },
   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'));
+      this.request.after(this.params.data).done(extendParams => {
+        this.api.request('api.checkout.form', 'request', this.utils.extend({}, this.params.data, extendParams || {}, data)).done(this.proxy('onSuccess')).fail(this.proxy('onError'));
+      });
     });
   },
   onSuccess(cx, data) {