Establecer la visualización del widget de pago
Para agregar una interfaz de widget de pago a su plataforma, debe agregar la biblioteca de widgets. También puede ajustar la altura del widget y el control de eventos para mejorar la experiencia del usuario.
Añadir biblioteca de widgets de pago
Nota
Para abrir el widget de pago en modo Aislador de proceso (sandbox), consulte estas instrucciones.
Establecerlo mediante script
Añade el script a la página del sitio web de su plataforma. En los parámetros de inicialización del script, transmita el token de autorización obtenido en el paso de integración anterior. El script se ejecuta cada vez que se carga la página.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>
Establecerlo mediante npm-package
- Ejecute el comando
npm install @xsolla/payouts-sdky establezca la biblioteca de widgets. - Añada un enlace a la biblioteca en el sitio web de su plataforma. En la solicitud, transmita el token de autorización obtenido en el paso de integración anterior.
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');
});
Ajustes adicionales
Altura
Puede ajustar la altura del widget de pago transmitiendo el siguiente parámetro en el código de inicialización:| Parámetro | Tipo | Descripción |
|---|---|---|
| string | La altura del widget de pago:
|
Control de eventos
Puede establecer el control de los siguientes eventos:
loaded- carga de widgets en un iframe.tokenExpired- expiración de un token.requestWithdrawal- solicitud aceptada para recibir reintegros.heightResize- cambio de altura del widget. El evento se controla solamente cuando se transmite el parámetrosize==‘auto’.
Ejemplo de configuración del control de eventos:
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}`);
});
Tu progreso
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
