Widget.js
With the widget, payments are lightning-fast. In a single click, your customers can pay for your content, support you and your work or subscribe to your service. For the best user experience, you need complete control of how it looks, when it appears and what it says.
We’ve tried to make this documentation user-friendly and example-filled, but if you have any questions, please don’t hesitate to contact our dev team at dev@uhmi.io.
Installation
To get the widget to appear on your website or web app copy and paste the snippet below before the </body> tag and replace the PUBLIC_API_KEY with your own public API key.
// Set your own PUBLIC_API_KEY
let PUBLIC_API_KEY = 'PUBLIC_API_KEY';
(function (u, h, m, i) {
i = u.getElementsByTagName(h)[0];
h = u.createElement(h);
h.async = true;
h.src = 'https://widget.uhmi.io/init/' + m;
i.parentNode.insertBefore(h,i);
} (document, 'script', PUBLIC_API_KEY));
window.UhmiReady = function() {
Uhmi.init();
};
Configuration
Once you have installed Uhmi on your website or web app, you should see the widget in the bottom right of your screen. Now it’s time to set some configurations for the widget.
When set to false, the launcher is shown only when a payment is activated.
Add a CSRF token to protect your application from cross-site request forgery (CSRF) attacks. When not set, we will look for the HTML meta tag with name="csrf-token" to get the token.
let CSRF_TOKEN = document.head.querySelector('meta[name="csrf-token"]');
window.UhmiReady = function() {
Uhmi.init({
launcher: true,
csrf: 'CSRF_TOKEN'
});
};
Methods
At the click of a button, when hovering over a div or after scrolling down to the end of a page, with these methods you control how and when you want your customers to interact with the widget.
Uhmi.payment.show(options)
This method will show the widget with a payment.
The identifier of the payment created with the Uhmi API.
The callback to invoke when a payment is successful.
function(content)
contentis the content that is returned
Choose the language you prefer to display to the customer. If left blank or auto, we will display the language based on the customer’s IP address.
<div id="content"></div>
<button id="customButton">Support</button>
document.getElementById('customButton').addEventListener('click', function(e) {
Uhmi.payment.show({
paymentId: 'PAYMENT_ID',
language: 'en',
onShowContent: function(content) {
document.getElementById('content').innerHTML(content);
document.getElementById('customButton').remove();
return;
}
});
e.preventDefault();
});
Uhmi.client.show()
This method will show the widget with a description of your company.
Uhmi.client.show();
Uhmi.hide()
This method will hide the widget.
Uhmi.hide();