API

SkinsBack proporciona al usuario la posibilidad de cargar saldo sin abandonar su sitio web. Debe colocar un iframe en su sitio web que contenga la interfaz de SkinsBack y implementar un controlador de eventos.

Flujo de interacción

1. Realice una solicitud a la API de SkinsBack para crear un depósito, pasando el parámetro widget=1
2. Abra una ventana emergente (popup, que debe implementar usted) y cree un objeto iframe dentro de ella con la URL obtenida a través de la API
3. Registre un controlador de eventos a través de JavaScript que estará pendiente de cuando el usuario cargue saldo o termine de interactuar con la interfaz de carga de SkinsBack ('success' - pago exitoso, 'cancel' - no se pudo cargar saldo)

Para que la recarga de skins se muestre correctamente en la versión móvil, es necesario cambiar el ancho y alto del bloque de iframe (la altura debe ser de al menos 970px).

Cuando se capture el evento ('success' o 'cancel'), es necesario cerrar la ventana emergente.

Después de que el usuario recargue con éxito el saldo, se enviará una webhook a su sitio con información de pago.

A continuación se muestra un ejemplo de iframe y controlador:

<!-- desktop -->
<iframe src="https://skinsback.com/_/pay/61caaa62956ba5b8bc4134acfc8cfefd"
	style="width: 850px; height: 600px; border: none;"></iframe>

<!-- mobile -->
<iframe src="https://skinsback.com/_/pay/61caaa62956ba5b8bc4134acfc8cfefd"
	style="width: 400px; height: 970px; border: none;"></iframe>

<script type="text/javascript">
	window.addEventListener('message', handleMessage, false);

	function handleMessage(event)
	{
		if (event.origin != "https://skinsback.com")
		{
			return;
		}

		if(typeof event.data.paymentStatus == 'undefined')
		{
			return;
		}

		if(event.data.paymentStatus == 'success') /* success payment */
		{
			// closePopup();
		}
		else if(event.data.paymentStatus == 'cancel') /* failed payment */
		{
			// closePopup();
		}
	}
</script>