Zahlungsportal öffnen
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
BEISPIEL: ASYNCHRONES LADEN VON SCRIPTEN
- html
1<script>
2 var options = {
3 access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
4 sandbox: true //TODO please do not forget to remove this setting when going live
5 };
6 var s = document.createElement('script');
7 s.type = "text/javascript";
8 s.async = true;
9 s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10 s.addEventListener('load', function (e) {
11 XPayStationWidget.init(options);
12 }, false);
13 var head = document.getElementsByTagName('head')[0];
14 head.appendChild(s);
15</script>
16
17<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 [email protected].
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
Wir raten davon ab, das Zahlungsportal in einem iframe zu öffnen, da hierbei folgende Probleme auftreten können:
- Fehlschlagen der “3-D Secure”-Prüfung aufgrund von Einschränkungen durch die Content Security Policy (CSP)
- mögliche Probleme mit der Leistung des Zahlungsportals in WebView oder in Apps
- zusätzliche Konfiguration nötig für One-Click-Zahlungen und den Zugriff auf die Zwischenablage
Um die beschriebenen Probleme zu vermeiden, sollten Sie das Zahlungsportal in einem neuen Fenster oder mit “Pay Station Embed” öffnen.
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
1<iframe
2 src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
3 width="800"
4 height="930"
5 allow="clipboard-read; clipboard-write; payment"
6></iframe>
Weitere Informationen
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
