@paydock/client-sdk
Version:
Paydock client sdk
65 lines (56 loc) • 2.63 kB
Markdown
## PayPalDataCollector Widget
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.
The general flow to use the widgets is:
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:
```js
var paypalDataCollector = new paydock.PayPalDataCollector(
sourceWebsiteIdentifier,
widgetConfigParams,
);
```
2. Handle the `collectDeviceData` function, that will return the generated correlation ID, like following:
```js
const collectedDeviceData = await paypalDataCollector.collectDeviceData();
const correlationId = collectedDeviceData.correlation_id;
```
3. Use freely the correlation_id value as is needed.
4. Handle the `onError` callback. The error handler is set up before scripts are loaded to prevent race conditions where script load failures occur before the promise rejection handler is assigned.
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).
### PayPalDataCollector Widget example
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.
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Using PayDock PayPalDataCollector Widget!</h2>
<div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
let payPalDataCollector = new paydock.PayPalDataCollector(
'FLOW_ID',
{
mouse_movement: true
}
);
payPalDataCollector.setEnv('test');
payPalDataCollector.onError(function(error) {
console.log("On Error Callback", error);
});
payPalDataCollector.collectDeviceData()
.then(function(collectedDeviceData) {
//Here when the promise is resolved, it should be able to see the correlation_id.
const correlationId = collectedDeviceData.correlation_id;
console.log("On Success", correlationId);
})
.catch(function(error) {
// Handle promise rejection if script loading fails
console.log("Promise rejected", error);
});
</script>
</html>
```