@paydock/client-sdk 1.11.2-beta → 1.11.3-beta

package/bundles/widget.umd.js

@@ -343,6 +343,7 @@
   var SECURE_3D = '/3ds/webhook';
   var FLYPAY_LINK = '/wallet/flypay';
   var FLYPAY_LOGO_LINK = '/images/logo.png';
+  var VISA_SRC = '/secure-remote-commerce/visa';
   var Link = function () {
       function Link(linkResource) {
           classCallCheck(this, Link);
@@ -398,6 +399,11 @@
           value: function getEnv() {
               return this.env.getEnv();
           }
+      }, {
+          key: "getBaseUrl",
+          value: function getBaseUrl() {
+              return this.env.getConf().url;
+          }
       }]);
       return Link;
   }();
@@ -1585,7 +1591,9 @@
       VALIDATION_ERROR: 'validationError',
       SYSTEM_ERROR: 'systemError',
       CHECKOUT_SUCCESS: 'checkoutSuccess',
+      CHECKOUT_READY: 'checkoutReady',
       CHECKOUT_ERROR: 'checkoutError',
+      CHECKOUT_COMPLETED: 'checkoutCompleted',
       VALIDATION: 'validation',
       SELECT: 'select',
       UNSELECT: 'unselect',
@@ -6401,6 +6409,28 @@
       return ApiChargeInternal;
   }();
 
+  var GET_CONFIG = '/v1/services/:service_id/config';
+  var ApiServiceInternal = function () {
+      function ApiServiceInternal(api) {
+          classCallCheck(this, ApiServiceInternal);
+
+          this.api = api;
+      }
+
+      createClass(ApiServiceInternal, [{
+          key: 'getConfig',
+          value: function getConfig(service_id) {
+              var url = GET_CONFIG.replace(':service_id', service_id);
+              return this.api.getClientPromise('GET', url).send(undefined);
+          }
+      }]);
+      return ApiServiceInternal;
+  }();
+  var CARD_SCHEME_SERVICE;
+  (function (CARD_SCHEME_SERVICE) {
+      CARD_SCHEME_SERVICE["VISA_SRC"] = "VisaSRC";
+  })(CARD_SCHEME_SERVICE || (CARD_SCHEME_SERVICE = {}));
+
   var ApiInternal = function (_ApiBase) {
       inherits(ApiInternal, _ApiBase);
 
@@ -6414,6 +6444,11 @@
           value: function charge() {
               return new ApiChargeInternal(this);
           }
+      }, {
+          key: 'service',
+          value: function service() {
+              return new ApiServiceInternal(this);
+          }
       }]);
       return ApiInternal;
   }(ApiBase);
@@ -7951,6 +7986,399 @@
       return VaultDisplayWidget;
   }();
 
