@paydock/client-sdk 1.119.0-beta → 1.119.2-beta

package/README.md

@@ -199,6 +199,20 @@ widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported
 
 This example shows how you can use a lot of other methods to settings your form
 
+
+### Error handling
+
+```javascript
+widget.on('error', (error) => {
+    const errorDiv = document.getElementById('error');
+    const errorMessage = document.getElementById('error-message');
+    
+    errorMessage.textContent = error.data.message;
+    errorDiv.style.display = 'block';
+});
+```
+
+
 ### Full example
 
 ```html
@@ -214,7 +228,34 @@ This example shows how you can use a lot of other methods to settings your form
     <div id="widget"
         widget-style="text-color: #FFFFAA; border-color: #yellow"
         title="Payment form"
-        finish-text="Payment resource was successfully accepted"></div>
+        finish-text="Payment resource was successfully accepted">
+    </div>
+
+    <div 
+        id="error" 
+        style="
+            display: none;
+            max-width: 600px;
+            margin: 16px auto;
+            padding: 16px 20px;
+            border-radius: 8px;
+            background-color: #FEF2F2;
+            border: 1px solid #FEE2E2;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            font-family: system-ui, -apple-system, sans-serif;
+            color: #991B1B;
+            line-height: 1.5;
+            font-size: 14px;
+        "
+        title="error"
+        >
+        <div style="display: flex; align-items: flex-start; gap: 12px;">
+            <div>
+                <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Access Error</h4>
+                <div id="error-message"></div>
+            </div>
+        </div>
+    </div> 
 </form>
 
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
@@ -224,11 +265,15 @@ This example shows how you can use a lot of other methods to settings your form
 	widget.setSupportedCardIcons(['mastercard', 'visa']);
 	widget.setFormFields(['phone', 'email']);
 	widget.setRefId('custom-ref-id');
-    widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
+    widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');
 
+    widget.on('error', (error) => {
+        document.getElementById('error-message').textContent = error.data.message;
+        document.getElementById('error').style.display = 'block';
+    });
 	widget.load();
 </script>
-</script>
+
 </body>
 </html>
 ```
@@ -250,6 +295,14 @@ This example shows how you can use a lot of other methods to settings your form
 </dd>
 </dl>
 
+## Members
+
+<dl>
+<dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
+<dd><p>Purposes</p>
+</dd>
+</dl>
+
 ## Constants
 
 <dl>
@@ -262,9 +315,6 @@ This example shows how you can use a lot of other methods to settings your form
 <dt><a href="#user-content-w_PAYMENT_TYPE">PAYMENT_TYPE</a> : <code>object</code></dt>
 <dd><p>List of available payment source types</p>
 </dd>
-<dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
-<dd><p>Purposes</p>
-</dd>
 <dt><a href="#user-content-w_FORM_FIELD">FORM_FIELD</a> : <code>object</code></dt>
 <dd><p>Current constant include available type of fields which can be included to widget</p>
 </dd>
@@ -2502,6 +2552,19 @@ Method for setting a custom language code
 ```javascript
 config.setLanguage('en');
 ```
+<a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
+
+## PURPOSE : <code>object</code>
+Purposes
+
+**Kind**: global variable  
+
+| Param | Type | Default |
+| --- | --- | --- |
+| PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> | 
+| CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> | 
+| CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> | 
+
 <a name="w_EVENT" id="w_EVENT" href="#user-content-w_EVENT">&nbsp;</a>
 
 ## EVENT : <code>object</code>
@@ -2551,19 +2614,6 @@ List of available payment source types
 | BANK_ACCOUNT | <code>string</code> | <code>&quot;bank_account&quot;</code> | 
 | CHECKOUT | <code>string</code> | <code>&quot;checkout&quot;</code> | 
 
-<a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
-
-## PURPOSE : <code>object</code>
-Purposes
-
-**Kind**: global constant  
-
-| Param | Type | Default |
-| --- | --- | --- |
-| PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> | 
-| CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> | 
-| CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> | 
-
 <a name="w_FORM_FIELD" id="w_FORM_FIELD" href="#user-content-w_FORM_FIELD">&nbsp;</a>
 
 ## FORM\_FIELD : <code>object</code>

package/bundles/index.cjs

