@paydock/client-sdk 1.113.2-beta → 1.114.7-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/README.md +757 -80
  2. package/bundles/index.cjs +1342 -188
  3. package/bundles/index.cjs.d.ts +2355 -2058
  4. package/bundles/index.mjs +1338 -185
  5. package/bundles/index.mjs.d.ts +2355 -2058
  6. package/bundles/types/api/api-base.d.ts.map +1 -1
  7. package/bundles/types/api/api-charge-internal.d.ts +1 -0
  8. package/bundles/types/api/api-charge-internal.d.ts.map +1 -1
  9. package/bundles/types/api/api-checkout-internal.d.ts +1 -0
  10. package/bundles/types/api/api-checkout-internal.d.ts.map +1 -1
  11. package/bundles/types/checkout/helpers/resource-helper.d.ts +4 -3
  12. package/bundles/types/checkout/helpers/resource-helper.d.ts.map +1 -1
  13. package/bundles/types/checkout/helpers/session-helper.d.ts +3 -0
  14. package/bundles/types/checkout/helpers/session-helper.d.ts.map +1 -1
  15. package/bundles/types/checkout/instructions/v1/instruction.afterpay_checkout_form.show.d.ts.map +1 -1
  16. package/bundles/types/checkout/instructions/v1/instruction.card_form.show.d.ts.map +1 -1
  17. package/bundles/types/checkout/instructions/v1/instruction.generic.show_message.d.ts.map +1 -1
  18. package/bundles/types/checkout/instructions/v1/instruction.zip_checkout_form.show.d.ts.map +1 -1
  19. package/bundles/types/checkout/layout-widgets/additionals.d.ts +1 -1
  20. package/bundles/types/checkout/layout-widgets/additionals.d.ts.map +1 -1
  21. package/bundles/types/checkout/layout-widgets/payment-methods-template.d.ts.map +1 -1
  22. package/bundles/types/checkout/layout-widgets/payment-methods.d.ts +1 -1
  23. package/bundles/types/checkout/layout-widgets/payment-methods.d.ts.map +1 -1
  24. package/bundles/types/components/iframe-event.d.ts +34 -29
  25. package/bundles/types/components/iframe-event.d.ts.map +1 -1
  26. package/bundles/types/components/iframe.d.ts +2 -2
  27. package/bundles/types/components/iframe.d.ts.map +1 -1
  28. package/bundles/types/components/param.d.ts +3 -0
  29. package/bundles/types/components/param.d.ts.map +1 -1
  30. package/bundles/types/configs/env/environment.paydock.d.ts.map +1 -1
  31. package/bundles/types/helper/event-error.d.ts +55 -0
  32. package/bundles/types/helper/event-error.d.ts.map +1 -0
  33. package/bundles/types/helper/process-event-error.d.ts +9 -0
  34. package/bundles/types/helper/process-event-error.d.ts.map +1 -0
  35. package/bundles/types/index-cba.d.ts +5 -1
  36. package/bundles/types/index-cba.d.ts.map +1 -1
  37. package/bundles/types/index.d.ts +3 -1
  38. package/bundles/types/index.d.ts.map +1 -1
  39. package/bundles/types/paypal-data-collector/index.d.ts +23 -0
  40. package/bundles/types/paypal-data-collector/index.d.ts.map +1 -0
  41. package/bundles/types/paypal-data-collector/paypal-data-collector.d.ts +58 -0
  42. package/bundles/types/paypal-data-collector/paypal-data-collector.d.ts.map +1 -0
  43. package/bundles/types/paypal-data-collector/paypal-data-collector.interfaces.d.ts +21 -0
  44. package/bundles/types/paypal-data-collector/paypal-data-collector.interfaces.d.ts.map +1 -0
  45. package/bundles/types/paypal-data-collector/paypal-data-collector.service.d.ts +17 -0
  46. package/bundles/types/paypal-data-collector/paypal-data-collector.service.d.ts.map +1 -0
  47. package/bundles/types/paypal-save-payment-source/index.d.ts +61 -0
  48. package/bundles/types/paypal-save-payment-source/index.d.ts.map +1 -0
  49. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.d.ts +85 -0
  50. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.d.ts.map +1 -0
  51. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.interfaces.d.ts +83 -0
  52. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.interfaces.d.ts.map +1 -0
  53. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.service.d.ts +35 -0
  54. package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.service.d.ts.map +1 -0
  55. package/bundles/types/secure-remote-commerce/index.d.ts +2 -1
  56. package/bundles/types/secure-remote-commerce/index.d.ts.map +1 -1
  57. package/bundles/types/secure-remote-commerce/interfaces.d.ts +2 -5
  58. package/bundles/types/secure-remote-commerce/interfaces.d.ts.map +1 -1
  59. package/bundles/types/secure-remote-commerce/providers/mastercard-src/mastercard-src.d.ts.map +1 -1
  60. package/bundles/types/shared/services/configuration-validation/configuration-validation.d.ts +12 -0
  61. package/bundles/types/shared/services/configuration-validation/configuration-validation.d.ts.map +1 -0
  62. package/bundles/types/shared/services/configuration-validation/types.d.ts +73 -0
  63. package/bundles/types/shared/services/configuration-validation/types.d.ts.map +1 -0
  64. package/bundles/types/wallet-buttons/enums.d.ts +12 -0
  65. package/bundles/types/wallet-buttons/enums.d.ts.map +1 -0
  66. package/bundles/types/wallet-buttons/index.d.ts +5 -1
  67. package/bundles/types/wallet-buttons/index.d.ts.map +1 -1
  68. package/bundles/types/wallet-buttons/wallet-buttons.d.ts +28 -15
  69. package/bundles/types/wallet-buttons/wallet-buttons.d.ts.map +1 -1
  70. package/bundles/types/wallet-buttons/wallet-services/wallet-service.d.ts +1 -1
  71. package/bundles/types/wallet-buttons/wallet-services/wallet-service.d.ts.map +1 -1
  72. package/bundles/types/wallet-buttons-express/base.wallet-button-express.d.ts.map +1 -1
  73. package/bundles/types/wallet-buttons-express/index.d.ts +1 -0
  74. package/bundles/types/wallet-buttons-express/index.d.ts.map +1 -1
  75. package/bundles/types/wallet-buttons-express/interfaces/wallet-capture-request.interface.d.ts +1 -0
  76. package/bundles/types/wallet-buttons-express/interfaces/wallet-capture-request.interface.d.ts.map +1 -1
  77. package/bundles/types/wallet-buttons-express/services/apple-pay/apple-pay.wallet-button-express.d.ts.map +1 -1
  78. package/bundles/types/wallet-buttons-express/services/paypal/interfaces/paypal-wallet-meta.interface.d.ts +1 -0
  79. package/bundles/types/wallet-buttons-express/services/paypal/interfaces/paypal-wallet-meta.interface.d.ts.map +1 -1
  80. package/bundles/types/wallet-buttons-express/services/paypal/paypal.wallet-button-express.d.ts.map +1 -1
  81. package/bundles/types/widget/configuration.d.ts +13 -9
  82. package/bundles/types/widget/configuration.d.ts.map +1 -1
  83. package/bundles/types/widget/html-multi-widget.d.ts +1 -2
  84. package/bundles/types/widget/html-multi-widget.d.ts.map +1 -1
  85. package/bundles/types/widget/html-widget.d.ts +2 -1
  86. package/bundles/types/widget/html-widget.d.ts.map +1 -1
  87. package/bundles/types/widget/multi-widget.d.ts +14 -2
  88. package/bundles/types/widget/multi-widget.d.ts.map +1 -1
  89. package/bundles/widget.umd.js +1342 -188
  90. package/bundles/widget.umd.js.d.ts +2355 -2058
  91. package/bundles/widget.umd.js.min.d.ts +2355 -2058
  92. package/bundles/widget.umd.min.js +1 -61
  93. package/docs/api-widget.md +59 -16
  94. package/docs/click-to-pay-examples.md +0 -36
  95. package/docs/click-to-pay.md +1 -3
  96. package/docs/paypal-data-collector-examples.md +59 -0
  97. package/docs/paypal-data-collector.md +149 -0
  98. package/docs/paypal-save-payment-source-examples.md +63 -0
  99. package/docs/paypal-save-payment-source.md +256 -0
  100. package/docs/wallet-buttons-examples.md +1 -1
  101. package/docs/wallet-buttons-express-examples.md +1 -1
  102. package/docs/wallet-buttons-express.md +1 -0
  103. package/docs/wallet-buttons.md +3 -0
  104. package/docs/widget-examples.md +162 -25
  105. package/examples/multi-html-widget/extend.html +5 -0
  106. package/package.json +2 -2
  107. package/slate.md +161 -60
