API

SkinsBack oferece ao usuário a possibilidade de recarregar o saldo sem sair do seu site. Você precisa colocar um iframe no seu site, onde estará a interface do SkinsBack, e implementar um manipulador de eventos.

Fluxo de interação

1. Faça uma solicitação para a API SkinsBack para criar um depósito, passando o parâmetro widget=1
2. Abra uma janela pop-up (popup, você precisa implementar), e dentro dela crie um objeto html iframe, com o endereço que foi obtido através da API
3. Registre um manipulador de eventos através do JavaScript, que irá monitorar quando o usuário recarregar o saldo/terminar de interagir com a interface de recarga do SkinsBack ('success' - pagamento bem-sucedido, 'cancel' - não foi possível recarregar)

Para que o reabastecimento com skins seja exibido corretamente na versão móvel, é necessário alterar a largura e a altura do bloco de iframe (a altura deve ser de pelo menos 970px).

Quando o evento for capturado ('success' ou 'cancel'), é necessário fechar a janela pop-up.

Após o usuário recarregar com sucesso o saldo em seu site, será enviado webhook com informações sobre o pagamento.

Exemplo de iframe e manipulador abaixo:

<!-- 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>