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

Note
To open the payment widget in sandbox mode, refer to these instructions.

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
Full screen
Small screen
    <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

    1. Run the npm install @xsolla/payouts-sdk command and set up the widget library.
    2. 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.
    FAQs
    Refer to the answers to solve common issues.
    Use the following initialization code:
    Copy
    Full screen
    Small screen
      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:
      ParameterTypeDescription
      size
      stringThe height of the payment widget:
      • fixed — fixed widget height of 600 px.
      • auto — dynamic widget height that changes depending on the screen size.

      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 the size==‘auto’ parameter is passed.

      Example of setting up event handling:

      Copy
      Full screen
      Small screen
        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
        Thank you for your feedback!
        Last updated: January 22, 2024

        Found a typo or other text error? Select the text and press Ctrl+Enter.

        Report a problem
        We always review our content. Your feedback helps us improve it.
        Provide an email so we can follow up
        Thank you for your feedback!