package/README.md CHANGED
@@ -99,6 +99,7 @@ format that can be used in RequireJS, Webpack, etc.
99
99
 
100
100
 
101
101
  ## Widget
102
+
102
103
  You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#widget-simple-example)
103
104
 
104
105
  A payment form where it is possible to enter card data/bank accounts and then receive a one-time
@@ -115,8 +116,8 @@ It is possible in real-time to monitor the actions of user with widget and get i
115
116
 
116
117
  You must create a container for the widget. Inside this tag, the widget will be initialized
117
118
 
118
-
119
119
  ### Initialization
120
+
120
121
  ```javascript
121
122
  var widget = new paydock.HtmlWidget('#widget', 'publicKey');
122
123
  widget.load();
@@ -133,7 +134,6 @@ widget.load();
133
134
 
134
135
  Then write only need 2 lines of code in js to initialize widget
135
136
 
136
-
137
137
  ### Full example
138
138
 
139
139
  ```html
@@ -159,19 +159,18 @@ Then write only need 2 lines of code in js to initialize widget
159
159
  </html>
160
160
  ```
161
161
 
162
-
163
162
  ## Widget advanced example
164
163
 
165
164
  ### Customization
166
165
 
167
166
  ```javascript
168
167
  widget.setStyles({
169
- background_color: 'rgb(0, 0, 0)',
170
- border_color: 'yellow',
171
- text_color: '#FFFFAA',
172
- button_color: 'rgba(255, 255, 255, 0.9)',
173
- font_size: '20px'
174
- });
168
+ background_color: 'rgb(0, 0, 0)',
169
+ border_color: 'yellow',
170
+ text_color: '#FFFFAA',
171
+ button_color: 'rgba(255, 255, 255, 0.9)',
172
+ font_size: '20px'
173
+ });
175
174
  ```
176
175
 
177
176
  This example shows how you can customize to your needs and design
@@ -180,9 +179,9 @@ This example shows how you can customize to your needs and design
180
179
 
181
180
  ```html
182
181
  <div id="widget"
183
- widget-style="text-color: #FFFFAA; border-color: #yellow"
184
- title="Payment form"
185
- finish-text="Payment resource was successfully accepted"></div>
182
+ widget-style="text-color: #FFFFAA; border-color: #yellow"
183
+ title="Payment form"
184
+ finish-text="Payment resource was successfully accepted"></div>
186
185
  ```
187
186
 
188
187
  This example shows how you can set style and texts from html
@@ -199,36 +198,174 @@ widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported
199
198
 
200
199
  This example shows how you can use a lot of other methods to settings your form
201
200
 
201
+ ### Error handling
202
+
203
+ ## Overview
204
+
205
+ Error events are emitted when an error occurs during widget operations. These events provide detailed information about the error, including its category, cause, and contextual details.
206
+
207
+ ## Error Event Structure
208
+
209
+ ### Base Properties
210
+
211
+ | Property | Type | Description |
212
+ |----------|------|-------------|
213
+ | `event` | `string` | Always set to `"error"` |
214
+ | `purpose` | `string` | Indicates the purpose of the action that triggered the error event (e.g., `"payment_source"`) |
215
+ | `message_source` | `string` | Source of the message (e.g., `"widget.paydock"`) |
216
+ | `ref_id` | `string` | Reference ID for the operation |
217
+ | `widget_id` | `string` | Unique identifier of the widget instance |
218
+ | `error` | `object` | Error object containing error information |
219
+
220
+ ### Error Object Properties
221
+
222
+ The `error` object contains detailed information about the error:
223
+
224
+ | Property | Type | Description |
225
+ |----------|------|-------------|
226
+ | `category` | `string` | High-level error classification |
227
+ | `cause` | `string` | Specific error cause |
228
+ | `retryable` | `boolean` | Indicates if the operation can be retried |
229
+ | `details` | `object` | Additional error context |
230
+
231
+ ## Error Categories
232
+
233
+ | Category | Description |
234
+ |----------|-------------|
235
+ | `configuration` | Configuration-related errors |
236
+ | `identity_access_management` | Authentication and authorization errors |
237
+ | `internal` | Internal system errors |
238
+ | `process` | Process and operation errors |
239
+ | `resource` | Resource-related errors |
240
+ | `validation` | Input validation errors |
241
+
242
+ ## Error Causes
243
+
244
+ | Cause | Category | Description |
245
+ |-------|----------|-------------|
246
+ | `aborted` | `process` | Operation was aborted |
247
+ | `access_forbidden` | `identity` | Access to resource is forbidden |
248
+ | `already_exists` | `validation` | Resource already exists |
249
+ | `canceled` | `process` | Operation was canceled |
250
+ | `invalid_configuration` | `configuration` | Invalid widget configuration |
251
+ | `invalid_input` | `validation` | Invalid input provided |
252
+ | `not_found` | `resource` | Requested resource not found |
253
+ | `not_implemented` | `process` | Requested feature not implemented |
254
+ | `rate_limited` | `process` | Too many requests |
255
+ | `server_busy` | `process` | Server is too busy to handle request |
256
+ | `service_unreachable` | `process` | Unable to reach required service |
257
+ | `unauthorized` | `identity` | Authentication required |
258
+ | `unknown_error` | `internal` | Unexpected error occurred |
259
+ | `unprocessable_entity` | `validation` | Valid input but cannot be processed |
260
+
261
+ ## Error Details Object
262
+
263
+ | Property | Type | Description |
264
+ |----------|------|-------------|
265
+ | `cause` | `string` | Matches the top-level error cause |
266
+ | `contextId` | `string` | Context identifier (usually matches widget_id) |
267
+ | `message` | `string` | Human-readable error message |
268
+ | `timestamp` | `string` | ISO 8601 timestamp of when the error occurred |
269
+
270
+ ## Example
271
+
272
+ ```javascript
273
+ widget.hideUiErrors(); // hide default UI errors and handle errors by listening to error events with widget.on('error')
274
+
275
+ widget.on('error', (error) => {
276
+ console.log(error);
277
+ // {
278
+ // "event": "error",
279
+ // "purpose": "payment_source",
280
+ // "message_source": "widget.paydock",
281
+ // "ref_id": "",
282
+ // "widget_id": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
283
+ // "error": {
284
+ // "category": "process",
285
+ // "cause": "service_unreachable",
286
+ // "details": {
287
+ // "cause": "service_unreachable",
288
+ // "contextId": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
289
+ // "message": "The service is not availabe",
290
+ // "timestamp": "2025-02-13T09:30:21.157Z"
291
+ // },
292
+ // "retryable": false
293
+ // }
294
+ // }
295
+ });
296
+ ```
297
+
298
+ ## Handling Errors (Tips)
299
+
300
+ When handling errors, consider:
301
+
302
+ 1. Check the `retryable` flag to determine if the operation can be retried
303
+ 2. Use the `category` for high-level error handling logic
304
+ 3. Use the `cause` for specific error handling cases
305
+ 4. The `contextId` can be used for error tracking and debugging
306
+ 5. The `timestamp` helps with error logging and debugging
307
+
202
308
  ### Full example
203
309
 
204
310
  ```html
