@paydock/client-sdk 1.115.0 → 1.116.2
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.
- package/README.md +531 -40
- package/bundles/index.cjs +515 -87
- package/bundles/index.cjs.d.ts +214 -1
- package/bundles/index.mjs +514 -88
- package/bundles/index.mjs.d.ts +214 -1
- package/bundles/types/api/api-charge-internal.d.ts +1 -0
- package/bundles/types/api/api-charge-internal.d.ts.map +1 -1
- package/bundles/types/checkout/instructions/v1/instruction.generic.show_message.d.ts.map +1 -1
- package/bundles/types/checkout/layout-widgets/payment-methods.d.ts +0 -1
- package/bundles/types/checkout/layout-widgets/payment-methods.d.ts.map +1 -1
- package/bundles/types/index-cba.d.ts +2 -0
- package/bundles/types/index-cba.d.ts.map +1 -1
- package/bundles/types/index.d.ts +2 -0
- package/bundles/types/index.d.ts.map +1 -1
- package/bundles/types/paypal-data-collector/index.d.ts +23 -0
- package/bundles/types/paypal-data-collector/index.d.ts.map +1 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.d.ts +58 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.d.ts.map +1 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.interfaces.d.ts +21 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.interfaces.d.ts.map +1 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.service.d.ts +17 -0
- package/bundles/types/paypal-data-collector/paypal-data-collector.service.d.ts.map +1 -0
- package/bundles/types/paypal-save-payment-source/index.d.ts +61 -0
- package/bundles/types/paypal-save-payment-source/index.d.ts.map +1 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.d.ts +85 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.d.ts.map +1 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.interfaces.d.ts +84 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.interfaces.d.ts.map +1 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.service.d.ts +36 -0
- package/bundles/types/paypal-save-payment-source/paypal-save-payment-source.service.d.ts.map +1 -0
- package/bundles/types/secure-remote-commerce/index.d.ts +0 -1
- package/bundles/types/secure-remote-commerce/index.d.ts.map +1 -1
- package/bundles/types/secure-remote-commerce/interfaces.d.ts +1 -5
- package/bundles/types/secure-remote-commerce/interfaces.d.ts.map +1 -1
- package/bundles/types/secure-remote-commerce/providers/mastercard-src/mastercard-src.d.ts.map +1 -1
- package/bundles/types/wallet-buttons-express/base.wallet-button-express.d.ts.map +1 -1
- package/bundles/types/wallet-buttons-express/interfaces/wallet-capture-request.interface.d.ts +1 -0
- package/bundles/types/wallet-buttons-express/interfaces/wallet-capture-request.interface.d.ts.map +1 -1
- package/bundles/types/wallet-buttons-express/services/apple-pay/apple-pay.wallet-button-express.d.ts.map +1 -1
- package/bundles/types/wallet-buttons-express/services/paypal/paypal.wallet-button-express.d.ts.map +1 -1
- package/bundles/widget.umd.js +515 -87
- package/bundles/widget.umd.js.d.ts +214 -1
- package/bundles/widget.umd.js.min.d.ts +214 -1
- package/bundles/widget.umd.min.js +7 -7
- package/docs/click-to-pay-examples.md +0 -36
- package/docs/click-to-pay.md +0 -3
- package/docs/paypal-data-collector-examples.md +58 -0
- package/docs/paypal-data-collector.md +149 -0
- package/docs/paypal-save-payment-source-examples.md +63 -0
- package/docs/paypal-save-payment-source.md +256 -0
- package/docs/wallet-buttons-express-examples.md +1 -1
- package/package.json +1 -1
- package/slate.md +0 -36
|
@@ -229,39 +229,3 @@ src.setStyles({
|
|
|
229
229
|
font_family: 'Arial',
|
|
230
230
|
});
|
|
231
231
|
```
|
|
232
|
-
|
|
233
|
-
## Recognition token
|
|
234
|
-
|
|
235
|
-
In order to store user information for further payments, click to pay provides a recognition token that is used to load user information.
|
|
236
|
-
If you already have a recognitionToken stored, you can use it in meta to load the user information.
|
|
237
|
-
|
|
238
|
-
### Storage suggestions
|
|
239
|
-
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:
|
|
240
|
-
|
|
241
|
-
- `Expiration Date=` cookie should be set to expire at a max 180 days
|
|
242
|
-
- `Secure` flag
|
|
243
|
-
- `httpOnly` flag
|
|
244
|
-
- `sameSite=` strict
|
|
245
|
-
- `Value=` recognition token JWT
|
|
246
|
-
|
|
247
|
-
### Example code
|
|
248
|
-
|
|
249
|
-
```javascript
|
|
250
|
-
var src = new paydock.ClickToPay(
|
|
251
|
-
"#checkoutIframe",
|
|
252
|
-
"service_id",
|
|
253
|
-
"paydock_public_key",
|
|
254
|
-
{
|
|
255
|
-
"recognition_token": "eyJraWQiOiIy...",
|
|
256
|
-
},
|
|
257
|
-
);
|
|
258
|
-
src.on('recognitionTokenRequested', (data) => {
|
|
259
|
-
console.log('Recognition token was found: ' + data.data.recognitionToken);
|
|
260
|
-
// Add recognition token to your store
|
|
261
|
-
});
|
|
262
|
-
|
|
263
|
-
src.on('recognitionTokenDropped', () => {
|
|
264
|
-
console.log('Recognition token was droped');
|
|
265
|
-
// Delete recognition token from your store
|
|
266
|
-
});
|
|
267
|
-
```
|
package/docs/click-to-pay.md
CHANGED
|
@@ -78,7 +78,6 @@ Interface of data used for the Mastercard Checkout. For further information refe
|
|
|
78
78
|
| [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
|
|
79
79
|
| [customer.phone.phone] | <code>string</code> | Customer phone number. |
|
|
80
80
|
| [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |
|
|
81
|
-
| [recognition_token] | <code>string</code> | Used for Click to Pay to load user information and preferences. |
|
|
82
81
|
|
|
83
82
|
<a name="EventData" id="EventData" href="#EventData"> </a>
|
|
84
83
|
|
|
@@ -321,8 +320,6 @@ List of available event's name in the Click To Pay checkout lifecycle
|
|
|
321
320
|
| CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>"checkoutPopupClose"</code> | Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode. |
|
|
322
321
|
| CHECKOUT_COMPLETED | <code>string</code> | <code>"checkoutCompleted"</code> | Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information. |
|
|
323
322
|
| CHECKOUT_ERROR | <code>string</code> | <code>"checkoutError"</code> | Event sent on error checkout by customer. Check [data](#EventData) for more information. |
|
|
324
|
-
| RECOGNITION_TOKEN_REQUESTED | <code>string</code> | <code>"recognitionTokenRequested"</code> | Event sent when a recognition token was found on the mastercard SDK response. |
|
|
325
|
-
| RECOGNITION_TOKEN_DROPPED | <code>string</code> | <code>"recognitionTokenDropped"</code> | Event sent when a recognition token needs to be dropped for user be no longer remembered. |
|
|
326
323
|
|
|
327
324
|
<a name="EVENT_DATA_TYPE" id="EVENT_DATA_TYPE" href="#EVENT_DATA_TYPE"> </a>
|
|
328
325
|
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
## PayPalDataCollector Widget
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
The general flow to use the widgets is:
|
|
6
|
+
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:
|
|
7
|
+
```js
|
|
8
|
+
vat paypalDataCollector = new paydock.PayPalDataCollector(
|
|
9
|
+
sourceWebsiteIdentifier,
|
|
10
|
+
widgetConfigParams,
|
|
11
|
+
);
|
|
12
|
+
```
|
|
13
|
+
2. Handle the `collectDeviceData` function, that will return the generated correlation ID, like following:
|
|
14
|
+
```js
|
|
15
|
+
const collectedDeviceData = await paypalDataCollector.collectDeviceData();
|
|
16
|
+
const correlationId = collectedDeviceData.correlation_id;
|
|
17
|
+
```
|
|
18
|
+
3. Use freely the correlation_id value as is needed.
|
|
19
|
+
4. Handle the `onError` callback.
|
|
20
|
+
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).
|
|
21
|
+
|
|
22
|
+
### PayPalDataCollector Widget example
|
|
23
|
+
|
|
24
|
+
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.
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<!DOCTYPE html>
|
|
28
|
+
<html lang="en">
|
|
29
|
+
<head>
|
|
30
|
+
<meta charset="UTF-8">
|
|
31
|
+
<title>Title</title>
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
<h2>Using PayDock PayPalDataCollector Widget!</h2>
|
|
35
|
+
<div id="widget"></div>
|
|
36
|
+
</body>
|
|
37
|
+
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
|
|
38
|
+
<script>
|
|
39
|
+
let payPalDataCollector = new paydock.PayPalDataCollector(
|
|
40
|
+
sourceWebsiteIdentifier,
|
|
41
|
+
{
|
|
42
|
+
mouse_movement: true
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
payPalDataCollector.setEnv('test');
|
|
47
|
+
|
|
48
|
+
payPalDataCollector.onError(function(error) {
|
|
49
|
+
console.log("On Error Callback", error);
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const collectedDeviceData = await payPalDataCollector.collectDeviceData();
|
|
53
|
+
|
|
54
|
+
//Here when the promise is resolved, it should be able to see the correlation_id.
|
|
55
|
+
const correlationId = collectedDeviceData.correlation_id
|
|
56
|
+
</script>
|
|
57
|
+
</html>
|
|
58
|
+
```
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
## Classes
|
|
2
|
+
|
|
3
|
+
<dl>
|
|
4
|
+
<dt><a href="#PayPalDataCollector">PayPalDataCollector</a></dt>
|
|
5
|
+
<dd><p>PayPal Data Collector Widget constructor</p>
|
|
6
|
+
</dd>
|
|
7
|
+
</dl>
|
|
8
|
+
|
|
9
|
+
## Typedefs
|
|
10
|
+
|
|
11
|
+
<dl>
|
|
12
|
+
<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
|
|
13
|
+
<dd><p>Callback for onError method.</p>
|
|
14
|
+
</dd>
|
|
15
|
+
</dl>
|
|
16
|
+
|
|
17
|
+
## Interfaces
|
|
18
|
+
|
|
19
|
+
<dl>
|
|
20
|
+
<dt><a href="#PayPalDataCollectorConfig">PayPalDataCollectorConfig</a> : <code>object</code></dt>
|
|
21
|
+
<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>
|
|
22
|
+
</dd>
|
|
23
|
+
<dt><a href="#CollectedDeviceData">CollectedDeviceData</a> : <code>object</code></dt>
|
|
24
|
+
<dd><p>Data object with the corresponding <code>correlation_id</code>.</p>
|
|
25
|
+
</dd>
|
|
26
|
+
<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
|
|
27
|
+
<dd><p>Interface for IOnErrorEventData</p>
|
|
28
|
+
</dd>
|
|
29
|
+
</dl>
|
|
30
|
+
|
|
31
|
+
<a name="PayPalDataCollectorConfig" id="PayPalDataCollectorConfig" href="#PayPalDataCollectorConfig"> </a>
|
|
32
|
+
|
|
33
|
+
## PayPalDataCollectorConfig : <code>object</code>
|
|
34
|
+
Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
|
|
35
|
+
|
|
36
|
+
**Kind**: global interface
|
|
37
|
+
|
|
38
|
+
| Param | Type | Description |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| [mouse_movement] | <code>boolean</code> | Used for indicating if is enabled mouse movement collection. |
|
|
41
|
+
|
|
42
|
+
<a name="CollectedDeviceData" id="CollectedDeviceData" href="#CollectedDeviceData"> </a>
|
|
43
|
+
|
|
44
|
+
## CollectedDeviceData : <code>object</code>
|
|
45
|
+
Data object with the corresponding `correlation_id`.
|
|
46
|
+
|
|
47
|
+
**Kind**: global interface
|
|
48
|
+
|
|
49
|
+
| Param | Type | Description |
|
|
50
|
+
| --- | --- | --- |
|
|
51
|
+
| [correlation_id] | <code>string</code> | The correlation ID that was used on the subsecuent requests. |
|
|
52
|
+
|
|
53
|
+
<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData"> </a>
|
|
54
|
+
|
|
55
|
+
## IOnErrorEventData : <code>object</code>
|
|
56
|
+
Interface for IOnErrorEventData
|
|
57
|
+
|
|
58
|
+
**Kind**: global interface
|
|
59
|
+
|
|
60
|
+
| Param | Type | Description |
|
|
61
|
+
| --- | --- | --- |
|
|
62
|
+
| error_code | <code>string</code> | Error code. One of 'promise_not_enabled' or 'script_error'. |
|
|
63
|
+
|
|
64
|
+
<a name="PayPalDataCollector" id="PayPalDataCollector" href="#PayPalDataCollector"> </a>
|
|
65
|
+
|
|
66
|
+
## PayPalDataCollector
|
|
67
|
+
PayPal Data Collector Widget constructor
|
|
68
|
+
|
|
69
|
+
**Kind**: global class
|
|
70
|
+
|
|
71
|
+
* [PayPalDataCollector](#PayPalDataCollector)
|
|
72
|
+
* [new PayPalDataCollector(flowId, config)](#new_PayPalDataCollector_new)
|
|
73
|
+
* [.collectDeviceData()](#PayPalDataCollector+collectDeviceData) ⇒ [<code>Promise.<CollectedDeviceData></code>](#CollectedDeviceData)
|
|
74
|
+
* [.onError([callback])](#PayPalDataCollector+onError)
|
|
75
|
+
* [.setEnv(env)](#PayPalDataCollector+setEnv)
|
|
76
|
+
|
|
77
|
+
<a name="new_PayPalDataCollector_new" id="new_PayPalDataCollector_new" href="#new_PayPalDataCollector_new"> </a>
|
|
78
|
+
|
|
79
|
+
### new PayPalDataCollector(flowId, config)
|
|
80
|
+
|
|
81
|
+
| Param | Type | Description |
|
|
82
|
+
| --- | --- | --- |
|
|
83
|
+
| flowId | <code>string</code> | This string identifies the source website of the FraudNet request. |
|
|
84
|
+
| config | [<code>PayPalDataCollectorConfig</code>](#PayPalDataCollectorConfig) | Extra configuration for the widget. |
|
|
85
|
+
|
|
86
|
+
**Example**
|
|
87
|
+
```js
|
|
88
|
+
var payPalDataCollector = new PayPalDataCollector('FLOW_ID', {});
|
|
89
|
+
```
|
|
90
|
+
<a name="PayPalDataCollector+collectDeviceData" id="PayPalDataCollector+collectDeviceData" href="#PayPalDataCollector+collectDeviceData"> </a>
|
|
91
|
+
|
|
92
|
+
### payPalDataCollector.collectDeviceData() ⇒ [<code>Promise.<CollectedDeviceData></code>](#CollectedDeviceData)
|
|
93
|
+
After configuring the PayPalDataCollector Widget, starts the process and returns
|
|
94
|
+
the correlation id used among the requests.
|
|
95
|
+
|
|
96
|
+
**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
|
|
97
|
+
**Returns**: [<code>Promise.<CollectedDeviceData></code>](#CollectedDeviceData) - Promise when resolved, returnsa an object
|
|
98
|
+
that contains the `correlation_id` key.
|
|
99
|
+
**Example**
|
|
100
|
+
```js
|
|
101
|
+
const collectedDeviceData = await payPalDataCollectorWidget.collectDeviceData();
|
|
102
|
+
console.log(collectedDeviceData.correlation_id)
|
|
103
|
+
```
|
|
104
|
+
<a name="PayPalDataCollector+onError" id="PayPalDataCollector+onError" href="#PayPalDataCollector+onError"> </a>
|
|
105
|
+
|
|
106
|
+
### payPalDataCollector.onError([callback])
|
|
107
|
+
If the process fails, the function passed as parameter will be called.
|
|
108
|
+
Important: Do not perform thread blocking operations in callback such as window.alert() calls.
|
|
109
|
+
|
|
110
|
+
**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
|
|
111
|
+
|
|
112
|
+
| Param | Type | Description |
|
|
113
|
+
| --- | --- | --- |
|
|
114
|
+
| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
|
|
115
|
+
|
|
116
|
+
**Example**
|
|
117
|
+
```js
|
|
118
|
+
PayPalDataCollector.onError((eventData) => console.log('Some error occur'));
|
|
119
|
+
```
|
|
120
|
+
<a name="PayPalDataCollector+setEnv" id="PayPalDataCollector+setEnv" href="#PayPalDataCollector+setEnv"> </a>
|
|
121
|
+
|
|
122
|
+
### payPalDataCollector.setEnv(env)
|
|
123
|
+
Current method can change environment. By default environment = test.
|
|
124
|
+
This method does not affect Paydock's API calls or environments, is only for PayPal Data Collector
|
|
125
|
+
script, in order to know if the script is injected on a live server or is a testing
|
|
126
|
+
environment. The available values are `test` and `live`. This should match with the used
|
|
127
|
+
`gateway.mode` in Paydock to process the transaction.
|
|
128
|
+
|
|
129
|
+
**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
|
|
130
|
+
|
|
131
|
+
| Param | Type | Description |
|
|
132
|
+
| --- | --- | --- |
|
|
133
|
+
| env | <code>string</code> | test, live |
|
|
134
|
+
|
|
135
|
+
**Example**
|
|
136
|
+
```js
|
|
137
|
+
PayPalDataCollector.setEnv('live');
|
|
138
|
+
```
|
|
139
|
+
<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback"> </a>
|
|
140
|
+
|
|
141
|
+
## OnErrorCallback : <code>function</code>
|
|
142
|
+
Callback for onError method.
|
|
143
|
+
|
|
144
|
+
**Kind**: global typedef
|
|
145
|
+
|
|
146
|
+
| Param | Type |
|
|
147
|
+
| --- | --- |
|
|
148
|
+
| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) \| <code>null</code> |
|
|
149
|
+
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
## PayPalSavePaymentSource Widget
|
|
2
|
+
|
|
3
|
+
PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.
|
|
4
|
+
|
|
5
|
+
The general flow to use the widgets is:
|
|
6
|
+
1. Configure your PayPal gateway and connect it using Paydock API or Dashboard.
|
|
7
|
+
2. Create a container in your site
|
|
8
|
+
```html
|
|
9
|
+
<div id="widget"></div>
|
|
10
|
+
```
|
|
11
|
+
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:
|
|
12
|
+
```js
|
|
13
|
+
new paydock.PayPalSavePaymentSourceWidget(
|
|
14
|
+
"#widget",
|
|
15
|
+
accessTokenOrPublicKey,
|
|
16
|
+
gatewayId,
|
|
17
|
+
widgetSpecificConfig,
|
|
18
|
+
);
|
|
19
|
+
```
|
|
20
|
+
4. Handle the `onSuccess`, `onError` and `onCancel` for paypal setup token results.
|
|
21
|
+
5. If `onSuccess` event is emmited, event data should contain `token` and `email` ready to use.
|
|
22
|
+
|
|
23
|
+
### Example
|
|
24
|
+
|
|
25
|
+
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.
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<!DOCTYPE html>
|
|
29
|
+
<html lang="en">
|
|
30
|
+
<head>
|
|
31
|
+
<meta charset="UTF-8">
|
|
32
|
+
<title>Title</title>
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<h2>Using PayDock PayPalSavePaymentSourceWidget!</h2>
|
|
36
|
+
<div id="widget"></div>
|
|
37
|
+
</body>
|
|
38
|
+
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
|
|
39
|
+
<script>
|
|
40
|
+
let button = new paydock.PayPalSavePaymentSourceWidget(
|
|
41
|
+
"#widget",
|
|
42
|
+
accessTokenOrPublicKey,
|
|
43
|
+
gatewayId,
|
|
44
|
+
{
|
|
45
|
+
style: {
|
|
46
|
+
layout: 'vertical',
|
|
47
|
+
color: 'gold',
|
|
48
|
+
shape: 'pill',
|
|
49
|
+
label: 'paypal'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
payPalSavePaymentSourceWidget.onSuccess((data) => console.log('On success: ', data));
|
|
55
|
+
payPalSavePaymentSourceWidget.onError((data) => console.log('On error: ', data));
|
|
56
|
+
payPalSavePaymentSourceWidget.onCancel(() => console.log('On cancelled'));
|
|
57
|
+
|
|
58
|
+
button.setEnv('sandbox');
|
|
59
|
+
|
|
60
|
+
button.load();
|
|
61
|
+
</script>
|
|
62
|
+
</html>
|
|
63
|
+
```
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
## Classes
|
|
2
|
+
|
|
3
|
+
<dl>
|
|
4
|
+
<dt><a href="#PayPalSavePaymentSourceWidget">PayPalSavePaymentSourceWidget</a></dt>
|
|
5
|
+
<dd><p>PayPal Save Payment Source Widget constructor</p>
|
|
6
|
+
</dd>
|
|
7
|
+
</dl>
|
|
8
|
+
|
|
9
|
+
## Typedefs
|
|
10
|
+
|
|
11
|
+
<dl>
|
|
12
|
+
<dt><a href="#OnSuccessCallback">OnSuccessCallback</a> : <code>function</code></dt>
|
|
13
|
+
<dd><p>Callback for onSuccess method.</p>
|
|
14
|
+
</dd>
|
|
15
|
+
<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
|
|
16
|
+
<dd><p>Callback for onError method.</p>
|
|
17
|
+
</dd>
|
|
18
|
+
<dt><a href="#OnCancelCallback">OnCancelCallback</a> : <code>function</code></dt>
|
|
19
|
+
<dd><p>Callback for onCancel method.</p>
|
|
20
|
+
</dd>
|
|
21
|
+
</dl>
|
|
22
|
+
|
|
23
|
+
## Interfaces
|
|
24
|
+
|
|
25
|
+
<dl>
|
|
26
|
+
<dt><a href="#PayPalSavePaymentSourceWidgetConfig">PayPalSavePaymentSourceWidgetConfig</a> : <code>object</code></dt>
|
|
27
|
+
<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>
|
|
28
|
+
</dd>
|
|
29
|
+
<dt><a href="#ErrorCodes">ErrorCodes</a> : <code>object</code></dt>
|
|
30
|
+
<dd><p>Interface of possible error codes inside onError event data.</p>
|
|
31
|
+
</dd>
|
|
32
|
+
<dt><a href="#IOnSuccessEventData">IOnSuccessEventData</a> : <code>object</code></dt>
|
|
33
|
+
<dd><p>Interface for IOnSuccessEventData</p>
|
|
34
|
+
</dd>
|
|
35
|
+
<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
|
|
36
|
+
<dd><p>Interface for IOnErrorEventData</p>
|
|
37
|
+
</dd>
|
|
38
|
+
<dt><a href="#IOnCancelEventData">IOnCancelEventData</a> : <code>object</code></dt>
|
|
39
|
+
<dd><p>Interface for IOnCancelEventData</p>
|
|
40
|
+
</dd>
|
|
41
|
+
</dl>
|
|
42
|
+
|
|
43
|
+
<a name="PayPalSavePaymentSourceWidgetConfig" id="PayPalSavePaymentSourceWidgetConfig" href="#PayPalSavePaymentSourceWidgetConfig"> </a>
|
|
44
|
+
|
|
45
|
+
## PayPalSavePaymentSourceWidgetConfig : <code>object</code>
|
|
46
|
+
Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
|
|
47
|
+
|
|
48
|
+
**Kind**: global interface
|
|
49
|
+
|
|
50
|
+
| Param | Type | Description |
|
|
51
|
+
| --- | --- | --- |
|
|
52
|
+
| [style.layout] | <code>'vertical'</code> \| <code>'horizontal'</code> | Used for indicating the PayPal Button layout. |
|
|
53
|
+
| [style.color] | <code>'blue'</code> \| <code>'gold'</code> \| <code>'silver'</code> \| <code>'black'</code> \| <code>'white'</code> | Used for indicating the main color of the PayPal Button. |
|
|
54
|
+
| [style.shape] | <code>'rect'</code> \| <code>'sharp'</code> \| <code>'pill'</code> | Used for indicating the shape of the PayPal Button. |
|
|
55
|
+
| [style.label] | <code>'paypal'</code> \| <code>'checkout'</code> \| <code>'buynow'</code> \| <code>'pay'</code> | Used for indicating the label of the PayPal Button. |
|
|
56
|
+
| [style.disableMaxWidth] | <code>boolean</code> | Used for indicating if the max width will be disabled. |
|
|
57
|
+
| [style.disableMaxHeight] | <code>boolean</code> | Used for indicating the max height will be disabled. |
|
|
58
|
+
| [style.height] | <code>number</code> | Used for indicating the height of the PayPal Button, if disableMaxHeight is true. |
|
|
59
|
+
| [style.borderRadius] | <code>number</code> | Used for indicating the border radius of the PayPal Button. |
|
|
60
|
+
| [style.tagline] | <code>boolean</code> | Used for indicating the tagline of the PayPal Button. |
|
|
61
|
+
| [message.amount] | <code>number</code> | Used for indicating an amount before the payment. |
|
|
62
|
+
| [message.align] | <code>'center'</code> \| <code>'left'</code> \| <code>'right'</code> | Used for indicating the align of the message. |
|
|
63
|
+
| [message.color] | <code>'black'</code> \| <code>'white'</code> | Used for indicating the color of the message. |
|
|
64
|
+
| [message.position] | <code>'top'</code> \| <code>'bottom'</code> | Used for indicating the position of the message. |
|
|
65
|
+
|
|
66
|
+
<a name="ErrorCodes" id="ErrorCodes" href="#ErrorCodes"> </a>
|
|
67
|
+
|
|
68
|
+
## ErrorCodes : <code>object</code>
|
|
69
|
+
Interface of possible error codes inside onError event data.
|
|
70
|
+
|
|
71
|
+
**Kind**: global interface
|
|
72
|
+
|
|
73
|
+
| Param | Type | Description |
|
|
74
|
+
| --- | --- | --- |
|
|
75
|
+
| [unavailable] | <code>string</code> | Error code when an error occurs loading the widget. |
|
|
76
|
+
| [onPaypalVaultSetupTokenError] | <code>string</code> | Error code when an error occrus on PayPal side. |
|
|
77
|
+
| [onGetIdTokenError] | <code>string</code> | Error code when trying to get ID token from PayPal. |
|
|
78
|
+
| [onGetWalletConfigError] | <code>string</code> | Error code when trying to get wallet config from Paydock. |
|
|
79
|
+
| [onGetSetupTokenError] | <code>string</code> | Error code when trying to get the setup token from PayPal. |
|
|
80
|
+
| [onOneTimeTokenError] | <code>string</code> | Error code when trying to get the one time token from Paydock. |
|
|
81
|
+
|
|
82
|
+
<a name="IOnSuccessEventData" id="IOnSuccessEventData" href="#IOnSuccessEventData"> </a>
|
|
83
|
+
|
|
84
|
+
## IOnSuccessEventData : <code>object</code>
|
|
85
|
+
Interface for IOnSuccessEventData
|
|
86
|
+
|
|
87
|
+
**Kind**: global interface
|
|
88
|
+
|
|
89
|
+
| Param | Type | Description |
|
|
90
|
+
| --- | --- | --- |
|
|
91
|
+
| event | <code>EVENTS</code> | Event Name is 'ON_SUCCESS' |
|
|
92
|
+
| data | <code>object</code> | Data object |
|
|
93
|
+
| data.token | <code>string</code> | One Time Token to be exchanged for a Paydock Customer. |
|
|
94
|
+
| [data.email] | <code>string</code> | Paypal account customer email if retrieved from Paypal servers. |
|
|
95
|
+
|
|
96
|
+
<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData"> </a>
|
|
97
|
+
|
|
98
|
+
## IOnErrorEventData : <code>object</code>
|
|
99
|
+
Interface for IOnErrorEventData
|
|
100
|
+
|
|
101
|
+
**Kind**: global interface
|
|
102
|
+
|
|
103
|
+
| Param | Type | Description |
|
|
104
|
+
| --- | --- | --- |
|
|
105
|
+
| event | <code>EVENTS</code> | Event Name is 'ON_ERROR' |
|
|
106
|
+
| data | <code>object</code> | Error data object |
|
|
107
|
+
| data.error_code | [<code>ErrorCodes</code>](#ErrorCodes) | Error code. One of ErrorCodes. |
|
|
108
|
+
| [data.details] | <code>string</code> | Error details. |
|
|
109
|
+
| [data.message] | <code>string</code> | Error message. |
|
|
110
|
+
|
|
111
|
+
<a name="IOnCancelEventData" id="IOnCancelEventData" href="#IOnCancelEventData"> </a>
|
|
112
|
+
|
|
113
|
+
## IOnCancelEventData : <code>object</code>
|
|
114
|
+
Interface for IOnCancelEventData
|
|
115
|
+
|
|
116
|
+
**Kind**: global interface
|
|
117
|
+
|
|
118
|
+
| Param | Type | Description |
|
|
119
|
+
| --- | --- | --- |
|
|
120
|
+
| event | <code>EVENTS</code> | Event Name is 'ON_CANCEL' |
|
|
121
|
+
|
|
122
|
+
<a name="PayPalSavePaymentSourceWidget" id="PayPalSavePaymentSourceWidget" href="#PayPalSavePaymentSourceWidget"> </a>
|
|
123
|
+
|
|
124
|
+
## PayPalSavePaymentSourceWidget
|
|
125
|
+
PayPal Save Payment Source Widget constructor
|
|
126
|
+
|
|
127
|
+
**Kind**: global class
|
|
128
|
+
|
|
129
|
+
* [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget)
|
|
130
|
+
* [new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)](#new_PayPalSavePaymentSourceWidget_new)
|
|
131
|
+
* [.load()](#PayPalSavePaymentSourceWidget+load)
|
|
132
|
+
* [.setEnv(env, [alias])](#PayPalSavePaymentSourceWidget+setEnv)
|
|
133
|
+
* [.onSuccess([callback])](#PayPalSavePaymentSourceWidget+onSuccess)
|
|
134
|
+
* [.onError([callback])](#PayPalSavePaymentSourceWidget+onError)
|
|
135
|
+
* [.onCancel([callback])](#PayPalSavePaymentSourceWidget+onCancel)
|
|
136
|
+
|
|
137
|
+
<a name="new_PayPalSavePaymentSourceWidget_new" id="new_PayPalSavePaymentSourceWidget_new" href="#new_PayPalSavePaymentSourceWidget_new"> </a>
|
|
138
|
+
|
|
139
|
+
### new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)
|
|
140
|
+
|
|
141
|
+
| Param | Type | Description |
|
|
142
|
+
| --- | --- | --- |
|
|
143
|
+
| selector | <code>string</code> | Selector of html element. Container for PayPal Save Payment Source Widget. |
|
|
144
|
+
| publicKey | <code>string</code> | PayDock users public key. |
|
|
145
|
+
| gatewayId | <code>string</code> | PayDock's PayPal gatewayId. |
|
|
146
|
+
| config | [<code>PayPalSavePaymentSourceWidgetConfig</code>](#PayPalSavePaymentSourceWidgetConfig) | Extra configuration for the widget, like styles. |
|
|
147
|
+
|
|
148
|
+
**Example**
|
|
149
|
+
```js
|
|
150
|
+
var payPalSavePaymentSourceWidget = new PayPalSavePaymentSourceWidget('#paypalButton', 'public_key', 'gateway_id');
|
|
151
|
+
```
|
|
152
|
+
<a name="PayPalSavePaymentSourceWidget+load" id="PayPalSavePaymentSourceWidget+load" href="#PayPalSavePaymentSourceWidget+load"> </a>
|
|
153
|
+
|
|
154
|
+
### payPalSavePaymentSourceWidget.load()
|
|
155
|
+
The final method after configuring the PayPalSavePaymentSource Widget to
|
|
156
|
+
start the load process.
|
|
157
|
+
|
|
158
|
+
**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
|
|
159
|
+
<a name="PayPalSavePaymentSourceWidget+setEnv" id="PayPalSavePaymentSourceWidget+setEnv" href="#PayPalSavePaymentSourceWidget+setEnv"> </a>
|
|
160
|
+
|
|
161
|
+
### payPalSavePaymentSourceWidget.setEnv(env, [alias])
|
|
162
|
+
Current method can change environment. By default environment = sandbox.
|
|
163
|
+
Also we can change domain alias for this environment. By default domain_alias = paydock.com
|
|
164
|
+
|
|
165
|
+
**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
|
|
166
|
+
|
|
167
|
+
| Param | Type | Description |
|
|
168
|
+
| --- | --- | --- |
|
|
169
|
+
| env | <code>string</code> | sandbox, production |
|
|
170
|
+
| [alias] | <code>string</code> | Own domain alias |
|
|
171
|
+
|
|
172
|
+
**Example**
|
|
173
|
+
```js
|
|
174
|
+
payPalSavePaymentSourceWidget.setEnv('production');
|
|
175
|
+
```
|
|
176
|
+
<a name="PayPalSavePaymentSourceWidget+onSuccess" id="PayPalSavePaymentSourceWidget+onSuccess" href="#PayPalSavePaymentSourceWidget+onSuccess"> </a>
|
|
177
|
+
|
|
178
|
+
### payPalSavePaymentSourceWidget.onSuccess([callback])
|
|
179
|
+
If the setup token was successfully approved and a OTT was generated, the function passed as parameter will be called.
|
|
180
|
+
Important: Do not perform thread blocking operations in callback such as window.alert() calls.
|
|
181
|
+
|
|
182
|
+
**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
|
|
183
|
+
|
|
184
|
+
| Param | Type | Description |
|
|
185
|
+
| --- | --- | --- |
|
|
186
|
+
| [callback] | [<code>OnSuccessCallback</code>](#OnSuccessCallback) | Function to be called when the result is successful. |
|
|
187
|
+
|
|
188
|
+
**Example**
|
|
189
|
+
```js
|
|
190
|
+
payPalSavePaymentSourceWidget.onSuccess((eventData) => console.log('One time token and email obtained successfully'));
|
|
191
|
+
```
|
|
192
|
+
<a name="PayPalSavePaymentSourceWidget+onError" id="PayPalSavePaymentSourceWidget+onError" href="#PayPalSavePaymentSourceWidget+onError"> </a>
|
|
193
|
+
|
|
194
|
+
### payPalSavePaymentSourceWidget.onError([callback])
|
|
195
|
+
If in the process for obtaining the setup token fails, the function passed as parameter will be called.
|
|
196
|
+
Important: Do not perform thread blocking operations in callback such as window.alert() calls.
|
|
197
|
+
|
|
198
|
+
**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
|
|
199
|
+
|
|
200
|
+
| Param | Type | Description |
|
|
201
|
+
| --- | --- | --- |
|
|
202
|
+
| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
|
|
203
|
+
|
|
204
|
+
**Example**
|
|
205
|
+
```js
|
|
206
|
+
payPalSavePaymentSourceWidget.onError((eventData) => console.log('Some error occurred'));
|
|
207
|
+
```
|
|
208
|
+
<a name="PayPalSavePaymentSourceWidget+onCancel" id="PayPalSavePaymentSourceWidget+onCancel" href="#PayPalSavePaymentSourceWidget+onCancel"> </a>
|
|
209
|
+
|
|
210
|
+
### payPalSavePaymentSourceWidget.onCancel([callback])
|
|
211
|
+
If in the process for obtaining the setup token was cancelled, the function passed as parameter will be called.
|
|
212
|
+
Important: Do not perform thread blocking operations in callback such as window.alert() calls.
|
|
213
|
+
|
|
214
|
+
**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)
|
|
215
|
+
|
|
216
|
+
| Param | Type | Description |
|
|
217
|
+
| --- | --- | --- |
|
|
218
|
+
| [callback] | [<code>OnCancelCallback</code>](#OnCancelCallback) | Function to be called when the operation is cancelled. |
|
|
219
|
+
|
|
220
|
+
**Example**
|
|
221
|
+
```js
|
|
222
|
+
payPalSavePaymentSourceWidget.onCancel(() => console.log('Operation cancelled'));
|
|
223
|
+
```
|
|
224
|
+
<a name="OnSuccessCallback" id="OnSuccessCallback" href="#OnSuccessCallback"> </a>
|
|
225
|
+
|
|
226
|
+
## OnSuccessCallback : <code>function</code>
|
|
227
|
+
Callback for onSuccess method.
|
|
228
|
+
|
|
229
|
+
**Kind**: global typedef
|
|
230
|
+
|
|
231
|
+
| Param | Type |
|
|
232
|
+
| --- | --- |
|
|
233
|
+
| data | [<code>IOnSuccessEventData</code>](#IOnSuccessEventData) |
|
|
234
|
+
|
|
235
|
+
<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback"> </a>
|
|
236
|
+
|
|
237
|
+
## OnErrorCallback : <code>function</code>
|
|
238
|
+
Callback for onError method.
|
|
239
|
+
|
|
240
|
+
**Kind**: global typedef
|
|
241
|
+
|
|
242
|
+
| Param | Type |
|
|
243
|
+
| --- | --- |
|
|
244
|
+
| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) |
|
|
245
|
+
|
|
246
|
+
<a name="OnCancelCallback" id="OnCancelCallback" href="#OnCancelCallback"> </a>
|
|
247
|
+
|
|
248
|
+
## OnCancelCallback : <code>function</code>
|
|
249
|
+
Callback for onCancel method.
|
|
250
|
+
|
|
251
|
+
**Kind**: global typedef
|
|
252
|
+
|
|
253
|
+
| Param | Type |
|
|
254
|
+
| --- | --- |
|
|
255
|
+
| data | [<code>IOnCancelEventData</code>](#IOnCancelEventData) |
|
|
256
|
+
|
package/package.json
CHANGED
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
"name": "@paydock/client-sdk",
|
|
107
|
-
"version": "1.
|
|
107
|
+
"version": "1.116.2",
|
|
108
108
|
"scripts": {
|
|
109
109
|
"build:doc": "node docs/html/marked.js",
|
|
110
110
|
"build:js": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
|
package/slate.md
CHANGED
|
@@ -1922,39 +1922,3 @@ src.setStyles({
|
|
|
1922
1922
|
font_family: 'Arial',
|
|
1923
1923
|
});
|
|
1924
1924
|
```
|
|
1925
|
-
|
|
1926
|
-
## Recognition token
|
|
1927
|
-
|
|
1928
|
-
In order to store user information for further payments, click to pay provides a recognition token that is used to load user information.
|
|
1929
|
-
If you already have a recognitionToken stored, you can use it in meta to load the user information.
|
|
1930
|
-
|
|
1931
|
-
### Storage suggestions
|
|
1932
|
-
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:
|
|
1933
|
-
|
|
1934
|
-
- `Expiration Date=` cookie should be set to expire at a max 180 days
|
|
1935
|
-
- `Secure` flag
|
|
1936
|
-
- `httpOnly` flag
|
|
1937
|
-
- `sameSite=` strict
|
|
1938
|
-
- `Value=` recognition token JWT
|
|
1939
|
-
|
|
1940
|
-
### Example code
|
|
1941
|
-
|
|
1942
|
-
```javascript
|
|
1943
|
-
var src = new paydock.ClickToPay(
|
|
1944
|
-
"#checkoutIframe",
|
|
1945
|
-
"service_id",
|
|
1946
|
-
"paydock_public_key",
|
|
1947
|
-
{
|
|
1948
|
-
"recognition_token": "eyJraWQiOiIy...",
|
|
1949
|
-
},
|
|
1950
|
-
);
|
|
1951
|
-
src.on('recognitionTokenRequested', (data) => {
|
|
1952
|
-
console.log('Recognition token was found: ' + data.data.recognitionToken);
|
|
1953
|
-
// Add recognition token to your store
|
|
1954
|
-
});
|
|
1955
|
-
|
|
1956
|
-
src.on('recognitionTokenDropped', () => {
|
|
1957
|
-
console.log('Recognition token was droped');
|
|
1958
|
-
// Delete recognition token from your store
|
|
1959
|
-
});
|
|
1960
|
-
```
|