Set up payment widget displaying
To add a payment widget interface to your platform, you need to add the widget library. You can also adjust the widget height and event handling to improve the user experience.
Add payment widget library
Set up using script
Add the script to your platform’s website page. In the script initialization parameters, pass the authorization token obtained at the previous integration step. The script runs every time the page is loaded.
Copy
<script>
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/payouts/v0/_bundles/santorelli.min.js";
s.addEventListener('load', function () {
const widget = new XPayoutsWidget.Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>Set up using npm-package
- Run the
npm install @xsolla/payouts-sdkcommand and set up the widget library. - Add a link to the library to the site of your platform. In the request, pass the authorization token obtained at the previous integration step.
Use the following initialization code:
Copy
import {Widget} from '@xsolla/payouts-sdk';
const widget = new Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});Additional settings
Height
You can adjust the height of the payment widget by passing the following parameter in the initialization code:
| Parameter | Type | Description |
|---|---|---|
| string | The height of the payment widget:
|
Event handling
You can set up handling of the following events:
loaded— widget loading in an iframe.tokenExpired— expiration of a token.requestWithdrawal— successful request to receive withdrawal.heightResize— widget height change. The event is handled only when thesize=='auto'parameter is passed.
Example of setting up event handling:
Copy
widget.addEventListener('tokenExpired', () => {
console.log('tokenExpired');
});
widget.addEventListener('heightResize', ({ height }) => {
console.log(`height resize to: ${height}`);
});
widget.addEventListener('requestWithdrawal', ({ amount }) => {
console.log(`success request withdrawal, amount: ${amount}`);
});Your progress
Found a typo or other text error? Select the text and press Ctrl+Enter.
