Tworzenie depozytu bez przekierowania do SkinsBack
SkinsBack zapewnia użytkownikowi możliwość uzupełnienia salda bez konieczności opuszczania witryny. Musisz umieścić na swojej stronie element iframe, który będzie zawierał interfejs SkinsBack i zaimplementować jedną procedurę obsługi zdarzeń.
Schemat interakcji
1. Złóż żądanie do API SkinsBack w celu utworzenia depozytu, przekazując parametr widget=1
2. Otwórz wyskakujące okienko (popup, musisz je zaimplementować), a w nim utwórz obiekt iframe HTML z adresem otrzymanym przez API
3. Zarejestruj moduł obsługi zdarzeń za pomocą JavaScript, który będzie monitorował, kiedy użytkownik doładuje saldo/zakończy pracę z interfejsem doładowań SkinsBack ('success' – pomyślna płatność, 'cancel' – nieudane doładowanie)
Aby uzupełnienie skinami wyświetlało się poprawnie w wersji mobilnej należy zmienić szerokość i wysokość bloku iframe (wysokość musi wynosić co najmniej 970px).
Po wykryciu zdarzenia ('success' lub 'cancel') wyskakujące okienko musi zostać zamknięte.
Po pomyślnym uzupełnieniu salda przez użytkownika, na Twoją stronę internetową zostanie wysłane webhook z informacjami o płatności.
Przykładowy element iframe i moduł obsługi przedstawiono poniżej:
<!-- 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>