Skip to content

Frontend: Retrieve the Token

Warning

API version 1 is now deprecated. It will be supported for the foreseeable future, however any new implementations should use the improved version 2 API.

Script Placement

To install the on page script protection add the script tag given in the previous step, add this script as the first entry into <head> section of the payment page (for the standard integration):

1
<script src="https://antifraud.empello.net/abcdefgh/ijklmnop-live.js"></script>

To test the protection script we provide a development script. The development script will output any errors in the javascript console and will not be recorded on the dashboard. It can be implemented like this:

1
<script src="https://antifraud.empello.net/abcdefgh/ijklmnop-dev.js"></script>

Warning

Please only use the dev script for testing, remember to switch to the -live.js prefix in production.

Token Retrieval Function

To retrieve the token on the payment page the function Empello.getToken(callback(token)), added by our on site script, must be called after the page has loaded when the subscription or confirmation button is pressed. We suggest that the callback function adds the token to your subscription form or button. The example code for vanilla javascript, angular and react below adds the token to a hidden input on a form with the ID 'myForm', but you are free to choose how you store the token:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var form = document.getElementById('myForm');
    var submitFunction = function(submitEvent) {
        submitEvent.preventDefault();
        Empello.getToken(function(token) {
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute("type", "hidden");
            hiddenInput.setAttribute("name", "token");
            hiddenInput.setAttribute("value", token);
            form.appendChild(hiddenInput);
            form.submit();
        });
    };
    form.addEventListener('submit', submitFunction, false);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const Example = () => {
const [empelloScriptLoaded, setEmpelloScriptLoaded] = useState(false);

useEffect(() => {
  if (!empelloScriptLoaded) {
    const script = document.createElement('script');
    script.src = 'https://antifraud.empello.net/YOUR_SLUG/YOUR_KEY-live.js';
    script.async = true;
    document.body.appendChild(script);
    setEmpelloScriptLoaded(true);
  }
}, [empelloScriptLoaded, setEmpelloScriptLoaded]);

const handlePurchaseButtonClick = (e) => {
  e.preventDefault();

  window.Empello.getToken({
    success(token) {
      console.log(`token=${token}`);
    },
    error(errors) {
      console.log(`errors=${JSON.stringify(errors)}`);
    },
  });
};

...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Component } from '@angular/core';
declare const Empello: any;

...
export class Example {
  tokenInput = '';

  submitForm() {
    Empello.getToken((token) => {
      this.tokenInput = token;
    });
  }
}

1
2
3
4
5
6
<input class="token-input" type="text" [value]="tokenInput" />
<div class="card-container">
  <div class="card card-small" (click)="submitForm()" tabindex="0">
    <span>Confirm</span>
  </div>
</div>

Warning

Please ensure that the button is disabled after the first click. This prevents the token being submitted to your backend more than once.

Warning

Do not attach Empello.getToken to window.onload as this can produce a ReferenceError. The first Empello script injects additional scripts that may not have finished loading when window.onload triggers.

Content Security Policy (CSP)

Please ensure you add the following to your content security policy (CSP) header:

1
script-src *.empello.net; connect-src ws://*.empello.net wss://*.empello.net *.empello.net;

Referrer Policy

Please ensure your referrer is set to the following:

1
Referrer-Policy: no-referrer-when-downgrade

For more information on the referrer policy header and how to set it up see here.