API

SkinsBack permite ao usuário adicionar fundos sem sair do seu site. Você precisa colocar um iframe no seu site, que conterá 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 popup (popup, você precisa implementar) e dentro dela crie um elemento html iframe, com o endereço recebido pela API
3. Registre um manipulador de eventos em JavaScript que irá monitorar quando o usuário adicionar fundos/encerrar a interação com a interface de adição de fundos do SkinsBack ('success' - pagamento bem-sucedido, 'cancel' - falha ao adicionar fundos)

Para que o reabastecimento de skins seja exibido corretamente na versão móvel, é necessário alterar a largura e altura do bloco iframe (a altura deve ser no mínimo 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>