@flittpayments/js-sdk 2.0.11 → 2.0.13

package/README.md

@@ -83,22 +83,66 @@ git clone git@github.com:flittpayments/js-sdk.git
     <script src="https://cdn.jsdelivr.net/npm/@flittpayments/js-sdk"></script>
     <div class="payment-button-container"></div>
     <script>
-      $checkout
+      const paymentButton = $checkout
         .get('PaymentButton', {
+          // Target DOM selector where the button will be rendered
           element: '.payment-button-container',
+          // Visual appearance customization
           style: {
-            type: 'long', // short|long
-            color: 'black', // black|white
-            height: 38, // button height
+            type: 'long', // Options: 'short' | 'long'
+            color: 'black', // Options: 'white-outline' | 'white' | 'black'
+            mode: 'donate', // Options: 'default' | 'plain' | 'donate' | 'checkout' | 'order' | 'pay' | 'buy' | 'subscribe' | 'book'
+            height: 38, // Button height in pixels
           },
+          // Payload or metadata required for the transaction
           data: { Parameters },
         })
-        .on('success', function (model) {
+        .on('success', (model) => {
           console.log('success', model)
         })
-        .on('error', function (model) {
+        .on('error', (model) => {
           console.log('error', model)
         })
+      // Visibility event handlers
+      paymentButton
+        .on('show', () => {
+          // Fires immediately when the showing process starts
+        })
+        .on('shown', () => {
+          // Fires after the show transition/animation ends
+        })
+        .on('hide', () => {
+          // Fires immediately when the hiding process starts
+        })
+        .on('hidden', () => {
+          // Fires after the hide transition/animation ends
+        })
+        // Apple Pay Specific Events
+        .on('show:apple', () => {
+          // Fires immediately when Apple Pay starts showing
+        })
+        .on('shown:apple', () => {
+          // Fires after Apple Pay show transition ends
+        })
+        .on('hide:apple', () => {
+          // Fires immediately when Apple Pay starts hiding
+        })
+        .on('hidden:apple', () => {
+          // Fires after Apple Pay hide transition ends
+        })
+        // Google Pay Specific Events
+        .on('show:google', () => {
+          // Fires immediately when Google Pay starts showing
+        })
+        .on('shown:google', () => {
+          // Fires after Google Pay show transition ends
+        })
+        .on('hide:google', () => {
+          // Fires immediately when Google Pay starts hiding
+        })
+        .on('hidden:google', () => {
+          // Fires after Google Pay hide transition ends
+        })
     </script>
   </body>
 </html>

package/dist/cjs/checkout.js

@@ -83,6 +83,9 @@ const isFunction = o => {
 const isArray = o => {
   return getType(o) === 'array';
 };
+const isBoolean = o => {
+  return typeof o === 'boolean';
+};
 const isElement = o => {
   return o && o.nodeType === 1;
 };
@@ -426,6 +429,13 @@ const loadExternalApi = (url, path) => {
   document.head.appendChild(script);
   return promise;
 };
+const transitionDelay = el => {
+  let {
+    transitionDelay,
+    transitionDuration
+  } = getComputedStyle(el);
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
 
 var Utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -448,6 +458,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   hasProp: hasProp,
   isArguments: isArguments,
   isArray: isArray,
+  isBoolean: isBoolean,
   isDate: isDate,
   isElement: isElement,
   isError: isError,
@@ -468,6 +479,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   removeElement: removeElement,
   stringFormat: stringFormat,
   toArray: toArray,
+  transitionDelay: transitionDelay,
   uuid: uuid
 });
 
@@ -765,6 +777,14 @@ function Deferred() {
     isProgress() {
       return status === PROGRESS;
     },
+    clear() {
+      if (this.isPending()) {
+        resolveCallbacks.length = 0;
+        rejectCallbacks.length = 0;
+        notifyCallbacks.length = 0;
+      }
+      return this;
+    },
     resolveWith(context, args) {
       if (this.isPending()) {
         status = RESOLVED;
@@ -1679,6 +1699,9 @@ const PaymentRequestApi = Module.extend({
   setMerchant(merchant) {
     this.merchant = merchant;
   },
+  getProviderNames() {
+    return this.supported.provider.filter(name => !!~this.payload.allowed.indexOf(name));
+  },
   setBeforeCallback(beforeCallback) {
     if (isFunction(beforeCallback)) {
       this.params.before = beforeCallback;
@@ -1722,29 +1745,28 @@ const PaymentRequestApi = Module.extend({
   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;
+    this.defer = Deferred();
+    this.request('api.checkout.pay', 'methods', this.params.data, this.proxy(function (_cx, model) {
+      this.setPending(false);
+      this.setPayload(model.serialize());
+      this.defer.resolve(model);
+    }), this.proxy(function (_cx, model) {
+      this.setPending(false);
+      this.setPayload(model.serialize());
+      this.trigger('error', model.serialize());
+      this.defer.reject(model);
+    }));
+    return this.defer;
   },
   isPending() {
     return this.pendingState === true;
   },
   setPending(state) {
-    this.pendingState = state;
-    clearTimeout(this.pendingTimeoutEvent);
-    this.pendingTimeoutEvent = setTimeout(function (context) {
-      context.trigger('pending', state);
-    }, 50, this);
+    if (this.pendingState !== state) {
+      this.pendingState = state;
+      this.trigger('pending', state);
+    }
   },
   before() {
     if (this.isPending()) return;
@@ -1854,9 +1876,12 @@ const PaymentElement = Module.extend({
   },
   init(params) {
     this.state = {
-      isSupported: false,
-      isAllowed: false,
-      isMounted: false
+      type: 'hide',
+      transition: false,
+      pending: false,
+      mounted: false,
+      supported: false,
+      allowed: false
     };
     this.params = {};
     this.utils.extend(this.params, this.defaults);
@@ -1866,7 +1891,7 @@ const PaymentElement = Module.extend({
   timeout(callback, timeout) {
     this.timeoutMap = this.timeoutMap || {};
     clearTimeout(this.timeoutMap[timeout]);
-    this.timeoutMap[callback] = setTimeout(callback, timeout);
+    this.timeoutMap[callback] = setTimeout(this.proxy(callback), timeout);
     return this;
   },
   getElementUrl() {
@@ -1884,6 +1909,7 @@ const PaymentElement = Module.extend({
   initElement() {
     this.element = this.utils.createElement('div');
     this.iframe = this.utils.createElement('iframe');
+    this.iframeLoaded = Deferred();
     this.button = this.utils.createElement('a');
     this.addCss(this.element, ButtonContainerCss);
     this.addCss(this.button, ButtonCoverCss);
@@ -1901,8 +1927,11 @@ const PaymentElement = Module.extend({
     this.element.appendChild(this.iframe);
     this.element.appendChild(this.button);
   },
-  errorConnector() {},
+  errorConnector() {
+    this.iframeLoaded.resolveWith(this);
+  },
   onloadConnector() {
+    this.iframeLoaded.resolveWith(this);
     this.connector = new Connector({
       target: this.iframe.contentWindow,
       origin: this.params.origin
@@ -1915,13 +1944,13 @@ const PaymentElement = Module.extend({
   },
   onEvent(cx, ev) {
     ev.preventDefault();
-    if (this.pending) return false;
+    if (this.state.pending) return false;
     this.send('event', {
       type: ev.type
     });
   },
   onClick() {
-    if (this.pending) return false;
+    if (this.state.pending) return false;
     this.request.before().done(this.proxy('onClickDone')).fail(this.proxy('onClickFail'));
   },
   onClickDone() {
@@ -1929,19 +1958,19 @@ const PaymentElement = Module.extend({
   },
   onClickFail() {},
   onSupported(cx, supported) {
-    this.state.isSupported = supported.provider.includes(this.params.method);
+    this.state.supported = supported.provider.includes(this.params.method);
     this.render();
   },
   onPayload(cx, payload) {
-    this.state.isAllowed = payload.allowed.includes(this.params.method);
+    this.state.allowed = payload.allowed.includes(this.params.method);
     this.render();
   },
   onPending(cx, state) {
-    this.pending = state;
+    this.state.pending = 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'
+      pointerEvents: this.state.pending ? 'none' : '',
+      opacity: this.state.pending ? '0.5' : '1'
     });
   },
   initEvents() {
@@ -1953,10 +1982,10 @@ const PaymentElement = Module.extend({
   },
   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 = request;
     this.request.off('supported', onSupported).on('supported', onSupported);
     this.request.off('payload', onPayload).on('payload', onPayload);
     this.request.off('pending', onPending).on('pending', onPending);
@@ -1969,50 +1998,95 @@ const PaymentElement = Module.extend({
     return this;
   },
   render() {
-    if (this.state.isSupported === false) return this;
-    if (this.state.isAllowed === false) return this;
+    if (this.state.supported === false) return this.hide();
+    if (this.state.allowed === false) return this.hide();
     this.mount();
     this.show();
   },
+  notMounted() {
+    return this.state.mounted === false;
+  },
+  isMounted() {
+    return this.state.mounted === true;
+  },
   unmount() {
     if (this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
+      this.state.mounted = false;
     }
     return this;
   },
   mount() {
-    if (document.body.contains(this.element) === false) {
+    if (!document.body.contains(this.element)) {
       this.appendTo(this.params.appendTo);
+      this.state.mounted = true;
     }
     return this;
   },
+  transitionValue(value) {
+    return value;
+  },
+  getTimeoutValue() {
+    return toArray(arguments).map(transitionDelay).sort().pop();
+  },
+  getState(state, transition) {
+    return this.state.type === (state ? 'show' : 'hide') && this.state.transition === transition;
+  },
+  triggerState() {
+    this.request.trigger(this.state.type, {
+      transition: this.state.transition,
+      method: this.params.method
+    });
+  },
   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);
+    if (this.notMounted()) return;
+    this.timeout('showCallback', 25);
     return this;
   },
   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);
+    if (this.notMounted()) return;
+    this.timeout('hideCallback', 25);
     return this;
+  },
+  showCallback() {
+    this.addCss(this.element, {
+      transition: this.transitionValue('height 0.2s ease-out'),
+      height: this.utils.cssUnit(this.params.height, 'px'),
+      'will-change': 'height'
+    });
+    this.addCss(this.iframe, {
+      transition: this.transitionValue('opacity 0.225s 0.225s ease-out'),
+      opacity: this.utils.cssUnit(1),
+      'will-change': 'opacity'
+    });
+    this.afterCallback('show');
+  },
+  hideCallback() {
+    this.addCss(this.element, {
+      transition: this.transitionValue('height 0.225s 0.225s ease-out'),
+      height: this.utils.cssUnit(0, 'px'),
+      'will-change': 'height'
+    });
+    this.addCss(this.iframe, {
+      transition: this.transitionValue('opacity 0.225s ease-out'),
+      opacity: this.utils.cssUnit(0),
+      'will-change': 'opacity'
+    });
+    this.afterCallback('hide');
+  },
+  afterCallback(state) {
+    if (this.state.type === state) return;
+    if (this.state.transition) return;
+    this.state.transition = true;
+    this.state.type = state;
+    this.triggerState();
+    this.timeout('afterTransition', this.getTimeoutValue(this.iframe, this.element));
+  },
+  afterTransition() {
+    this.state.transition = false;
+    this.iframeLoaded.then(function () {
+      this.triggerState();
+    });
   }
 });
 
@@ -2082,16 +2156,21 @@ const PaymentButton = Module.extend({
     });
     this.request.setApi(this.api);
     this.request.setMerchant(this.params.data.merchant_id);
+    this.request.on('pending', this.proxy('onPending'));
     this.request.on('details', this.proxy('onDetails'));
     this.request.on('error', this.proxy('onError'));
+    this.request.on('show', this.proxy('onShow'));
+    this.request.on('hide', this.proxy('onHide'));
   },
   initElements() {
+    const self = this;
     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.buttons = [];
     this.container = this.utils.querySelector(this.params.element);
     this.addCss(this.container, {
       display: 'flex',
@@ -2110,24 +2189,51 @@ const PaymentButton = Module.extend({
         height: style.height
       });
       element.setPaymentRequest(request);
+      self.buttons.push(element);
     });
     request.getSupportedMethods();
   },
   update(data) {
     return this.request.update(this.utils.extend(this.params.data, data || {}));
   },
-  onDetails(cx, data) {
+  onDetails(_cx, data) {
     this.api.scope(() => {
       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) {
+  onSuccess(_cx, data) {
     this.trigger('success', data);
   },
-  onError(cx, data) {
+  onError(_cx, data) {
     this.trigger('error', data);
+  },
+  toggleEventType(state, transition) {
+    return state ? transition ? 'show' : 'shown' : transition ? 'hide' : 'hidden';
+  },
+  toggleEventNamespace(state, data) {
+    const name = [];
+    name.push(this.toggleEventType(state, data.transition));
+    name.push(data.method);
+    return name.join(':');
+  },
+  triggerEventComplete(state, data) {
+    const transition = data.transition;
+    const name = this.toggleEventType(state, transition);
+    const check = this.buttons.filter(i => i.isMounted()).every(i => i.getState(state, transition));
+    if (check) this.trigger(name, {});
+  },
+  onShow(_cx, data) {
+    this.trigger(this.toggleEventNamespace(true, data), {});
+    this.triggerEventComplete(true, data);
+  },
+  onHide(_cx, data) {
+    this.trigger(this.toggleEventNamespace(false, data), {});
+    this.triggerEventComplete(false, data);
+  },
+  onPending(_cx, state) {
+    this.trigger('pending', state);
   }
 });