Links

Widget

How to communicate with widget?

You can interact with our widget using java script api in real-time, without the need to develop complex backend integration.
TransactionLink's JS API is available in a global variable named
JavaScript
1
window.transactionlink

How to implement widget communication

To ensure the correct functioning of the widget:
  1. 1.
    Define <transactionlink-widget /> element in the DOM.
  2. 2.
    Define window.transactionlink_ready method. It is called when the widget and widget API are ready to use.
    window.transactionlink_ready = () => {
    transactionlink.setOptions({ token })
    transactionlink.open()
    }
  3. 3.
    Link https://widget.transactionlink.io/transactionlink-widget.umd.js to the file:
    • It should be located at the end of the file
    • Or added dynamically after completing points 1 and 2.
      // Create a script element
      const script = document.createElement('script');
      // Set the source attribute to the URL of the script
      script.src = 'https://widget.transactionlink.io/transactionlink-widget.umd.js';
      // Append the script element to the document's head
      document.head.appendChild(script);

Simple code example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verification</title>
</head>
<body>
<div id="transactionlink-widget"/>
<script>
window.transactionlink_ready = () => {
transactionlink.setOptions({ token })
transactionlink.open()
}
</script>
<script type="text/javascript" src="https://widget.transactionlink.io/transactionlink-widget.umd.js"></script>
</body>
</html>

Advanced code example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Widget on Button Click</title>
</head>
<body>
<!-- Button to trigger the addition of the widget -->
<button id="open-widget">Open Widget</button>
<transactionlink-widget />
<script>
let transactionLinkReady = false
function openWidget() {
if (!transactionLinkReady) {
window.transactionlink_ready = () => {
transactionLinkReady = true
transactionlink.setOptions({ token })
transactionlink.open()
}
const script = document.createElement('script');
script.src = 'https://widget.transactionlink.io/transactionlink-widget.umd.js';
document.head.appendChild(script);
} else {
transactionlink.setOptions({ token })
transactionlink.open()
}
}
// Get the button element
const addButton = document.getElementById('open-widget');
// Add a click event listener to the button
addButton.addEventListener('click', openWidget);
</script>
</body>
</html>

Content Security Policy

To enhance security, include the following Content Security Policy (CSP) directive headers in the index.html file, within the tag:
Content-Security-Policy default-src 'self' *.transactionlink.io;
connect-src 'self' *.transactionlink.io wss://*.transactionlink.io *.sentry.io;
script-src 'self' *.transactionlink.io;
img-src blob: 'self' *.transactionlink.io data:;
frame-src 'self' *.transactionlink.io;
style-src 'self' *.transactionlink.io fonts.googleapis.com;
font-src 'self' *.transactionlink.io fonts.gstatic.com data:
Last modified 24d ago