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/paystation3/?access_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/paystation3/?access_token=TOKEN
, wobei TOKEN
der erhaltene Token ist.
https://secure.xsolla.com/paystation3/?access_token=TOKEN
.Das Zahlungsportal lässt sich auch auf andere Wege öffnen:
- 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
<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 Account Manager oder senden Sie eine E-Mail an am@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). |
lightbox.width | string | Rahmenhöhe der Lightbox. Falls als Wert null festgelegt ist, wird die Höhe der Bezahlstation verwendet. Standardwert ist null . |
lightbox.height | string | Rahmenhöhe der Lightbox. Falls als Wert null festgelegt ist, wird die Höhe der Bezahlstation verwendet. Standardwert ist 100% . |
lightbox.zIndex | integer | Definiert die Stapelanordnung. Standardwert ist 1000 . |
lightbox.overlayOpacity | integer | Deckkraft der Einblendung (0 bis 1). Standardwert ist .6 . |
lightbox.overlayBackground | string | Hintergrundfarbe der Einblendung. Standardwert ist #000000 . |
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 . |
lightbox.contentBackground | string | Hintergrundfarbe des Rahmens. Standardwert ist #ffffff . Beachten Sie, dass diese Farbänderungen keinen Einfluss auf den iframe der Bezahlstation selbst haben, sondern nur auf die Einstellungen der Lightbox, in dem der iframe angezeigt wird. |
lightbox.contentMargin | string | Breite des Rahmens. Standardwert ist 10px . |
lightbox.spinner | string | Art der animierten Ladeanzeige. Als Wert lässt sich entweder xsolla oder round festlegen. Standardwert ist xsolla . |
lightbox.spinnerColor | string | Farbe des Ladekreises. Kein Wert voreingestellt. |
childWindow | object | Optionen für das untergeordnete Fenster, welches die Benutzeroberfläche der Bezahlstation enthält. Wird in der mobilen Version unterstützt. |
childWindow.target | string | Stelle, an welcher das Bezahlstation-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 (Bezahlstation) geladen. |
close | Zahlungsportal (Bezahlstation) 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. |
Wenn Sie den Ladevorgang für das Zahlungsportal initialisieren möchten, verwenden Sie den folgenden Link: https://secure.xsolla.com/paystation3/?access_token=TOKEN
.
Für Testzwecke steht Ihnen die folgende URL zur Verfügung: https://sandbox-secure.xsolla.com/paystation3/?access_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 Zahlungsportal in einem iframe:
- Implementieren Sie den
postMessage
-Mechanismus, um Ereignisse aus dem Zahlungsportal empfangen zu können. - Rufen Sie beim Anlegen einer Bestellung einen Token ab, nutzen Sie dazu die API-Aufrufe aus der Gruppe Zahlung. Übermitteln Sie in der Anfrage:
- den Gerätetyp (Desktop oder Mobile) im Parameter
settings.ui.version
- die Größe des Zahlungsportals im Parameter
settings.ui.size
:
- den Gerätetyp (Desktop oder Mobile) im Parameter
Bezahlstation-Größe | Iframe-Breite |
---|---|
Groß (Standard) | 670–850 px |
Mittel | 590–740 px |
Klein | 510–630 px |
- Öffnen Sie das Zahlungsportal über den Link
https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN
, wobeiTOKEN
der erhaltene Token ist.
Weitere Informationen
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.