API

SkinsBack provides the user with the opportunity to replenish the balance without leaving your site. You need to place an iframe on your site that will contain the SkinsBack interface and implement one event handler.

Flow

1. Make a request to the SkinsBack API to create a deposit, passing parameter widget=1
2. You need to open a popup window (you need to implement it yourself), and inside it, you create a html iframe object, with the URL that was received via the API
3. Have an event handler via JavaScript that will keep track of when the user tops up/finishes the SkinsBack top up interface ('success' - payment successful, 'cancel' - top up failed)

To display replenishment with skins correctly in the mobile version, you need to resize the iframe (the height must be at least 970px).

When the event is caught ('success' or 'cancel') - close the popup window.

After a user successfully tops up, a webhook with payment information will be sent to your site.

An example iframe and handler is shown below:

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