@paydock/client-sdk 1.118.0 → 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>
@@ -7736,6 +7786,7 @@ When the flow type is src, masked checkoutData available is also returned
 | --- | --- | --- |
 | type | <code>string</code> | type of the checkout, can be `src` or `manual`. |
 | token | <code>string</code> | one time token value. |
+| token_type | <code>string</code> | one time token type value, can be `card` or `card_scheme_token`. |
 | [checkoutData] | <code>object</code> | Optional checkout data related to the checkout information. Only available on src flow. |
 | [checkoutData.card_number_bin] | <code>string</code> | The BIN of the card used for the transaction. |
 | [checkoutData.card_number_last4] | <code>string</code> | The last four digits of the card number. |