@paydock/client-sdk 1.119.0-beta → 1.119.2

package/docs/api-widget.md

@@ -15,6 +15,14 @@
 </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>
@@ -27,9 +35,6 @@
 <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>
@@ -2267,6 +2272,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>
@@ -2316,19 +2334,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/docs/widget-examples.md

@@ -99,6 +99,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
@@ -114,7 +128,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>
@@ -124,11 +165,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>
 ```

package/examples/multi-html-widget/extend.html

@@ -24,6 +24,11 @@
 		new paydock.Configuration('gatewayId', 'bank_account')
 	]);
 
+	// ### listen to access errors and handle them ###
+	widget.on('error', function (error) {
+		console.error('An error occurred', error);
+	});
+
 	widget.load();
 </script>
 </body>

package/package.json

@@ -104,7 +104,7 @@
     }
   },
   "name": "@paydock/client-sdk",
-  "version": "1.119.0-beta",
+  "version": "1.119.2",
   "scripts": {
     "build:doc": "node docs/html/marked.js",
     "build:js": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",

package/slate.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>
 ```