+  var VisaSRCStyles = function VisaSRCStyles() {
+    classCallCheck(this, VisaSRCStyles);
+  };
+  VisaSRCStyles.buttonContainerStyles = "display: flex; flex-direction: column; justify-content: center; align-items: center;";
+  VisaSRCStyles.buttonStyles = "color: #ffff; background-color: #ffbe24; border: none; width: 100%; min-height: 40px; font-size: 16px; font-weight: bold; line-height: 19px; letter-spacing: 0.7px; text-transform: uppercase; border-radius: 4px; margin-bottom: 30px; cursor: pointer;";
+  VisaSRCStyles.footerContainerStyles = "display: flex; flex: 1; flex-wrap: wrap; justify-content: center;";
+  VisaSRCStyles.footerTextStyles = "text-align: center; color: #666666; margin: 0;";
+  VisaSRCStyles.verticalLineStyle = "display: inline-block; padding: 0.5px; background-color: #E5E5E5; height: 15px;";
+  VisaSRCStyles.clickToPayAllCardsStyle = "height: 21px; margin-left: 8px; vertical-align: middle;";
+
+  /**
+   * List of available event's name in the SRC checkout lifecycle
+   * @enum EVENT
+   *
+   * @type {object}
+   * @param {string} CHECKOUT_BUTTON_LOADED=checkoutButtonLoaded
+   * @param {string} CHECKOUT_BUTTON_CLICKED=checkoutButtonClicked
+   * @param {string} IFRAME_LOADED=iframeLoaded
+   * @param {string} CHECKOUT_READY=checkoutReady
+   * @param {string} CHECKOUT_COMPLETED=checkoutCompleted
+   * @param {string} CHECKOUT_ERROR=checkoutError
+   */
+  var EVENT$3;
+  (function (EVENT) {
+    EVENT["CHECKOUT_BUTTON_LOADED"] = "checkoutButtonLoaded";
+    EVENT["CHECKOUT_BUTTON_CLICKED"] = "checkoutButtonClicked";
+    EVENT["IFRAME_LOADED"] = "iframeLoaded";
+    EVENT["CHECKOUT_READY"] = "checkoutReady";
+    EVENT["CHECKOUT_COMPLETED"] = "checkoutCompleted";
+    EVENT["CHECKOUT_ERROR"] = "checkoutError";
+  })(EVENT$3 || (EVENT$3 = {}));
+
+  var VisaSRC = function () {
+      function VisaSRC(button_selector, iframe_selector, service_id, public_key, meta, eventEmitter, autoResize, env, alias) {
+          classCallCheck(this, VisaSRC);
+
+          this.meta = meta;
+          this.eventEmitter = eventEmitter;
+          this.autoResize = autoResize;
+          this.link = new Link(VISA_SRC);
+          this.link.setParams(_extends({ service_id: service_id, public_key: public_key }, meta && { meta: JSON.stringify(meta) }));
+          if (env) this.link.setEnv(env, alias);
+          this.iFrameContainer = new Container(iframe_selector);
+          this.iFrame = new IFrame(this.iFrameContainer);
+          this.buttonContainer = new Container(button_selector);
+          this.iFrameEvent = new IFrameEvent(window);
+          this.setupIFrameEvents();
+      }
+
+      createClass(VisaSRC, [{
+          key: 'setupIFrameEvents',
+          value: function setupIFrameEvents() {
+              var _this = this;
+
+              var widgetId = this.link.getParams().widget_id;
+              this.iFrameEvent.on(EVENT$3.CHECKOUT_READY, widgetId, function (_ref) {
+                  var data = _ref.data;
+
+                  _this.eventEmitter.emit(EVENT$3.CHECKOUT_READY, data);
+              });
+              this.iFrameEvent.on(EVENT$3.CHECKOUT_COMPLETED, widgetId, function (_ref2) {
+                  var data = _ref2.data;
+
+                  _this.eventEmitter.emit(EVENT$3.CHECKOUT_COMPLETED, data);
+              });
+              this.iFrameEvent.on(EVENT$3.CHECKOUT_ERROR, widgetId, function (_ref3) {
+                  var data = _ref3.data;
+
+                  _this.eventEmitter.emit(EVENT$3.CHECKOUT_ERROR, data);
+              });
+              if (this.autoResize) this.useAutoResize(true);
+          }
+      }, {
+          key: 'load',
+          value: function load() {
+              var _this2 = this;
+
+              var container = document.createElement('div');
+              container.setAttribute('style', VisaSRCStyles.buttonContainerStyles);
+              var checkoutButton = document.createElement('button');
+              checkoutButton.setAttribute('style', VisaSRCStyles.buttonStyles);
+              checkoutButton.innerHTML = 'Checkout';
+              var footerContainer = document.createElement('div');
+              footerContainer.setAttribute('style', VisaSRCStyles.footerContainerStyles);
+              var verticalLine = document.createElement('div');
+              verticalLine.setAttribute('style', VisaSRCStyles.verticalLineStyle);
+              var footerText = document.createElement('p');
+              footerText.setAttribute('style', VisaSRCStyles.footerTextStyles);
+              footerText.innerHTML = 'WE ACCEPT';
+              var clickToPayAllCards = document.createElement('img');
+              clickToPayAllCards.setAttribute('style', VisaSRCStyles.clickToPayAllCardsStyle);
+              clickToPayAllCards.src = this.link.getBaseUrl() + '/images/visa-src/src-vmad.svg';
+              checkoutButton.onclick = function () {
+                  _this2.eventEmitter.emit(EVENT$3.CHECKOUT_BUTTON_CLICKED, {});
+                  _this2.iFrame.load(_this2.link.getUrl(), { title: 'Visa SRC checkout' });
+                  _this2.iFrame.getElement().onload = function () {
+                      return _this2.eventEmitter.emit(EVENT$3.IFRAME_LOADED, {});
+                  };
+              };
+              container.appendChild(checkoutButton);
+              container.appendChild(footerContainer);
+              footerContainer.appendChild(footerText);
+              footerContainer.appendChild(clickToPayAllCards);
+              this.buttonContainer.getElement().appendChild(container);
+              this.eventEmitter.emit(EVENT$3.CHECKOUT_BUTTON_LOADED, {});
+          }
+      }, {
+          key: 'getEnv',
+          value: function getEnv() {
+              return this.link.getEnv();
+          }
+      }, {
+          key: 'hideButton',
+          value: function hideButton(_saveSize) {
+              if (this.buttonContainer.getElement()) this.buttonContainer.getElement().style['display'] = 'none';
+          }
+      }, {
+          key: 'showButton',
+          value: function showButton() {
+              if (this.buttonContainer.getElement()) this.buttonContainer.getElement().style['display'] = 'block';
+          }
+      }, {
+          key: 'hideCheckout',
+          value: function hideCheckout(saveSize) {
+              if (this.iFrame) this.iFrame.hide();
+          }
+      }, {
+          key: 'showCheckout',
+          value: function showCheckout() {
+              if (this.iFrame) this.iFrame.show();
+          }
+      }, {
+          key: 'reload',
+          value: function reload() {
+              this.iFrame.remove();
+              this.load();
+          }
+      }, {
+          key: 'useAutoResize',
+          value: function useAutoResize(force) {
+              var _this3 = this;
+
+              if (this.autoResize && !force) return;
+              this.autoResize = true;
+              this.iFrameEvent.on('resize', this.link.getParams().widget_id, function (_ref4) {
+                  var data = _ref4.data;
+
+                  if (_this3.iFrame.getElement()) {
+                      _this3.iFrame.getElement().scrolling = 'no';
+                      if (data.height) _this3.iFrame.setStyle('height', data.height + 'px');
+                  }
+              });
+          }
+      }]);
+      return VisaSRC;
+  }();
+
+  /**
+   * Interface of data used for the Visa Checkout.
+   * @interface IVisaSRCMeta
+   *
+   * @type {object}
+   * @param {string} [srci_transaction_id] Used to identify the SRC Id.
+   * @param {object} [dpa_data] Object where the DPA creation data is stored.
+   * @param {string} [dpa_data.dpa_presentation_name] Name in which the DPA is presented in.
+   * @param {string} [dpa_data.dpa_uri] Used for indicating the DPA URI.
+   * @param {object} [dpa_transaction_options] Object that stores options for creating a trasaction with DPA.
+   * @param {string} [dpa_transaction_options.dpa_locale] DPA’s preferred locale, example en_US.
+   * @param {Array} [dpa_transaction_options.dpa_accepted_billing_countries] Used to indicate list of accepted billing countries for DPA.
+   * @param {Array} [dpa_transaction_options.dpa_accepted_shipping_countries] Used to indicate list of accepted shipping countries for DPA.
+   * @param {string} [dpa_transaction_options.dpa_billing_preference] Used for listing the enumeration for billing preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'.
+   * @param {string} [dpa_transaction_options.dpa_shipping_preference] Used for listing the enumeration for shipping preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'.
+   * @param {boolean} [dpa_transaction_options.consumer_name_requested] Used to check if the name of the consumer is needed.
+   * @param {boolean} [dpa_transaction_options.consumer_email_address_requested] Used to check if the email of the consumer is needed.
+   * @param {boolean} [dpa_transaction_options.consumer_phone_number_requested] Used to check if the phone number of the consumer is needed.
+   * @param {object} [dpa_transaction_options.payment_options] Object used to check the payment options that are included.
+   * @param {number} [dpa_transaction_options.payment_options.dpa_dynamic_data_ttl_minutes] The minimum requested validity period for the transaction credentials.
+   * @param {string} [dpa_transaction_options.payment_options.dynamic_data_type] Used for listing the enumeration for dynamic data types. Options are 'TAVV' and 'DTVV'.
+   * @param {boolean} [dpa_transaction_options.payment_options.dpa_pan_requested] Used to check if PAN number was requested.
+   * @param {string} [dpa_transaction_options.review_action] Used for listing the enumeration of review actions. Options are 'pay' and 'continue'.
+   * @param {string} [dpa_transaction_options.checkout_description] Used for indicating the description of the checkout.
+   * @param {string} [dpa_transaction_options.transaction_type] Used for listing the enumeration of the type of the transaction. 'PURCHASE', 'BILL_PAYMENT' and 'MONEY_TRANSFER'
+   * @param {string} [dpa_transaction_options.order_type] Used for listing the enumeration of the type of the order. Options are 'REAUTHORIZATION', 'RECURRING' and 'INSTALLMENT'.
+   * @param {object} [dpa_transaction_options.transaction_amount] Object used to describe the details of the transaction.
+   * @param {number} [dpa_transaction_options.transaction_amount.transaction_amount] Used to indicate the amount of the transaction.
+   * @param {string} [dpa_transaction_options.transaction_amount.transaction_currency_code] Used to indicate the currency code of the transaction. 3 letter ISO code format.
+   * @param {string} [dpa_transaction_options.merchant_order_id] Used to indicate the merchants order Id.
+   * @param {string} [dpa_transaction_options.merchant_category_code] Used to indicate the merchants category code.
+   * @param {string} [dpa_transaction_options.merchant_country_code] Used to indicate the merchants country code. 2 letter ISO code format.
+   * @param {object} [customer] Object where the customer data is stored to prefill in the checkout.
+   * @param {string} [customer.email] Customer email.
+   * @param {string} [customer.first_name] Customer first name.
+   * @param {string} [customer.last_name] Customer last name.
+   * @param {object} [customer.phone] Object where the customer phone is stored.
+   * @param {string} [customer.phone.country_code] Customer phone country code (example "1" for US).
+   * @param {string} [customer.phone.phone] Customer phone number.
+   * @param {object} [customer.payment_source] Object where the customer billing address data is stored.
+   * @param {string} [customer.payment_source.address_line1] Customer billing address line 1.
+   * @param {string} [customer.payment_source.address_line2] Customer billing address line 2.
+   * @param {string} [customer.payment_source.address_city] Customer billing address city.
+   * @param {string} [customer.payment_source.address_postcode] Customer billing address postcode.
+   * @param {string} [customer.payment_source.address_state] Customer billing address state code (if applicable for the country, example "FL" for Florida).
+   * @param {string} [customer.payment_source.address_country] Customer billing address country code (example "US").
+   *
+   */
+  /**
+   * Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC
+   * @constructor
+   *
+   * @param {string} button_selector - Selector of html element. Container for SRC checkout button.
+   * @param {string} iframe_selector - Selector of html element. Container for SRC checkout iFrame.
+   * @param {string} service_id - Card Scheme Service ID
+   * @param {string} public_key - Paydock public key
+   * @param {IVisaSRCMeta} meta - Data that configures the SRC checkout
+   * @example
+   * var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
+   *
+   **/
+  var SRC = function () {
+      function SRC(button_selector, iframe_selector, service_id, public_key, meta) {
+          classCallCheck(this, SRC);
+
+          this.button_selector = button_selector;
+          this.iframe_selector = iframe_selector;
+          this.service_id = service_id;
+          this.public_key = public_key;
+          this.meta = meta;
+          this.autoResize = false;
+          this.api = new ApiInternal(public_key, API_AUTH_TYPE.PUBLIC_KEY);
+          this.eventEmitter = new EventEmitter();
+      }
+      /**
+       * The final method after configuring the SRC to start the load process of SRC checkout
+       *
+       */
+
+
+      createClass(SRC, [{
+          key: 'load',
+          value: function load() {
+              var _this = this;
+
+              if (this.provider) return;
+              this.api.service().getConfig(this.service_id).then(function (_ref) {
+                  var type = _ref.type;
+
+                  switch (type) {
+                      case CARD_SCHEME_SERVICE.VISA_SRC:
+                          _this.provider = new VisaSRC(_this.button_selector, _this.iframe_selector, _this.service_id, _this.public_key, _this.meta, _this.eventEmitter, _this.autoResize, _this.env, _this.alias);
+                          break;
+                  }
+                  if (_this.provider) _this.provider.load();
+              });
+          }
+          /**
+           * Current method can change environment. By default environment = sandbox.
+           * Also we can change domain alias for this environment. By default domain_alias = paydock.com
+           *
+           * @example
+           * SRC.setEnv('production');
+           * @param {string} env - sandbox, production
+           * @param {string} [alias] - Own domain alias
+           */
+
+      }, {
+          key: 'setEnv',
+          value: function setEnv(env, alias) {
+              if (this.provider) return;
+              this.env = env;
+              this.alias = alias;
+              this.api.setEnv(env, alias);
+          }
+          /**
+           * Method to read the current environment
+           *
+           * @example
+           * SRC.getEnv();
+           */
+
+      }, {
+          key: 'getEnv',
+          value: function getEnv() {
+              if (this.provider) return this.provider.getEnv();else return this.env;
+          }
+          /**
+           * Listen to events of SRC
+           *
+           * @example
+           *
+           * SRC.on('checkoutCompleted', function (token) {
+           *      console.log(token);
+           * });
+           * // or
+           * SRC.on('checkoutCompleted').then(function (token) {
+           *      console.log(token);
+           * });
+           * @param {string} eventName - Available event names [EVENT]{@link EVENT}
+           * @param {listener} [cb]
+           * @return {Promise<any> | void}
+           */
+
+      }, {
+          key: 'on',
+          value: function on(eventName, cb) {
+              var _this2 = this;
+
+              if (typeof cb === "function") return this.eventEmitter.subscribe(eventName, cb);
+              return new Promise(function (resolve) {
+                  return _this2.eventEmitter.subscribe(eventName, function (res) {
+                      return resolve(res);
+                  });
+              });
+          }
+          /**
+           * Using this method you can hide button
+           * @param {boolean} [saveSize=false] - using this param you can save iframe's size (if applicable)
+           *
+           * @example
+           * SRC.hideButton();
+           */
+
+      }, {
+          key: 'hideButton',
+          value: function hideButton(saveSize) {
+              if (this.provider && typeof this.provider.hideButton === 'function') this.provider.hideButton(saveSize);
+          }
+          /**
+           * Using this method you can show the SRC button after using hideButton method
+           *
+           * @example
+           * SRC.showButton();
+           */
+
+      }, {
+          key: 'showButton',
+          value: function showButton() {
+              if (this.provider && typeof this.provider.showButton === 'function') this.provider.showButton();
+          }
+          /**
+           * Using this method you can hide checkout after load and button click
+           * @param {boolean} [saveSize=false] - using this param you can save iframe's size (if applicable)
+           *
+           * @example
+           * SRC.hideCheckout();
+           */
+
+      }, {
+          key: 'hideCheckout',
+          value: function hideCheckout(saveSize) {
+              if (this.provider && typeof this.provider.hideCheckout === 'function') this.provider.hideCheckout(saveSize);
+          }
+          /**
+           * Using this method you can show checkout after using hideCheckout method
+           *
+           * @example
+           * SRC.showCheckout()
+           */
+
+      }, {
+          key: 'showCheckout',
+          value: function showCheckout() {
+              if (this.provider && typeof this.provider.showCheckout === 'function') this.provider.showCheckout();
+          }
+          /**
+           * Using this method you can reload the whole checkout
+           *
+           * @example
+           * SRC.reload()
+           */
+
+      }, {
+          key: 'reload',
+          value: function reload() {
+              if (this.provider) this.provider.reload();
+          }
+          /**
+           * Use this method for resize checkout iFrame according to content height, if applicable
+           *
+           * @example
+           * SRC.useAutoResize();
+           *
+           */
+
+      }, {
+          key: 'useAutoResize',
+          value: function useAutoResize() {
+              this.autoResize = true;
+              if (this.provider && typeof this.provider.useAutoResize === 'function') this.provider.useAutoResize();
+          }
+      }]);
+      return SRC;
+  }();
+
   exports.AfterpayCheckoutButton = AfterpayCheckoutButton;
   exports.Api = Api;
   exports.CHECKOUT_BUTTON_EVENT = CHECKOUT_BUTTON_EVENT;
@@ -7971,6 +8399,7 @@
   exports.PaymentSourceBuilder = Builder$1;
   exports.PaymentSourceWidget = PaymentSourceWidget;
   exports.PaypalCheckoutButton = PaypalCheckoutButton;
+  exports.SRC = SRC;
   exports.STYLABLE_ELEMENT = STYLABLE_ELEMENT;
   exports.STYLABLE_ELEMENT_STATE = STYLABLE_ELEMENT_STATE;
   exports.STYLE = STYLE;