205
311
  <!DOCTYPE html>
206
312
  <html lang="en">
207
313
  <head>
208
- <meta charset="UTF-8">
209
- <title>Title</title>
210
- <style>iframe {border: 0;width: 100%;height: 400px;}</style>
314
+ <meta charset="UTF-8">
315
+ <title>Title</title>
316
+ <style>iframe {border: 0;width: 100%;height: 400px;}</style>
211
317
  </head>
212
318
  <body>
213
319
  <form id="paymentForm">
214
320
  <div id="widget"
215
321
  widget-style="text-color: #FFFFAA; border-color: #yellow"
216
322
  title="Payment form"
217
- finish-text="Payment resource was successfully accepted"></div>
323
+ finish-text="Payment resource was successfully accepted">
324
+ </div>
325
+
326
+ <div
327
+ id="error"
328
+ style="
329
+ display: none;
330
+ max-width: 600px;
331
+ margin: 16px auto;
332
+ padding: 16px 20px;
333
+ border-radius: 8px;
334
+ background-color: #FEF2F2;
335
+ border: 1px solid #FEE2E2;
336
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
337
+ font-family: system-ui, -apple-system, sans-serif;
338
+ color: #991B1B;
339
+ line-height: 1.5;
340
+ font-size: 14px;
341
+ "
342
+ title="error"
343
+ >
344
+ <div style="display: flex; align-items: flex-start; gap: 12px;">
345
+ <div>
346
+ <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Access Error</h4>
347
+ <div id="error-message"></div>
348
+ </div>
349
+ </div>
350
+ </div>
218
351
  </form>
219
352
 
220
353
  <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
221
354
  <script>
222
- var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
355
+ var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
223
356
 
224
- widget.setSupportedCardIcons(['mastercard', 'visa']);
225
- widget.setFormFields(['phone', 'email']);
226
- widget.setRefId('custom-ref-id');
227
- widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
357
+ widget.setSupportedCardIcons(['mastercard', 'visa']);
358
+ widget.setFormFields(['phone', 'email']);
359
+ widget.setRefId('custom-ref-id');
360
+ widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');
228
361
 
229
- widget.load();
230
- </script>
362
+ widget.on('error', ({ error }) => {
363
+ document.getElementById('error-message').textContent = error.details.message;
364
+ document.getElementById('error').style.display = 'block';
365
+ });
366
+ widget.load();
231
367
  </script>
368
+
232
369
  </body>
233
370
  </html>
234
371
  ```
@@ -250,6 +387,14 @@ This example shows how you can use a lot of other methods to settings your form
250
387
  </dd>
251
388
  </dl>
252
389
 
390
+ ## Members
391
+
392
+ <dl>
393
+ <dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
394
+ <dd><p>Purposes</p>
395
+ </dd>
396
+ </dl>
397
+
253
398
  ## Constants
254
399
 
255
400
  <dl>
@@ -262,9 +407,6 @@ This example shows how you can use a lot of other methods to settings your form
262
407
  <dt><a href="#user-content-w_PAYMENT_TYPE">PAYMENT_TYPE</a> : <code>object</code></dt>
263
408
  <dd><p>List of available payment source types</p>
264
409
  </dd>
265
- <dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
266
- <dd><p>Purposes</p>
267
- </dd>
268
410
  <dt><a href="#user-content-w_FORM_FIELD">FORM_FIELD</a> : <code>object</code></dt>
269
411
  <dd><p>Current constant include available type of fields which can be included to widget</p>
270
412
  </dd>
@@ -656,6 +798,7 @@ Class Widget include method for working on html and include extended by HtmlMult
656
798
  * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
657
799
  * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
658
800
  * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
801
+ * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
659
802
  * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
660
803
  * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
661
804
  * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -1287,6 +1430,18 @@ Current method can set icons of supported card types
1287
1430
  ```javascript
1288
1431
  widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
1289
1432
  ```
1433
+ <a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
1434
+
1435
+ ### htmlWidget.hideUiErrors()
1436
+ Current method can hide prevent the widget from showing the error messages
1437
+
1438
+ **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)
1439
+ **Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)
1440
+ **Example**
1441
+
1442
+ ```javascript
1443
+ widget.hideUiErrors('id');
1444
+ ```
1290
1445
  <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
1291
1446
 
1292
1447
  ### htmlWidget.setEnv(env, [alias])
@@ -1381,6 +1536,7 @@ Class HtmlMultiWidget include method for working with html
1381
1536
  * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
1382
1537
  * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
1383
1538
  * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
1539
+ * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
1384
1540
  * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
1385
1541
  * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
1386
1542
  * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -1913,6 +2069,18 @@ Current method can set icons of supported card types
1913
2069
  ```javascript
1914
2070
  widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
1915
2071
  ```
2072
+ <a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
2073
+
2074
+ ### htmlMultiWidget.hideUiErrors()
2075
+ Current method can hide prevent the widget from showing the error messages
2076
+
2077
+ **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)
2078
+ **Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)
2079
+ **Example**
2080
+
2081
+ ```javascript
2082
+ widget.hideUiErrors('id');
2083
+ ```
1916
2084
  <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
1917
2085
 
1918
2086
  ### htmlMultiWidget.setEnv(env, [alias])
@@ -2166,6 +2334,7 @@ Class MultiWidget include method for for creating iframe url
2166
2334
  * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
2167
2335
  * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
2168
2336
  * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
2337
+ * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
2169
2338
  * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
2170
2339
  * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
2171
2340
  * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -2453,6 +2622,17 @@ Current method can set icons of supported card types
2453
2622
  ```javascript
2454
2623
  widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
2455
2624
  ```
2625
+ <a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
2626
+
2627
+ ### multiWidget.hideUiErrors()
2628
+ Current method can hide prevent the widget from showing the error messages
2629
+
2630
+ **Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)
2631
+ **Example**
2632
+
2633
+ ```javascript
2634
+ widget.hideUiErrors('id');
2635
+ ```
2456
2636
  <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
2457
2637
 
2458
2638
  ### multiWidget.setEnv(env, [alias])
@@ -2502,6 +2682,19 @@ Method for setting a custom language code
2502
2682
  ```javascript
