@flittpayments/js-sdk 2.0.4 → 2.0.6

package/dist/esm/checkout.js

@@ -354,8 +354,134 @@ const jsonParse = (value, 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,
@@ -364,6 +490,8 @@ var Utils = /*#__PURE__*/Object.freeze({
   deparam: deparam,
   extend: extend,
   forEach: forEach,
+  getAppleSessionConfig: getAppleSessionConfig,
+  getFunction: getFunction,
   getPath: getPath,
   getPaymentRequest: getPaymentRequest,
   getStyle: getStyle,
@@ -381,6 +509,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   isRegexp: isRegexp,
   isString: isString,
   jsonParse: jsonParse,
+  loadExternalApi: loadExternalApi,
   map: map,
   param: param,
   querySelector: querySelector,
@@ -418,6 +547,36 @@ 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',
@@ -587,6 +746,7 @@ var Config = /*#__PURE__*/Object.freeze({
   GoogleBaseRequest: GoogleBaseRequest,
   GooglePayApi: GooglePayApi,
   GooglePayLanguages: GooglePayLanguages,
+  PaymentMethodsConfig: PaymentMethodsConfig,
   PaymentRequestDetails: PaymentRequestDetails,
   ProxyUrl: ProxyUrl
 });
@@ -642,28 +802,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
     },
@@ -703,33 +866,31 @@ 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;
       }
       return this
     },
-
     resolve() {
       return this.resolveWith(this, Array.from(arguments))
     },
@@ -1466,6 +1627,7 @@ const Api = Module.extend({
   defaults: {
     origin: ApiOrigin,
     endpoint: ApiEndpoint,
+    container: 'body',
     messages: {
       modalHeader:
         'Now you will be redirected to your bank 3DSecure. If you are not redirected please refer',
@@ -1473,6 +1635,7 @@ const Api = Module.extend({
     },
   },
   init(params) {
+    this.iframeDeferred = Deferred();
     this.initParams(params);
   },
   url(type, url) {
@@ -1486,8 +1649,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)) {
@@ -1497,10 +1658,21 @@ const Api = Module.extend({
   },
   scope(callback) {
     callback = this.proxy(callback);
-    if (this.createFrame().loaded === true) {
-      callback();
+    this.domReady(function () {
+      this.createFrame();
+      if (this.iframeDeferred.isPending()) {
+        this.iframeDeferred.done(callback);
+      } else {
+        callback();
+      }
+    });
+  },
+  domReady(callback) {
+    callback = this.proxy(callback);
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', callback);
     } else {
-      this.on('checkout.api', callback);
+      callback();
     }
   },
   request(model, method, params) {
@@ -1530,186 +1702,84 @@ 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,
       frameborder: 0,
       scrolling: 'no',
     });
-    this.addAttr(this.iframe, { src: url });
+    this.addAttr(this.iframe, { src: this.url('gateway') });
     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);
+    if (this.utils.isElement(this.params.container)) {
+      this.container = this.params.container;
     }
-    return this.iframe
-  },
-  createFrame() {
-    if (this.created === false) {
-      this.created = true;
-      this.iframe = this.loadFrame(this.url('gateway'));
+    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);
+      }
       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
   },
   onOpenModal(xhr, model) {
-    this.modal = new Modal({
-      checkout: this,
-      model: 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.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');
-      }
-      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);
+  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);
+          }
         })
-        .catch(function () {
-          setTimeout(check, 25);
-        });
-    } else {
-      setTimeout(check, 25);
+    );
+  });
+  Promise.all(promises).then(
+    () => {
+      supportedMethodsDeferred.resolve(supported);
+    },
+    () => {
+      supportedMethodsDeferred.resolve(supported);
     }
-  })();
-  return requestDeferred
+  );
+  return supportedMethodsDeferred
 };
 
-const PaymentRequestInterface = Module.extend({
+const PaymentRequestApi = Module.extend({
   config: {
     payment_system: '',
     fallback: false,
@@ -1748,6 +1818,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
@@ -1761,171 +1841,151 @@ 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);
+      });
     }
   },
+  session(params) {
+    const defer = Deferred();
+    this.request(
+      'api.checkout.pay',
+      'session',
+      params,
+      function (model) {
+        defer.resolve(model.serialize());
+      },
+      function (model) {
+        defer.reject(model);
+      }
+    );
+    return defer
+  },
   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',
-      data,
-      function (cx, model) {
-        this.onUpdate(cx, model);
-        defer.resolveWith(this, [model]);
+      this.params.data,
+      function (model) {
+        context.setPending(false);
+        context.setPayload(model.serialize());
+        defer.resolve(model);
       },
-      function (cx, model) {
-        this.onError(cx, model);
-        defer.rejectWith(this, [model]);
+      function (model) {
+        context.setPending(false);
+        context.trigger('error', model);
+        defer.reject(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;
     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
+  },
+  after(params) {
+    const defer = Deferred();
+    this.params.after(defer, params);
     return defer
   },
+  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 });
+          }
+        });
+    };
+    request.oncancel = function () {
+      response.reject({ code: 20, message: 'cancel' });
+    };
+    request.onpaymentauthorized = function (event) {
+      request.completePayment(ApplePaySession.STATUS_SUCCESS);
+      response.resolve(event.payment);
+    };
+    request.begin();
+  },
+  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 });
+      });
+  },
   pay(method) {
     if (this.isPending()) return
     this.setPending(true);
-    const payload = this.getProviderPayload(method);
+    const context = this;
     const response = Deferred();
+    const payload = this.getProviderPayload(method);
     response.always(function () {
-      this.setPending(false);
+      context.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);
+    switch (method) {
+      case 'google':
+        this.withGooglePay(response, payload);
+        break
+      case 'apple':
+        this.withApplePay(response, payload);
+        break
     }
     return response
-      .done(function (details) {
-        this.trigger('details', {
-          payment_system: this.payload.payment_system,
-          data: details,
+      .done(function (data) {
+        context.trigger('details', {
+          payment_system: context.payload.payment_system,
+          data,
         });
       })
       .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 }]);
-          });
+        context.trigger('error', error);
       })
-      .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);
-      });
   },
 });
 
@@ -1942,11 +2002,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('')
   },
@@ -2005,18 +2076,19 @@ 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() {
     this.addEvent(this.button, 'mouseenter', 'onEvent');
@@ -2043,36 +2115,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();
+  },
+  unmount() {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+    return this
   },
-  isMounted() {
-    return document.body.contains(this.element)
+  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
   },
 });
@@ -2095,6 +2181,9 @@ const PaymentButton = Module.extend({
     before(defer) {
       defer.resolve();
     },
+    after(defer, params) {
+      defer.resolve(params);
+    },
   },
   init(params) {
     this.elements = {};
@@ -2105,7 +2194,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);
@@ -2130,10 +2220,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'));
   },
@@ -2170,10 +2262,16 @@ 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) {