@paydock/client-sdk 1.11.3-beta → 1.11.4

package/bundles/widget.umd.js

@@ -7399,7 +7399,7 @@
               var _this = this;
 
               this.iFrameEvent.on(EVENT.CHARGE_AUTH, widgetId, function (data) {
-                  if (data.status === "MethodSkipped" /* SKIPPED */) _this.performAuthentication(data);
+                  if (data.status === "MethodSkipped" /* SKIPPED */ || data.status === "MethodFinished" /* FINISHED */) _this.performAuthentication(data);
               });
               this.iFrameEvent.on(EVENT.CHARGE_AUTH_SUCCESS, widgetId, function (data) {
                   _this.processResult(data.charge_3ds_id);
@@ -7990,11 +7990,11 @@
     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.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: 15px; cursor: pointer;";
   VisaSRCStyles.footerContainerStyles = "display: flex; flex: 1; flex-wrap: wrap; justify-content: center;";
-  VisaSRCStyles.footerTextStyles = "text-align: center; color: #666666; margin: 0;";
+  VisaSRCStyles.footerTextStyles = "text-align: center; color: #666666; margin: 2px 0;";
   VisaSRCStyles.verticalLineStyle = "display: inline-block; padding: 0.5px; background-color: #E5E5E5; height: 15px;";
-  VisaSRCStyles.clickToPayAllCardsStyle = "height: 21px; margin-left: 8px; vertical-align: middle;";
+  VisaSRCStyles.clickToPayAllCardsStyle = "height: 17px; margin-left: 8px; vertical-align: middle; padding-top: 3px;";
 
   /**
    * List of available event's name in the SRC checkout lifecycle
@@ -8010,13 +8010,55 @@
    */
   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["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 STYLE$2 = {
+      BUTTON_TEXT_COLOR: 'button_text_color',
+      PRIMARY_COLOR: 'primary_color',
+      FONT_FAMILY: 'font_family',
+      CARD_SCHEMES: 'card_schemes'
+  };
+
+  var CARD_SCHEME = {
+      VISA: 'visa',
+      MASTERCARD: 'mastercard',
+      AMEX: 'amex',
+      DISCOVER: 'discover'
+  };
+  var CHEVRON_VMAD_IMG_PATH = '/images/visa-src/Chevron_Large_VMAD.png';
+  var CHEVRON_VMA_IMG_PATH = '/images/visa-src/Chevron_Large_VMA.png';
+  var CHEVRON_VM_IMG_PATH = '/images/visa-src/Chevron_Large_VM.png';
+  var CHEVRON_M_IMG_PATH = '/images/visa-src/Chevron_Large_M.png';
+  var CHEVRON_D_IMG_PATH = '/images/visa-src/Chevron_Large_D.png';
+  var CHEVRON_V_IMG_PATH = '/images/visa-src/Chevron_Large_V.png';
+  var VMAD_IMG_PATH = '/images/visa-src/vmad.svg';
+  var VMA_IMG_PATH = '/images/visa-src/logos/Networks_Large_VMA.png';
+  var VM_IMG_PATH = '/images/visa-src/logos/Networks_Large_VM.png';
+  var M_IMG_PATH = '/images/visa-src/logos/master-logo.png';
+  var D_IMG_PATH = '/images/visa-src/logos/Networks_Large_D.png';
+  var V_IMG_PATH = '/images/visa-src/logos/visa-logo.png';
+  var GenerateCardSchemesLogo = function GenerateCardSchemesLogo(card_scheme) {
+      var chevron = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!card_scheme || !Array.isArray(card_scheme)) return chevron ? CHEVRON_VMAD_IMG_PATH : VMAD_IMG_PATH;
+      var card_scheme_sort = card_scheme.sort();
+      if (includeArray([CARD_SCHEME.AMEX, CARD_SCHEME.MASTERCARD, CARD_SCHEME.VISA], card_scheme_sort)) return chevron ? CHEVRON_VMA_IMG_PATH : VMA_IMG_PATH;
+      if (includeArray([CARD_SCHEME.MASTERCARD, CARD_SCHEME.VISA], card_scheme_sort)) return chevron ? CHEVRON_VM_IMG_PATH : VM_IMG_PATH;
+      if (includeArray([CARD_SCHEME.MASTERCARD], card_scheme_sort)) return chevron ? CHEVRON_M_IMG_PATH : M_IMG_PATH;
+      if (includeArray([CARD_SCHEME.DISCOVER], card_scheme_sort)) return chevron ? CHEVRON_D_IMG_PATH : D_IMG_PATH;
+      if (includeArray([CARD_SCHEME.VISA], card_scheme_sort)) return chevron ? CHEVRON_V_IMG_PATH : V_IMG_PATH;
+      return chevron ? CHEVRON_V_IMG_PATH : VMAD_IMG_PATH;
+  };
+  var includeArray = function includeArray(condition, card_scheme) {
+      return condition.every(function (card, index) {
+          return card === card_scheme[index];
+      });
+  };
 
   var VisaSRC = function () {
       function VisaSRC(button_selector, iframe_selector, service_id, public_key, meta, eventEmitter, autoResize, env, alias) {
@@ -8063,10 +8105,13 @@
           value: function load() {
               var _this2 = this;
 
+              var _a;
               var container = document.createElement('div');
               container.setAttribute('style', VisaSRCStyles.buttonContainerStyles);
               var checkoutButton = document.createElement('button');
               checkoutButton.setAttribute('style', VisaSRCStyles.buttonStyles);
+              if (this.meta.customizations.primary_color) checkoutButton.style.backgroundColor = this.meta.customizations.primary_color;
+              if (this.meta.customizations.button_text_color) checkoutButton.style.color = this.meta.customizations.button_text_color;
               checkoutButton.innerHTML = 'Checkout';
               var footerContainer = document.createElement('div');
               footerContainer.setAttribute('style', VisaSRCStyles.footerContainerStyles);
@@ -8077,7 +8122,7 @@
               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';
+              clickToPayAllCards.src = this.link.getBaseUrl() + ('' + GenerateCardSchemesLogo((_a = this.meta.customizations) === null || _a === void 0 ? void 0 : _a.card_schemes, true));
               checkoutButton.onclick = function () {
                   _this2.eventEmitter.emit(EVENT$3.CHECKOUT_BUTTON_CLICKED, {});
                   _this2.iFrame.load(_this2.link.getUrl(), { title: 'Visa SRC checkout' });
@@ -8189,7 +8234,6 @@
    * @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
@@ -8198,32 +8242,58 @@
    * @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 {string} public_key_or_access_token - Paydock public key or Access Token
    * @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) {
+      function SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, 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.public_key_or_access_token = public_key_or_access_token;
           this.meta = meta;
           this.autoResize = false;
-          this.api = new ApiInternal(public_key, API_AUTH_TYPE.PUBLIC_KEY);
+          this.style = {};
+          this.api = new ApiInternal(public_key_or_access_token, API_AUTH_TYPE.PUBLIC_KEY);
           this.eventEmitter = new EventEmitter();
       }
       /**
-       * The final method after configuring the SRC to start the load process of SRC checkout
-       *
-       */
+      * Object contain styles for widget - call before `.load()`.
+      *
+      * @example
+      * widget.setStyles({
+      *       button_text_color: '#32a852',
+      *       primary_color: '#32a852',
+      *       font_family: 'sans-serif',
+      *       card_schemes: ['visa']
+      *   });
+      * @param {IStyles} fields - name of styles which can be shown in widget [STYLE]{@link STYLE}
+      */
 
 
       createClass(SRC, [{
+          key: 'setStyles',
+          value: function setStyles(styles) {
+              for (var index in styles) {
+                  if (styles.hasOwnProperty(index)) this.setStyle(index, styles[index]);
+              }
+          }
+      }, {
+          key: 'setStyle',
+          value: function setStyle(param, value) {
+              if (ObjectHelper.values(STYLE$2).indexOf(param) !== -1) this.style[param] = value;else console.warn('Widget::setStyle[s: unsupported style param ' + param);
+          }
+          /**
+           * The final method after configuring the SRC to start the load process of SRC checkout
+           *
+           */
+
+      }, {
           key: 'load',
           value: function load() {
               var _this = this;
@@ -8232,9 +8302,10 @@
               this.api.service().getConfig(this.service_id).then(function (_ref) {
                   var type = _ref.type;
 
+                  _this.meta.customizations = _this.style; // assign the style on the start of the widget
                   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);
+                          _this.provider = new VisaSRC(_this.button_selector, _this.iframe_selector, _this.service_id, _this.public_key_or_access_token, _this.meta, _this.eventEmitter, _this.autoResize, _this.env, _this.alias);
                           break;
                   }
                   if (_this.provider) _this.provider.load();