So öffnen Sie das Zahlungsportal
Solange Sie keinen Vertrag mit Xsolla geschlossen haben, können Sie den Zahlungsvorgang nur im Sandbox-Modus testen. Falls Fehler auftreten, finden Sie hier deren Erläuterung.
Nutzen Sie folgende URL, um das Zahlungsportal in der Testumgebung aufzurufen: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN; wobei ACCESS_TOKEN der Token ist, der im vorherigen Schritt bezogen wurde.
Neues Fenster
Um die Benutzeroberfläche in einem neuen Fenster zu öffnen, nutzen Sie die folgende URL: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, wobei TOKEN der erhaltene Token ist.
https://secure.xsolla.com/paystation4/?token=TOKEN.- Mit Pay Station Embed. Einschränkung: beim Öffnen im Ingame-Browser (WebView) kann es zu Problemen kommen.
- in einem iframe. Einschränkung: beim Öffnen im Ingame-Browser (WebView) und in Ihrer mobilen App kann es zu Problemen kommen.
Pay Station Embed
- html
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<button data-xpaystation-widget-open>Buy Credits</button>
Pay Station Embed ermöglicht das Abrufen von Ereignissen aus dem Zahlungsportal via postMessage. Diese Ereignisse können an Analytics-Systeme übermittelt werden. Wenden Sie sich zum Einrichten der Ereignisverarbeitung in Ihrem Analytics-System an Ihren Customer Success Manager oder senden Sie eine E-Mail an csm@xsolla.com.
Das Xsolla-Team hat ein Widget entwickelt, mit dem Sie das Zahlungsportal ganz einfach in Ihre Website integrieren können. Das Widget-Skript ist in unserem GitHub-Repository verfügbar.
Script-Initialisierungsparameter:
| Parameter | Typ | Beschreibung |
|---|---|---|
access_token | string | Token; wird über die API empfangen. Erforderlich. |
sandbox | boolean | Stellen Sie den Wert des Parameters auf true, um den Zahlungsvorgang auszutesten: Anstelle von sandbox-secure.xsolla.com wird secure.xsolla.com verwendet. |
lightbox | object | Lightbox-Parameter (Objekt; nur für die Desktop-Version). |
payment_widget_ui.lightbox.width | string | Rahmenhöhe der Lightbox. Falls als Wert null festgelegt ist, wird die Höhe der Pay Station verwendet. Standardwert ist null. |
payment_widget_ui.lightbox.height | string | Rahmenhöhe der Lightbox. Falls als Wert null festgelegt ist, wird die Höhe der Pay Station verwendet. Standardwert ist 100%. |
payment_widget_ui.lightbox.zIndex | integer | Definiert die Stapelanordnung. Standardwert ist 1000. |
payment_widget_ui.lightbox.overlayOpacity | integer | Deckkraft des Widget-Hintergrunds (0 – völlig transparent, 1 – völlig undurchsichtig). Der Standardwert ist 60 % (.6). |
payment_widget_ui.lightbox.overlayBackground | string | Hintergrundfarbe der Einblendung. Standardwert ist #000000. |
payment_widget_ui.lightbox.modal | boolean | Falls true festgelegt ist, kann der Lightbox-Rahmen nicht geschlossen werden. Standardwert ist false. |
lightbox.closeByClick | boolean | Falls true festgelegt ist, wird die Lightbox durch Klick auf die Einblendung geschlossen. Standardwert ist true. |
lightbox.closeByKeyboard | boolean | Falls true festgelegt ist, wird die Lightbox durch Drücken der Escape-Taste geschlossen. Standardwert ist true. |
payment_widget_ui.lightbox.contentBackground | string | Hintergrundfarbe des Rahmens. Standardwert ist #ffffff. Beachten Sie, dass diese Farbänderungen keinen Einfluss auf den iframe der Pay Station selbst haben, sondern nur auf die Einstellungen der Lightbox, in dem der iframe angezeigt wird. |
payment_widget_ui.lightbox.contentMargin | string | Breite des Rahmens. Standardwert ist 10px. |
payment_widget_ui.lightbox.spinner | string | Art der animierten Ladeanzeige. Als Wert lässt sich entweder xsolla oder round festlegen. Standardwert ist xsolla. |
payment_widget_ui.lightbox.spinnerColor | string | Farbe des Ladekreises. Kein Wert voreingestellt. |
childWindow | object | Optionen für das untergeordnete Fenster, welches die Benutzeroberfläche der Pay Station enthält. Wird in der mobilen Version unterstützt. |
childWindow.target | string | Stelle, an welcher das Pay Station-Fenster geöffnet werden soll. Als Wert lässt sich entweder _blank, _self, _parent festlegen. Standardwert ist _blank. |
Das Script ermöglicht Ihnen, die Ereignisse im Zahlungsportal zu verfolgen. Je nach Art des Ereignisses können Sie verschiedene Aktionen auf der Website ausführen.
Liste der Ereignisse:
| Parameter | Beschreibung |
|---|---|
| init | Widget initialisiert. |
| open | Widget geöffnet. |
| load | Zahlungsportal (Pay Station) geladen. |
| close | Zahlungsportal (Pay Station) geschlossen. |
| status | Benutzer befindet sich auf der Statusseite. |
| status-invoice | Benutzer befindet sich auf der Statusseite; Zahlung im Gange. |
| status-delivering | Benutzer befindet sich auf der Statusseite; Zahlung abgeschlossen; Zahlungsbestätigung wurde versendet. |
| status-done | Benutzer befindet sich auf der Statusseite, Zahlung wurde dem Benutzerkonto gutgeschrieben. |
| status-troubled | Benutzer befindet sich auf der Statusseite; Zahlung fehlgeschlagen. |
https://secure.xsolla.com/paystation4/?token=TOKEN.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.access_token enthält personenbezogene Nutzerdaten. Stellen Sie sicher, dass Sie Server-zu-Server-Kommunikation einsetzen, wenn Sie diesen Parameter abrufen.Iframe
So öffnen Sie das Testumgebung in einem iframe:
- Implementieren Sie den
postMessage-Mechanismus, um Zahlungsportal-Ereignisse empfangen zu können. - Öffnen Sie das Zahlungsportal über den folgenden Link:
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, wobeiTOKENder erhaltene Token ist.
Potentielles Problem: Wenn eine Schaltfläche zum Kopieren eines Zahlungsbestätigungscodes, die von manchen Zahlungssystemen verlangt wird, bei der Öffnung der Zahlungs-UI in einem iframe nicht angezeigt wird, übertragen Sie das allow=“clipboard-read; clipboard-write; payment”-Attribut zum iframe.
Beispiel:
- html
<iframe
src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
width="800"
height="700"
allow="clipboard-read; clipboard-write; payment"
></iframe>
Weitere Informationen
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
