@paydock/client-sdk
Version:
Paydock client sdk
155 lines (127 loc) • 5.51 kB
Markdown
# Fraud prevention
The Fraud Prevention module allows you to add security layers to your payment workflows
by integrating with any of our underlying fraud prevention providers.
## Real time user behavior analysis
### Forter
One of Forter's key features is our ability to track the user's real-time behavior on
the site and use it to separate fraudsters from legitimate buyers. To take advantage
of Forter's technology, a JavaScript snippet needs to be placed on EVERY page
of your commerce site beginning with the homepage and up to and including the final
"Thank you for your purchase" page.
The integration is simple and straightforward - you only need to configure event
listeners and then instantiate a FraudPreventionService with your site configuration.
Additional setup is required in case your website uses Content Security Policies (CSP)
#### Forter: Code snippet
```html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Real time user behaviour anaylsis - Forter example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
</head>
<body>
<main>
<h1>Real time user behaviour anaylsis - Forter example</h1>
<div class="forter-test">
<h2>Forter Integration</h2>
<div class="status-card">
<p>
<strong>Integration Status:</strong>
<span data-fraud-prevention="status-indicator" class="status pending">
Pending
</span>
</p>
<p>
<strong>Token Value:</strong>
<code data-fraud-prevention="forter-token">Not available</code>
</p>
<p data-fraud-prevention="error-container" style="display: none;">
<strong>Error Code:</strong>
<span data-fraud-prevention="error-code" class="error"></span>
</p>
</div>
</div>
</main>
<script>
const { FRAUD_PREVENTION_EVENTS, FraudPreventionService } = window.paydock
let token = '';
let errorCode = '';
const render = () => {
const statusIndicator = document.querySelector('[data-fraud-prevention="status-indicator"]');
const tokenValue = document.querySelector('[data-fraud-prevention="forter-token"]');
const errorContainer = document.querySelector('[data-fraud-prevention="error-container"]');
const errorCodeElement = document.querySelector('[data-fraud-prevention="error-code"]');
if (token) {
statusIndicator.className = 'status success';
statusIndicator.textContent = 'Active';
tokenValue.textContent = token;
} else {
statusIndicator.className = 'status pending';
statusIndicator.textContent = 'Pending';
tokenValue.textContent = 'Not available';
}
if (errorCode) {
errorCodeElement.textContent = errorCode;
errorContainer.style.display = 'block';
} else {
errorContainer.style.display = 'none';
}
};
document.addEventListener(FRAUD_PREVENTION_EVENTS.NAMESPACE, (event) => {
switch (event.detail.type) {
case FRAUD_PREVENTION_EVENTS.TYPES.FINTERPRINT_TOKEN_READY: {
token = event.detail.payload.token;
break;
}
case FRAUD_PREVENTION_EVENTS.TYPES.FINGERPRINT_TOKEN_ERROR: {
errorCode = event.detail.payload.code;
break;
}
default: {
throw new Error(
`${FRAUD_PREVENTION_EVENTS.NAMESPACE} emitted an unsupported event: ${JSON.stringify(event.detail)}.`,
);
}
}
render();
});
const fraudPreventionServiceConfig = {
environmentId: 'sandbox',
mode: 'test'
}
// Set "csp" to true if your website uses Content Security Policies
const csp = false;
new FraudPreventionService(fraudPreventionServiceConfig)
.withForter({
siteId: 'example_site_id_or_subsite_id',
csp,
});
// new FraudPreventionService(fraudPreventionServiceConfig)
// .withAccessTokenStrategy("eyJhb_access_token_example_...")
// .withForter({
// providerId: environment.forter.serviceId,
// csp,
// });
// new FraudPreventionService(fraudPreventionServiceConfig)
// .withPublicKeyStrategy("pk_example_...")
// .withForter({
// providerId: environment.forter.serviceId,
// csp,
// });
</script>
</body>
</html>
```
#### Forter: Content Security Policies
If your site enforces Content Security Policies (CSP), make sure to:
1. Set the `csp` option to `true` when invoking `withForter` on your `FraudPreventionService` instance.
2. Allowlist Forter's domains on `connect-src`, `script-src` and `worker-src` as shown below.
```bash
connect-src https://*.forter.com wss://cdn0.forter.com https://d2o5idwacg3gyw.cloudfront.net https://dz8rit8v72mig.cloudfront.net https://db7q4jg5rkhk8.cloudfront.net https://1.1.1.1 https://d94qwxh6czci4.cloudfront.net https://dr6vcclmzwk74.cloudfront.net https://d6rak4b14t5gp.cloudfront.net https://d3k4bt74u9esq1.cloudfront.net https://d1ezzflfzltk6e.cloudfront.net https://d3nocrch4qti4v.cloudfront.net https://duuytoqss3gu4.cloudfront.net https://df45ay5pw60dy.cloudfront.net
script-src https://*.forter.com https://dlthst9q2beh8.cloudfront.net https://d2nww8zpyj5pk0.cloudfront.net https://d2w2nqfk3z9hdt.cloudfront.net
worker-src blob:
```