2503
2683
  config.setLanguage('en');
2504
2684
  ```
2685
+ <a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
2686
+
2687
+ ## PURPOSE : <code>object</code>
2688
+ Purposes
2689
+
2690
+ **Kind**: global variable
2691
+
2692
+ | Param | Type | Default |
2693
+ | --- | --- | --- |
2694
+ | PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> |
2695
+ | CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> |
2696
+ | CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> |
2697
+
2505
2698
  <a name="w_EVENT" id="w_EVENT" href="#user-content-w_EVENT">&nbsp;</a>
2506
2699
 
2507
2700
  ## EVENT : <code>object</code>
@@ -2551,19 +2744,6 @@ List of available payment source types
2551
2744
  | BANK_ACCOUNT | <code>string</code> | <code>&quot;bank_account&quot;</code> |
2552
2745
  | CHECKOUT | <code>string</code> | <code>&quot;checkout&quot;</code> |
2553
2746
 
2554
- <a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
2555
-
2556
- ## PURPOSE : <code>object</code>
2557
- Purposes
2558
-
2559
- **Kind**: global constant
2560
-
2561
- | Param | Type | Default |
2562
- | --- | --- | --- |
2563
- | PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> |
2564
- | CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> |
2565
- | CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> |
2566
-
2567
2747
  <a name="w_FORM_FIELD" id="w_FORM_FIELD" href="#user-content-w_FORM_FIELD">&nbsp;</a>
2568
2748
 
2569
2749
  ## FORM\_FIELD : <code>object</code>
@@ -5575,7 +5755,7 @@ _(Required `meta` fields: - . Optional `meta` fields: -)_
5575
5755
  },
5576
5756
  );
5577
5757
  button.setEnv('sandbox');
5578
- button.onUnavailable(() => console.log("No wallet buttons available"));
5758
+ button.onUnavailable((data) => console.log("No wallet buttons available"));
5579
5759
  button.onPaymentSuccessful((data) => console.log("The payment was successful"));
5580
5760
  button.onPaymentError((data) => console.log("The payment was not successful"));
5581
5761
  button.onAuthTokensChanged((data) => console.log('Authentication tokens changed'));
@@ -5918,6 +6098,8 @@ Interface of data from an unavailable event.
5918
6098
  | Param | Type | Description |
5919
6099
  | --- | --- | --- |
5920
6100
  | [wallet] | <code>string</code> | For gateways with more than one wallet button available (e.g: MPGS with ApplePay and GooglePay). Possible values for wallet are 'apple' or 'google'. |
6101
+ | [type] | <code>string</code> | Event Code. Value can be 'create_order_id_error' on FlypayV2 order creation failure. Optional for [Flypay V2]. N/A for other wallets. |
6102
+ | [error_code] | <code>string</code> | Event Error Code. Value can be any error code return from Paydock's API. Optional for [Flypay V2]. N/A for other wallets. + |
5921
6103
 
5922
6104
  <a name="IWalletUpdateData" id="IWalletUpdateData" href="#IWalletUpdateData">&nbsp;</a>
5923
6105
 
@@ -5942,6 +6124,7 @@ Interface of data used by the wallet checkout and payment proccess.
5942
6124
  | [amount_label] | <code>string</code> | Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, Flypay V2, PayPal, Afterpay]. |
5943
6125
  | [country] | <code>string</code> | Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay, Afterpay]. N/A for [FlyPay, Flypay V2, PayPal]. |
5944
6126
  | [pay_later] | <code>boolean</code> | Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets. |
6127
+ | [hide_message] | <code>boolean</code> | Used to hide Pay Later message in PayPal Smart Checkout WalletButton integration. Optional for [PayPal]. N/A for other wallets. |
5945
6128
  | [standalone] | <code>boolean</code> | Used to enable Standalone Buttons feature in PayPal Smart Checkout WalletButton integration. Used together with `pay_later`. Optional for [PayPal]. N/A for other wallets. |
5946
6129
  | [show_billing_address] | <code>boolean</code> | Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets. |
5947
6130
  | [request_payer_name] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
@@ -6471,7 +6654,7 @@ A full description of the meta parameters for [ApplePayWalletButtonExpress](#App
6471
6654
  }
6472
6655
  );
6473
6656
 
6474
- button.setEnv(sandbox);
6657
+ button.setEnv('sandbox');
6475
6658
 
6476
6659
  button.onUnavailable(function() {
6477
6660
  console.log("Button not available");
@@ -6721,6 +6904,7 @@ For in-depth information, please refer to the [Paypal documentation](https://dev
6721
6904
  | amount | <code>number</code> | Total amount of the transaction. Represents the money to be charged. |
6722
6905
  | currency | <code>string</code> | Currency of the transaction in ISO 4217 currency code format. |
6723
6906
  | [pay_later] | <code>boolean</code> | Flag to enable Pay Later feature of PayPal, allowing Pay in 4. Default false. |
6907
+ | [hide_message] | <code>boolean</code> | Used to hide Pay Later message in PayPal Smart Checkout WalletButton integration. Optional for [PayPal]. N/A for other wallets. |
6724
6908
  | [standalone] | <code>boolean</code> | Flag to specify if the PayPal standalone button should be used. Default false. |
6725
6909
  | [capture] | <code>boolean</code> | Flag to specify if the transaction amount should be captured immediately or authorized for later capture. Default false. |
6726
6910
  | [style] | <code>object</code> | Styling configurations for the PayPal widget. |
@@ -7627,42 +7811,6 @@ src.setStyles({
7627
7811
  });
7628
7812
  ```
7629
7813
 
7630
- ## Recognition token
7631
-
7632
- In order to store user information for further payments, click to pay provides a recognition token that is used to load user information.
7633
- If you already have a recognitionToken stored, you can use it in meta to load the user information.
7634
-
7635
- ### Storage suggestions
7636
- Merchant can store the tokens by dropping the token as a 1st party cookie in the browser, and must ensure to manage all the security aspects around dropping/storing the cookie by following the security standards:
7637
-
7638
- - `Expiration Date=` cookie should be set to expire at a max 180 days
7639
- - `Secure` flag
7640
- - `httpOnly` flag
7641
- - `sameSite=` strict
7642
- - `Value=` recognition token JWT
7643
-
7644
- ### Example code
7645
-
7646
- ```javascript
7647
- var src = new paydock.ClickToPay(
7648
- "#checkoutIframe",
7649
- "service_id",
7650
- "paydock_public_key",
7651
- {
7652
- "recognition_token": "eyJraWQiOiIy...",
7653
- },
7654
- );
7655
- src.on('recognitionTokenRequested', (data) => {
7656
- console.log('Recognition token was found: ' + data.data.recognitionToken);
7657
- // Add recognition token to your store
7658
- });
7659
-
7660
- src.on('recognitionTokenDropped', () => {
7661
- console.log('Recognition token was droped');
7662
- // Delete recognition token from your store
7663
- });
7664
- ```
7665
-
7666
7814
  ## Classes
7667
7815
 
7668
7816
  <dl>