@@ -23,6 +23,13 @@ function _callSuper(t, o, e) {
 function _classCallCheck(a, n) {
   if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
 function _defineProperties(e, r) {
   for (var t = 0; t < r.length; t++) {
     var o = r[t];
@@ -125,6 +132,13 @@ function _inherits(t, e) {
     writable: !1
   }), e && _setPrototypeOf(t, e);
 }
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
 function _isNativeReflectConstruct() {
   try {
     var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
@@ -526,6 +540,28 @@ function _unsupportedIterableToArray(r, a) {
     return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
 }
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? new Map() : void 0;
+  return _wrapNativeSuper = function (t) {
+    if (null === t || !_isNativeFunction(t)) return t;
+    if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t)) return r.get(t);
+      r.set(t, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: !1,
+        writable: !0,
+        configurable: !0
+      }
+    }), _setPrototypeOf(Wrapper, t);
+  }, _wrapNativeSuper(t);
+}
 
 var Browser = /*#__PURE__*/function () {
   function Browser() {
@@ -891,7 +927,7 @@ SDK.headerKeys = Object.freeze({
   version: 'x-sdk-version',
   type: 'x-sdk-type'
 });
-SDK._version = 'v1.119.0-beta';
+SDK._version = 'v1.119.2-beta';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -4959,6 +4995,7 @@ var EVENT$4 = {
   FINISH: 'finish',
   VALIDATION_ERROR: 'validationError',
   SYSTEM_ERROR: 'systemError',
+  ERROR: 'error',
   /** @deprecated */
   CHECKOUT_SUCCESS: 'checkoutSuccess',
   CHECKOUT_READY: 'checkoutReady',
@@ -12820,12 +12857,12 @@ var PAYMENT_SOURCE_TYPE;
   PAYMENT_SOURCE_TYPE["CHECKOUT"] = "checkout";
   PAYMENT_SOURCE_TYPE["BANK_ACCOUNT"] = "bank_account";
 })(PAYMENT_SOURCE_TYPE || (PAYMENT_SOURCE_TYPE = {}));
-var PURPOSE$1;
+var PURPOSE;
 (function (PURPOSE) {
   PURPOSE["PAYMENT_SOURCE"] = "payment_source";
   PURPOSE["CARD_PAYMENT_SOURCE_WITH_CVV"] = "card_payment_source_with_cvv";
   PURPOSE["CARD_PAYMENT_SOURCE_WITHOUT_CVV"] = "card_payment_source_without_cvv";
-})(PURPOSE$1 || (PURPOSE$1 = {}));
+})(PURPOSE || (PURPOSE = {}));
 var ALLOWED_RESPONSE_DATA;
 (function (ALLOWED_RESPONSE_DATA) {
   ALLOWED_RESPONSE_DATA["PAYMENT_SOURCE_TOKEN"] = "payment_source";
@@ -12998,11 +13035,11 @@ function getBasePredefinedFields(configuration) {
 }
 function getHandleCvv(configuration) {
   switch (configuration.purpose) {
-    case PURPOSE$1.CARD_PAYMENT_SOURCE_WITH_CVV:
+    case PURPOSE.CARD_PAYMENT_SOURCE_WITH_CVV:
       {
         return true;
       }
-    case PURPOSE$1.CARD_PAYMENT_SOURCE_WITHOUT_CVV:
+    case PURPOSE.CARD_PAYMENT_SOURCE_WITHOUT_CVV:
       {
         return false;
       }
@@ -13013,6 +13050,22 @@ function getHandleCvv(configuration) {
   }
 }
 
+var CustomError = /*#__PURE__*/function (_Error) {
+  function CustomError(message, status, data) {
+    var _this;
+    _classCallCheck(this, CustomError);
+    _this = _callSuper(this, CustomError, [message]);
+    _this.status = status;
+    _this.data = _extends({
+      _message: message
+    }, data);
+    Object.setPrototypeOf(_this, CustomError.prototype);
+    return _this;
+  }
+  _inherits(CustomError, _Error);
+  return _createClass(CustomError);
+}(/*#__PURE__*/_wrapNativeSuper(Error));
+
 /**
  * List of available payment source types
  *
@@ -13035,11 +13088,12 @@ var PAYMENT_TYPE = {
  * @param {string} CARD_PAYMENT_SOURCE_WITH_CVV=card_payment_source_with_cvv
  * @param {string} CARD_PAYMENT_SOURCE_WITHOUT_CVV=card_payment_source_without_cvv
  * */
-var PURPOSE = {
-  PAYMENT_SOURCE: 'payment_source',
-  CARD_PAYMENT_SOURCE_WITH_CVV: 'card_payment_source_with_cvv',
-  CARD_PAYMENT_SOURCE_WITHOUT_CVV: 'card_payment_source_without_cvv'
-};
+exports.PURPOSE = void 0;
+(function (PURPOSE) {
+  PURPOSE["PAYMENT_SOURCE"] = "payment_source";
+  PURPOSE["CARD_PAYMENT_SOURCE_WITH_CVV"] = "card_payment_source_with_cvv";
+  PURPOSE["CARD_PAYMENT_SOURCE_WITHOUT_CVV"] = "card_payment_source_without_cvv";
+})(exports.PURPOSE || (exports.PURPOSE = {}));
 var CONFIGURATION_LINK = '/v1/remote-action/configs';
 var DEFAULT_GATEWAY_LINK = '/v1/gateways/default';
 /**
@@ -13062,11 +13116,11 @@ var Configuration = /*#__PURE__*/function () {
   function Configuration() {
     var gatewayID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
     var paymentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PAYMENT_TYPE.CARD;
-    var purpose = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : PURPOSE.PAYMENT_SOURCE;
+    var purpose = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : exports.PURPOSE.PAYMENT_SOURCE;
     _classCallCheck(this, Configuration);
     if (ObjectHelper.values(PAYMENT_TYPE).indexOf(paymentType) === -1) throw new Error('unsupported payment type');
     if (paymentType === PAYMENT_TYPE.CHECKOUT) throw new Error('Payment type "checkout" is deprecated. Use CheckoutButton for this type of payments https://www.npmjs.com/package/@paydock/client-sdk#checkout-button');
-    if (ObjectHelper.values(PURPOSE).indexOf(purpose) === -1) throw new Error('unsupported purpose');
+    if (ObjectHelper.values(exports.PURPOSE).indexOf(purpose) === -1) throw new Error('unsupported purpose');
     this.env = new Env(API_URL);
     this.configs = {
       purpose: purpose,
@@ -13273,7 +13327,7 @@ var Configuration = /*#__PURE__*/function () {
     key: "createEachToken",
     value: function createEachToken(accessToken, configs) {
       return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var tokens, index, data, validatedConfig, _validatedConfig;
+        var tokens, index, data, validatedConfig;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -13281,16 +13335,16 @@ var Configuration = /*#__PURE__*/function () {
               _context.t0 = _regeneratorRuntime().keys(configs);
             case 2:
               if ((_context.t1 = _context.t0()).done) {
-                _context.next = 25;
+                _context.next = 18;
                 break;
               }
               index = _context.t1.value;
               if (!configs.hasOwnProperty(index)) {
-                _context.next = 23;
+                _context.next = 16;
                 break;
               }
               if (!(configs[index].configs.predefined_fields.gateway_id === "default")) {
-                _context.next = 21;
+                _context.next = 14;
                 break;
               }
               _context.next = 8;
@@ -13298,39 +13352,23 @@ var Configuration = /*#__PURE__*/function () {
             case 8:
               data = _context.sent;
               if (!(data['status'] !== 200)) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
               console.error("--- | gateway: default | ".concat(data['error']['message']));
-              throw new Error('gateway: unexpected error with extract default gateway id');
-            case 12:
-              if (!(data['status'] === 200)) {
-                _context.next = 16;
-                break;
-              }
+              data['error']['purpose'] = configs[index].configs.purpose;
+              throw new CustomError('gateway: unexpected error with extract default gateway id', data['status'], data['error']);
+            case 13:
               configs[index].configs.predefined_fields.gateway_id = data['resource']['data']['_id'];
-              _context.next = 17;
-              break;
-            case 16:
-              throw new Error('gateway: unexpected error with extract default gateway id');
-            case 17:
+            case 14:
               validatedConfig = validateConfiguration(configs[index].configs);
-              if (validatedConfig) {
-                Configuration.addTokenInBase64(tokens, JSON.stringify(validatedConfig), index);
-              }
-              _context.next = 23;
-              break;
-            case 21:
-              _validatedConfig = validateConfiguration(configs[index].configs);
-              if (_validatedConfig) {
-                Configuration.addTokenInBase64(tokens, JSON.stringify(_validatedConfig), index);
-              }
-            case 23:
+              if (validatedConfig) Configuration.addTokenInBase64(tokens, JSON.stringify(validatedConfig), index);
+            case 16:
               _context.next = 2;
               break;
-            case 25:
+            case 18:
               return _context.abrupt("return", tokens);
-            case 26:
+            case 19:
             case "end":
               return _context.stop();
           }
@@ -13576,6 +13614,7 @@ var MultiWidget = /*#__PURE__*/function () {
     this.accessToken = accessToken;
     if (!conf || Array.isArray(conf) && !conf.length) throw Error('configuration token is required');
     if (typeof conf === 'string') this.configTokens.push(conf);else if (conf instanceof Configuration) this.configs.push(conf);else if (Array.isArray(conf) && typeof conf[0] === 'string') this.configTokens = conf;else if (Array.isArray(conf) && conf[0] instanceof Configuration) this.configs = conf;else throw Error('Unsupported type of configuration token');
+    this.event = new IFrameEvent(window);
   }
   /**
    * Object contain styles for widget
@@ -13966,16 +14005,15 @@ var MultiWidget = /*#__PURE__*/function () {
         this.link.setParams({
           configuration_tokens: this.configTokens.join(',')
         });
-        return cb(this.link.getUrl());
+        cb(this.link.getUrl());
+      } else {
+        Configuration.createEachToken(this.accessToken, this.configs).then(function (tokens) {
+          _this2.link.concatParams({
+            configuration_tokens: tokens.join(',')
+          });
+          cb(_this2.link.getUrl());
+        })["catch"](errorCb);
       }
-      Configuration.createEachToken(this.accessToken, this.configs).then(function (tokens) {
-        _this2.link.concatParams({
-          configuration_tokens: tokens.join(',')
-        });
-        return cb(_this2.link.getUrl());
-      }, function (errors) {
-        errorCb(errors);
-      });
     }
     /**
      * Method for setting a custom language code
@@ -13996,6 +14034,21 @@ var MultiWidget = /*#__PURE__*/function () {
     value: function getLink() {
       return this.link;
     }
+  }, {
+    key: "handleErrorEvent",
+    value: function handleErrorEvent(err) {
+      if (Object.values(EVENT$4).includes(err.event)) {
+        this.event.emit({
+          event: err.event,
+          message_source: 'widget',
+          purpose: err.data.purpose || '',
+          widget_id: this.link.getParams().widget_id,
+          data: err.data
+        });
+        return;
+      }
+      console.error("Unknown event: ", err);
+    }
   }]);
 }();
 
@@ -14161,7 +14214,6 @@ var HtmlMultiWidget = /*#__PURE__*/function (_MultiWidget) {
     _this.container = new Container(selector);
     _this.iFrame = new IFrame(_this.container);
     _this.triggerElement = new Trigger(_this.iFrame);
-    _this.event = new IFrameEvent(window);
     return _this;
   }
   /**
@@ -14181,11 +14233,12 @@ var HtmlMultiWidget = /*#__PURE__*/function (_MultiWidget) {
           title: 'Card details'
         });
         _this2.afterLoad();
-      }, function (errors) {
-        console.error('Errors when creating a token[s, widget will not be load:');
-        for (var index in errors) {
-          if (errors.hasOwnProperty(index)) console.error("--- | ".concat(errors[index]));
-        }
+      }, function (error) {
+        if (error instanceof CustomError) _this2.handleErrorEvent({
+          event: EVENT$4.ERROR,
+          data: error.data
+        });
+        console.error('Error when creating a token, widget will not be loaded');
       });
     }
     /**
@@ -15084,7 +15137,7 @@ var InstructionCardFormShow = /*#__PURE__*/function (_InstructionHandler) {
     value: function handle(context) {
       var _this = this;
       var _a;
-      this.widget = new HtmlWidget(this.formSelector, context === null || context === void 0 ? void 0 : context.instruction_token, 'not_configured', 'card', 'card_payment_source_with_cvv');
+      this.widget = new HtmlWidget(this.formSelector, context === null || context === void 0 ? void 0 : context.instruction_token, 'not_configured', 'card', exports.PURPOSE.CARD_PAYMENT_SOURCE_WITH_CVV);
       this.widget.setStyles(_extends({
         button_color: DEFAULT_VARIABLES.BTN_COLOR,
         background_color: DEFAULT_VARIABLES.BG_COLOR,
@@ -35424,7 +35477,6 @@ exports.HtmlWidget = HtmlWidget;
 exports.InstructionDebugger = InstructionDebugger;
 exports.MultiWidget = MultiWidget;
 exports.PAYMENT_TYPE = PAYMENT_TYPE;
-exports.PURPOSE = PURPOSE;
 exports.PayPalDataCollector = PayPalDataCollector;
 exports.PayPalSavePaymentSourceWidget = PayPalSavePaymentSourceWidget;
 exports.PaymentSourceBuilder = Builder;