@@ -7743,7 +7891,6 @@ Interface of data used for the Mastercard Checkout. For further information refe
7743
7891
  | [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
7744
7892
  | [customer.phone.phone] | <code>string</code> | Customer phone number. |
7745
7893
  | [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |
7746
- | [recognition_token] | <code>string</code> | Used for Click to Pay to load user information and preferences. |
7747
7894
 
7748
7895
  <a name="EventData" id="EventData" href="#EventData">&nbsp;</a>
7749
7896
 
@@ -7769,6 +7916,7 @@ When the flow type is src, masked checkoutData available is also returned
7769
7916
  | --- | --- | --- |
7770
7917
  | type | <code>string</code> | type of the checkout, can be `src` or `manual`. |
7771
7918
  | token | <code>string</code> | one time token value. |
7919
+ | token_type | <code>string</code> | one time token type value, can be `card` or `card_scheme_token`. |
7772
7920
  | [checkoutData] | <code>object</code> | Optional checkout data related to the checkout information. Only available on src flow. |
7773
7921
  | [checkoutData.card_number_bin] | <code>string</code> | The BIN of the card used for the transaction. |
7774
7922
  | [checkoutData.card_number_last4] | <code>string</code> | The last four digits of the card number. |
@@ -7986,8 +8134,6 @@ List of available event's name in the Click To Pay checkout lifecycle
7986
8134
  | CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>&quot;checkoutPopupClose&quot;</code> | Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode. |
7987
8135
  | CHECKOUT_COMPLETED | <code>string</code> | <code>&quot;checkoutCompleted&quot;</code> | Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information. |
7988
8136
  | CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> | Event sent on error checkout by customer. Check [data](#EventData) for more information. |
7989
- | RECOGNITION_TOKEN_REQUESTED | <code>string</code> | <code>&quot;recognitionTokenRequested&quot;</code> | Event sent when a recognition token was found on the mastercard SDK response. |
7990
- | RECOGNITION_TOKEN_DROPPED | <code>string</code> | <code>&quot;recognitionTokenDropped&quot;</code> | Event sent when a recognition token needs to be dropped for user be no longer remembered. |
7991
8137
 
7992
8138
  <a name="EVENT_DATA_TYPE" id="EVENT_DATA_TYPE" href="#EVENT_DATA_TYPE">&nbsp;</a>
7993
8139
 
@@ -8003,5 +8149,536 @@ List of available event data types
8003
8149
  | SUCCESS | <code>string</code> | <code>&quot;Success&quot;</code> | |
8004
8150
 
8005
8151
 
8152
+ ## PayPalSavePaymentSource Widget
8153
+
8154
+ PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.
8155
+
8156
+ The general flow to use the widgets is:
8157
+ 1. Configure your PayPal gateway and connect it using Paydock API or Dashboard.
8158
+ 2. Create a container in your site
8159
+ ```html
8160
+ <div id="widget"></div>
8161
+ ```
8162
+ 3. Initialize the specific `PayPalSavePaymentSourceWidget`, providing your Access token or Public Key, the Gateway ID that Paydock provides plus required and optional config parameter for the widget in use. The general format is:
8163
+ ```js
8164
+ new paydock.PayPalSavePaymentSourceWidget(
8165
+ "#widget",
8166
+ accessTokenOrPublicKey,
8167
+ gatewayId,
8168
+ widgetSpecificConfig,
8169
+ );
8170
+ ```
8171
+ 4. Handle the `onSuccess`, `onError` and `onCancel` for paypal setup token results.
8172
+ 5. If `onSuccess` event is emmited, event data should contain `token` and `email` ready to use.
8173
+
8174
+ ### Example
8175
+
8176
+ A full description of the config parameters for [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget) meta parameters can be found [here](#PayPalSavePaymentSourceWidgetConfig). Below you will find a fully working html example.
8177
+
8178
+ ```html
8179
+ <!DOCTYPE html>
8180
+ <html lang="en">
8181
+ <head>
8182
+ <meta charset="UTF-8">
8183
+ <title>Title</title>
8184
+ </head>
8185
+ <body>
8186
+ <h2>Using PayDock PayPalSavePaymentSourceWidget!</h2>
8187
+ <div id="widget"></div>
8188
+ </body>
8189
+ <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
8190
+ <script>
8191
+ let button = new paydock.PayPalSavePaymentSourceWidget(
8192
+ "#widget",
8193
+ accessTokenOrPublicKey,
8194
+ gatewayId,
8195
+ {
8196
+ style: {
8197
+ layout: 'vertical',
8198
+ color: 'gold',
8199
+ shape: 'pill',
8200
+ label: 'paypal'
8201
+ }
8202
+ }
8203
+ );
8204
+
8205
+ payPalSavePaymentSourceWidget.onSuccess((data) => console.log('On success: ', data));
8206
+ payPalSavePaymentSourceWidget.onError((data) => console.log('On error: ', data));
8207
+ payPalSavePaymentSourceWidget.onCancel(() => console.log('On cancelled'));
8208
+
8209
+ button.setEnv('sandbox');
8210
+
8211
+ button.load();
8212
+ </script>
8213
+ </html>
8214
+ ```
8215
+
8216
+ ## Classes
8217
+
8218
+ <dl>
8219
+ <dt><a href="#PayPalSavePaymentSourceWidget">PayPalSavePaymentSourceWidget</a></dt>
8220
+ <dd><p>PayPal Save Payment Source Widget constructor</p>
8221
+ </dd>
8222
+ </dl>
8223
+
8224
+ ## Typedefs
8225
+
8226
+ <dl>
8227
+ <dt><a href="#OnSuccessCallback">OnSuccessCallback</a> : <code>function</code></dt>
8228
+ <dd><p>Callback for onSuccess method.</p>
8229
+ </dd>
8230
+ <dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
8231
+ <dd><p>Callback for onError method.</p>
8232
+ </dd>
8233
+ <dt><a href="#OnCancelCallback">OnCancelCallback</a> : <code>function</code></dt>
8234
+ <dd><p>Callback for onCancel method.</p>
8235
+ </dd>
8236
+ </dl>
8237
+
8238
+ ## Interfaces
8239
+
8240
+ <dl>
8241
+ <dt><a href="#PayPalSavePaymentSourceWidgetConfig">PayPalSavePaymentSourceWidgetConfig</a> : <code>object</code></dt>
8242
+ <dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
8243
+ </dd>
8244
+ <dt><a href="#ErrorCodes">ErrorCodes</a> : <code>object</code></dt>
8245
+ <dd><p>Interface of possible error codes inside onError event data.</p>
8246
+ </dd>
8247
+ <dt><a href="#IOnSuccessEventData">IOnSuccessEventData</a> : <code>object</code></dt>
8248
+ <dd><p>Interface for IOnSuccessEventData</p>
8249
+ </dd>
8250
+ <dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
8251
+ <dd><p>Interface for IOnErrorEventData</p>
8252
+ </dd>
8253
+ <dt><a href="#IOnCancelEventData">IOnCancelEventData</a> : <code>object</code></dt>
8254
+ <dd><p>Interface for IOnCancelEventData</p>
8255
+ </dd>
8256
+ </dl>
8257
+
8258
+ <a name="PayPalSavePaymentSourceWidgetConfig" id="PayPalSavePaymentSourceWidgetConfig" href="#PayPalSavePaymentSourceWidgetConfig">&nbsp;</a>
8259
+
8260
+ ## PayPalSavePaymentSourceWidgetConfig : <code>object</code>
8261
+ Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
8262
+
8263
+ **Kind**: global interface
8264
+
8265
+ | Param | Type | Description |
8266
+ | --- | --- | --- |
8267
+ | [style.layout] | <code>&#x27;vertical&#x27;</code> \| <code>&#x27;horizontal&#x27;</code> | Used for indicating the PayPal Button layout. |
8268
+ | [style.color] | <code>&#x27;blue&#x27;</code> \| <code>&#x27;gold&#x27;</code> \| <code>&#x27;silver&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the main color of the PayPal Button. |
8269
+ | [style.shape] | <code>&#x27;rect&#x27;</code> \| <code>&#x27;sharp&#x27;</code> \| <code>&#x27;pill&#x27;</code> | Used for indicating the shape of the PayPal Button. |
8270
+ | [style.label] | <code>&#x27;paypal&#x27;</code> \| <code>&#x27;checkout&#x27;</code> \| <code>&#x27;buynow&#x27;</code> \| <code>&#x27;pay&#x27;</code> | Used for indicating the label of the PayPal Button. |
8271
+ | [style.disableMaxWidth] | <code>boolean</code> | Used for indicating if the max width will be disabled. |
8272
+ | [style.disableMaxHeight] | <code>boolean</code> | Used for indicating the max height will be disabled. |
8273
+ | [style.height] | <code>number</code> | Used for indicating the height of the PayPal Button, if disableMaxHeight is true. |
8274
+ | [style.borderRadius] | <code>number</code> | Used for indicating the border radius of the PayPal Button. |
8275
+ | [style.tagline] | <code>boolean</code> | Used for indicating the tagline of the PayPal Button. |
8276
+ | [message.amount] | <code>number</code> | Used for indicating an amount before the payment. |
8277
+ | [message.align] | <code>&#x27;center&#x27;</code> \| <code>&#x27;left&#x27;</code> \| <code>&#x27;right&#x27;</code> | Used for indicating the align of the message. |
8278
+ | [message.color] | <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the color of the message. |
8279
+ | [message.position] | <code>&#x27;top&#x27;</code> \| <code>&#x27;bottom&#x27;</code> | Used for indicating the position of the message. |
8280
+
8281
+ <a name="ErrorCodes" id="ErrorCodes" href="#ErrorCodes">&nbsp;</a>
8282
+
8283
+ ## ErrorCodes : <code>object</code>
8284
+ Interface of possible error codes inside onError event data.
8285
+
8286
+ **Kind**: global interface
8287
+
8288
+ | Param | Type | Description |
8289
+ | --- | --- | --- |
8290
+ | [unavailable] | <code>string</code> | Error code when an error occurs loading the widget. |
8291
+ | [onPaypalVaultSetupTokenError] | <code>string</code> | Error code when an error occrus on PayPal side. |
8292
+ | [onGetIdTokenError] | <code>string</code> | Error code when trying to get ID token from PayPal. |
8293
+ | [onGetWalletConfigError] | <code>string</code> | Error code when trying to get wallet config from Paydock. |
8294
+ | [onGetSetupTokenError] | <code>string</code> | Error code when trying to get the setup token from PayPal. |
8295
+ | [onOneTimeTokenError] | <code>string</code> | Error code when trying to get the one time token from Paydock. |
8296
+
8297
+ <a name="IOnSuccessEventData" id="IOnSuccessEventData" href="#IOnSuccessEventData">&nbsp;</a>
8298
+
8299
+ ## IOnSuccessEventData : <code>object</code>
8300
+ Interface for IOnSuccessEventData
8301
+
8302
+ **Kind**: global interface
8303
+
8304
+ | Param | Type | Description |
8305
+ | --- | --- | --- |
8306
+ | event | <code>EVENTS</code> | Event Name is 'ON_SUCCESS' |
8307
+ | data | <code>object</code> | Data object |
8308
+ | data.token | <code>string</code> | One Time Token to be exchanged for a Paydock Customer. |
8309
+ | [data.email] | <code>string</code> | Paypal account customer email if retrieved from Paypal servers. |
8310
+
8311
+ <a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
8312
+
8313
+ ## IOnErrorEventData : <code>object</code>
8314
+ Interface for IOnErrorEventData
8315
+
8316
+ **Kind**: global interface
8317
+
8318
+ | Param | Type | Description |
8319
+ | --- | --- | --- |
8320
+ | event | <code>EVENTS</code> | Event Name is 'ON_ERROR' |
8321
+ | data | <code>object</code> | Error data object |
8322
+ | data.error_code | [<code>ErrorCodes</code>](#ErrorCodes) | Error code. One of ErrorCodes. |
8323
+ | [data.details] | <code>string</code> | Error details. |
8324
+ | [data.message] | <code>string</code> | Error message. |
8325
+
8326
+ <a name="IOnCancelEventData" id="IOnCancelEventData" href="#IOnCancelEventData">&nbsp;</a>
8327
+
8328
+ ## IOnCancelEventData : <code>object</code>
8329
+ Interface for IOnCancelEventData
8330
+
8331
+ **Kind**: global interface
8332
+
8333
+ | Param | Type | Description |
8334
+ | --- | --- | --- |
8335
+ | event | <code>EVENTS</code> | Event Name is 'ON_CANCEL' |
8336
+
8337
+ <a name="PayPalSavePaymentSourceWidget" id="PayPalSavePaymentSourceWidget" href="#PayPalSavePaymentSourceWidget">&nbsp;</a>
8338
+
8339
+ ## PayPalSavePaymentSourceWidget
8340
+ PayPal Save Payment Source Widget constructor
8341
+
8342
+ **Kind**: global class
8343
+
8344
+ * [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget)
8345
+ * [new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)](#new_PayPalSavePaymentSourceWidget_new)
8346
+ * [.load()](#PayPalSavePaymentSourceWidget+load)
8347
+ * [.setEnv(env, [alias])](#PayPalSavePaymentSourceWidget+setEnv)
8348
+ * [.onSuccess([callback])](#PayPalSavePaymentSourceWidget+onSuccess)
8349
+ * [.onError([callback])](#PayPalSavePaymentSourceWidget+onError)
8350
+ * [.onCancel([callback])](#PayPalSavePaymentSourceWidget+onCancel)
8351
+
8352
+ <a name="new_PayPalSavePaymentSourceWidget_new" id="new_PayPalSavePaymentSourceWidget_new" href="#new_PayPalSavePaymentSourceWidget_new">&nbsp;</a>
8353
+
8354
+ ### new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)
8355
+
8356
+ | Param | Type | Description |
8357
+ | --- | --- | --- |
8358
+ | selector | <code>string</code> | Selector of html element. Container for PayPal Save Payment Source Widget. |
8359
+ | publicKey | <code>string</code> | PayDock users public key. |
8360
+ | gatewayId | <code>string</code> | PayDock's PayPal gatewayId. |
8361
+ | config | [<code>PayPalSavePaymentSourceWidgetConfig</code>](#PayPalSavePaymentSourceWidgetConfig) | Extra configuration for the widget, like styles. |
8362
+
8363
+ **Example**
8364
+ ```js
8365
+ var payPalSavePaymentSourceWidget = new PayPalSavePaymentSourceWidget('#paypalButton', 'public_key', 'gateway_id');
8366
+ ```
8367
+ <a name="PayPalSavePaymentSourceWidget+load" id="PayPalSavePaymentSourceWidget+load" href="#PayPalSavePaymentSourceWidget+load">&nbsp;</a>
8368
+
8369
+ ### payPalSavePaymentSourceWidget.load()
8370
+ The final method after configuring the PayPalSavePaymentSource Widget to
8371
+ start the load process.
8372
+
8373
+ **Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
8374
+ <a name="PayPalSavePaymentSourceWidget+setEnv" id="PayPalSavePaymentSourceWidget+setEnv" href="#PayPalSavePaymentSourceWidget+setEnv">&nbsp;</a>
8375
+
8376
+ ### payPalSavePaymentSourceWidget.setEnv(env, [alias])
8377
+ Current method can change environment. By default environment = sandbox.
8378
+ Also we can change domain alias for this environment. By default domain_alias = paydock.com
8379
+
8380
+ **Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
8381
+
8382
+ | Param | Type | Description |
8383
+ | --- | --- | --- |
8384
+ | env | <code>string</code> | sandbox, production |
8385
+ | [alias] | <code>string</code> | Own domain alias |
8386
+
8387
+ **Example**
8388
+ ```js
8389
+ payPalSavePaymentSourceWidget.setEnv('production');
8390
+ ```
8391
+ <a name="PayPalSavePaymentSourceWidget+onSuccess" id="PayPalSavePaymentSourceWidget+onSuccess" href="#PayPalSavePaymentSourceWidget+onSuccess">&nbsp;</a>
8392
+
8393
+ ### payPalSavePaymentSourceWidget.onSuccess([callback])
8394
+ If the setup token was successfully approved and a OTT was generated, the function passed as parameter will be called.
8395
+ Important: Do not perform thread blocking operations in callback such as window.alert() calls.
8396
+
8397
+ **Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
8398
+
8399
+ | Param | Type | Description |
8400
+ | --- | --- | --- |
8401
+ | [callback] | [<code>OnSuccessCallback</code>](#OnSuccessCallback) | Function to be called when the result is successful. |
8402
+
8403
+ **Example**
8404
+ ```js
8405
+ payPalSavePaymentSourceWidget.onSuccess((eventData) => console.log('One time token and email obtained successfully'));
8406
+ ```
8407
+ <a name="PayPalSavePaymentSourceWidget+onError" id="PayPalSavePaymentSourceWidget+onError" href="#PayPalSavePaymentSourceWidget+onError">&nbsp;</a>
8408
+
8409
+ ### payPalSavePaymentSourceWidget.onError([callback])
8410
+ If in the process for obtaining the setup token fails, the function passed as parameter will be called.
8411
+ Important: Do not perform thread blocking operations in callback such as window.alert() calls.
8412
+
8413
+ **Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
8414
+
8415
+ | Param | Type | Description |
8416
+ | --- | --- | --- |
8417
+ | [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
8418
+
8419
+ **Example**
8420
+ ```js
8421
+ payPalSavePaymentSourceWidget.onError((eventData) => console.log('Some error occurred'));
8422
+ ```
8423
+ <a name="PayPalSavePaymentSourceWidget+onCancel" id="PayPalSavePaymentSourceWidget+onCancel" href="#PayPalSavePaymentSourceWidget+onCancel">&nbsp;</a>
8424
+
8425
+ ### payPalSavePaymentSourceWidget.onCancel([callback])
8426
+ If in the process for obtaining the setup token was cancelled, the function passed as parameter will be called.
8427
+ Important: Do not perform thread blocking operations in callback such as window.alert() calls.
8428
+
8429
+ **Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
8430
+
8431
+ | Param | Type | Description |
8432
+ | --- | --- | --- |
8433
+ | [callback] | [<code>OnCancelCallback</code>](#OnCancelCallback) | Function to be called when the operation is cancelled. |
8434
+
8435
+ **Example**
8436
+ ```js
8437
+ payPalSavePaymentSourceWidget.onCancel(() => console.log('Operation cancelled'));
8438
+ ```
8439
+ <a name="OnSuccessCallback" id="OnSuccessCallback" href="#OnSuccessCallback">&nbsp;</a>
8440
+
8441
+ ## OnSuccessCallback : <code>function</code>
8442
+ Callback for onSuccess method.
8443
+
8444
+ **Kind**: global typedef
8445
+
8446
+ | Param | Type |
8447
+ | --- | --- |
8448
+ | data | [<code>IOnSuccessEventData</code>](#IOnSuccessEventData) |
8449
+
8450
+ <a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
8451
+
8452
+ ## OnErrorCallback : <code>function</code>
8453
+ Callback for onError method.
8454
+
8455
+ **Kind**: global typedef
8456
+
8457
+ | Param | Type |
8458
+ | --- | --- |
8459
+ | data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) |
8460
+
8461
+ <a name="OnCancelCallback" id="OnCancelCallback" href="#OnCancelCallback">&nbsp;</a>
8462
+
8463
+ ## OnCancelCallback : <code>function</code>
8464
+ Callback for onCancel method.
8465
+
8466
+ **Kind**: global typedef
8467
+
8468
+ | Param | Type |
8469
+ | --- | --- |
8470
+ | data | [<code>IOnCancelEventData</code>](#IOnCancelEventData) |
8471
+
8472
+
8473
+ ## PayPalDataCollector Widget
8474
+
8475
+ Widget that collect browser-based data to help reduce fraud. Upon checkout, these data elements are sent directly to PayPal Risk Services for fraud and risk assessment.
8476
+
8477
+ The general flow to use the widgets is:
8478
+ 1. Initialize the PayPal Data Collector Widget, providing a Source Website Identifier (Flow ID), plus optional config parameters for the widget. The general format is:
8479
+ ```js
8480
+ vat paypalDataCollector = new paydock.PayPalDataCollector(
8481
+ sourceWebsiteIdentifier,
8482
+ widgetConfigParams,
8483
+ );
8484
+ ```
8485
+ 2. Handle the `collectDeviceData` function, that will return the generated correlation ID, like following:
8486
+ ```js
8487
+ const collectedDeviceData = await paypalDataCollector.collectDeviceData();
8488
+ const correlationId = collectedDeviceData.correlation_id;
8489
+ ```
8490
+ 3. Use freely the correlation_id value as is needed.
8491
+ 4. Handle the `onError` callback.
8492
+ 5. If you are using Content Security Policy (CSP), you must allowlist the paypal fraudnet script URL: `https://c.paypal.com`. See reference [here](https://developer.paypal.com/limited-release/fraudnet/integrate/#link-contentsecuritypolicyintegration).
8493
+
8494
+ ### PayPalDataCollector Widget example
8495
+
8496
+ A full description of the config parameters for [PayPalDataCollector](#PayPalDataCollector) meta parameters can be found [here](#PayPalDataCollectorConfig). Below you will find a fully working html example.
8497
+
8498
+ ```html
8499
+ <!DOCTYPE html>
8500
+ <html lang="en">
8501
+ <head>
8502
+ <meta charset="UTF-8">
8503
+ <title>Title</title>
8504
+ </head>
8505
+ <body>
8506
+ <h2>Using PayDock PayPalDataCollector Widget!</h2>
8507
+ <div id="widget"></div>
8508
+ </body>
8509
+ <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
8510
+ <script>
8511
+ let payPalDataCollector = new paydock.PayPalDataCollector(
8512
+ 'FLOW_ID',
8513
+ {
8514
+ mouse_movement: true
8515
+ }
8516
+ );
8517
+
8518
+ payPalDataCollector.setEnv('test');
8519
+
8520
+ payPalDataCollector.onError(function(error) {
8521
+ console.log("On Error Callback", error);
8522
+ });
8523
+
8524
+ payPalDataCollector.collectDeviceData().then(function(collectedDeviceData) {
8525
+ //Here when the promise is resolved, it should be able to see the correlation_id.
8526
+ const correlationId = collectedDeviceData.correlation_id;
8527
+ console.log("On Success", correlationId);
8528
+ });
8529
+ </script>
8530
+ </html>
8531
+ ```
8532
+
8533
+ ## Classes
8534
+
8535
+ <dl>
8536
+ <dt><a href="#PayPalDataCollector">PayPalDataCollector</a></dt>
8537
+ <dd><p>PayPal Data Collector Widget constructor</p>
8538
+ </dd>
8539
+ </dl>
8540
+
8541
+ ## Typedefs
8542
+
8543
+ <dl>
8544
+ <dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
8545
+ <dd><p>Callback for onError method.</p>
8546
+ </dd>
8547
+ </dl>
8548
+
8549
+ ## Interfaces
8550
+
8551
+ <dl>
8552
+ <dt><a href="#PayPalDataCollectorConfig">PayPalDataCollectorConfig</a> : <code>object</code></dt>
8553
+ <dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
8554
+ </dd>
8555
+ <dt><a href="#CollectedDeviceData">CollectedDeviceData</a> : <code>object</code></dt>
8556
+ <dd><p>Data object with the corresponding <code>correlation_id</code>.</p>
8557
+ </dd>
8558
+ <dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
8559
+ <dd><p>Interface for IOnErrorEventData</p>
8560
+ </dd>
8561
+ </dl>
8562
+
8563
+ <a name="PayPalDataCollectorConfig" id="PayPalDataCollectorConfig" href="#PayPalDataCollectorConfig">&nbsp;</a>
8564
+
8565
+ ## PayPalDataCollectorConfig : <code>object</code>
8566
+ Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
8567
+
8568
+ **Kind**: global interface
8569
+
8570
+ | Param | Type | Description |
8571
+ | --- | --- | --- |
8572
+ | [mouse_movement] | <code>boolean</code> | Used for indicating if is enabled mouse movement collection. |
8573
+
8574
+ <a name="CollectedDeviceData" id="CollectedDeviceData" href="#CollectedDeviceData">&nbsp;</a>
8575
+
8576
+ ## CollectedDeviceData : <code>object</code>
8577
+ Data object with the corresponding `correlation_id`.
8578
+
8579
+ **Kind**: global interface
8580
+
8581
+ | Param | Type | Description |
8582
+ | --- | --- | --- |
8583
+ | [correlation_id] | <code>string</code> | The correlation ID that was used on the subsecuent requests. |
8584
+
8585
+ <a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
8586
+
8587
+ ## IOnErrorEventData : <code>object</code>
8588
+ Interface for IOnErrorEventData
8589
+
8590
+ **Kind**: global interface
8591
+
8592
+ | Param | Type | Description |
8593
+ | --- | --- | --- |
8594
+ | error_code | <code>string</code> | Error code. One of 'promise_not_enabled' or 'script_error'. |
8595
+
8596
+ <a name="PayPalDataCollector" id="PayPalDataCollector" href="#PayPalDataCollector">&nbsp;</a>
8597
+
8598
+ ## PayPalDataCollector
8599
+ PayPal Data Collector Widget constructor
8600
+
8601
+ **Kind**: global class
8602
+
8603
+ * [PayPalDataCollector](#PayPalDataCollector)
8604
+ * [new PayPalDataCollector([flowId], [config])](#new_PayPalDataCollector_new)
8605
+ * [.collectDeviceData()](#PayPalDataCollector+collectDeviceData) ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
8606
+ * [.onError([callback])](#PayPalDataCollector+onError)
8607
+ * [.setEnv(env)](#PayPalDataCollector+setEnv)
8608
+
8609
+ <a name="new_PayPalDataCollector_new" id="new_PayPalDataCollector_new" href="#new_PayPalDataCollector_new">&nbsp;</a>
8610
+
8611
+ ### new PayPalDataCollector([flowId], [config])
8612
+
8613
+ | Param | Type | Description |
8614
+ | --- | --- | --- |
8615
+ | [flowId] | <code>string</code> | This string identifies the source website of the FraudNet request. |
8616
+ | [config] | [<code>PayPalDataCollectorConfig</code>](#PayPalDataCollectorConfig) | Extra configuration for the widget. |
8617
+
8618
+ **Example**
8619
+ ```js
8620
+ var payPalDataCollector = new PayPalDataCollector('FLOW_ID', {});
8621
+ ```
8622
+ <a name="PayPalDataCollector+collectDeviceData" id="PayPalDataCollector+collectDeviceData" href="#PayPalDataCollector+collectDeviceData">&nbsp;</a>
8623
+
8624
+ ### payPalDataCollector.collectDeviceData() ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
8625
+ After configuring the PayPalDataCollector Widget, starts the process and returns
8626
+ the correlation id used among the requests asynchronously.
8627
+
8628
+ **Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
8629
+ **Returns**: [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData) - Promise when resolved, returns an object
8630
+ that contains the `correlation_id` key.
8631
+ **Example**
8632
+ ```js
8633
+ const collectedDeviceData = await payPalDataCollectorWidget.collectDeviceData();
8634
+ console.log(collectedDeviceData.correlation_id)
8635
+ ```
8636
+ <a name="PayPalDataCollector+onError" id="PayPalDataCollector+onError" href="#PayPalDataCollector+onError">&nbsp;</a>
8637
+
8638
+ ### payPalDataCollector.onError([callback])
8639
+ If the process fails, the function passed as parameter will be called.
8640
+ Important: Do not perform thread blocking operations in callback such as window.alert() calls.
8641
+
8642
+ **Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
8643
+
8644
+ | Param | Type | Description |
8645
+ | --- | --- | --- |
8646
+ | [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
8647
+
8648
+ **Example**
8649
+ ```js
8650
+ PayPalDataCollector.onError((eventData) => console.log('Some error occur'));
8651
+ ```
8652
+ <a name="PayPalDataCollector+setEnv" id="PayPalDataCollector+setEnv" href="#PayPalDataCollector+setEnv">&nbsp;</a>
8653
+
8654
+ ### payPalDataCollector.setEnv(env)
8655
+ Current method can change environment. By default environment = test.
8656
+ This method does not affect Paydock's API calls or environments, is only for PayPal Data Collector
8657
+ script, in order to know if the script is injected on a live server or is a testing
8658
+ environment. The available values are `test` and `live`. This should match with the used
8659
+ `gateway.mode` in Paydock to process the transaction.
8660
+
8661
+ **Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
8662
+
8663
+ | Param | Type | Description |
8664
+ | --- | --- | --- |
8665
+ | env | <code>string</code> | test, live |
8666
+
8667
+ **Example**
8668
+ ```js
8669
+ PayPalDataCollector.setEnv('live');
8670
+ ```
8671
+ <a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
8672
+
8673
+ ## OnErrorCallback : <code>function</code>
8674
+ Callback for onError method.
8675
+
8676
+ **Kind**: global typedef
8677
+
8678
+ | Param | Type |
8679
+ | --- | --- |
8680
+ | data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) \| <code>null</code> |
8681
+
8682
+
8006
8683
  ## License
8007
8684
  Copyright (c) 2024 paydock