Öffnen des Zahlungsportals konfigurieren

Je nach den Einstellungen für die Projektauthentifizierung können Sie eine der folgenden Möglichkeiten verwenden, um das Zahlungsportal zu öffnen:

Achtung
Da die clientseitige Methode, einen Link zum Öffnen des Zahlungsportals zu abzurufen, keine Möglichkeit bietet, die Preise selbst zu verwalten und den Abonnementpreis für einen bestimmten Nutzer festzulegen, sollten Sie sie nicht verwenden, um ein Abonnement mit einer Gebühr gemäß der ersten Zahlung zu verkaufen.
Hinweis
Wenn Sie dem Benutzer erlauben möchten, das Abo-Modell in Ihrem Projekt zu wechseln, müssen Sie das Zahlungsportal entsprechend einrichten. Wenden Sie sich dazu an Ihren Customer Success Manager oder senden Sie eine E-Mail an csm@xsolla.com.

Über den serverseitigen API-Aufruf "Token erstellen"

  1. Implementieren Sie den Abruf eines Tokens, damit beim Öffnen des Zahlungsportals eine der folgenden Seiten angezeigt wird:
  2. Implementieren Sie, worin das Zahlungsportal geöffnet werden soll:

Anzeige der Seite für die Auswahl der Zahlungsmethode

Damit das Zahlungsportal beim Öffnen die Seite zur Auswahl der Zahlungsmethode anzeigt, übermitteln Sie den Parameter purchase.subscription.plan_id samt der ID des ausgewählten Abo-Modells an den API-Aufruf Token erstellen. Übermitteln Sie bei Bedarf die zusätzlichen Parameter für die Anpassung.
Hinweis
Sind in Ihrem Projekt Abo-Modelle mit einer Abonnementgebühr gemäß der ersten Zahlung vorhanden, müssen Sie zusätzlich die folgenden Parameter übermitteln:
  • purchase.checkout.amount – Preis des Abo-Modells
  • purchase.checkout.currency – Währung
Copy
Full screen
Small screen
curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Seite zur Auswahl der Zahlungsmethode (Beispiel):

Anzeige der Seite zur Eingabe der Zahlungsdaten

Damit das Zahlungsportal beim Öffnen die Seite zur Eingabe der Zahlungsdaten anzeigt, übermitteln Sie die folgenden Parameter an den API-Aufruf Token erstellen:
  • purchase.subscription.plan_id samt ID des ausgewählten Abo-Modells.
  • settings.payment_method samt der ID der Zahlungsmethode. Die Liste der IDs finden Sie in Ihrem Projekt im Kundenportal unter Pay Station > Zahlungsarten, oder bitten Sie den Customer Success Manager um Zusendung.
Hinweis
Sind in Ihrem Projekt Abo-Modelle mit einer Abonnementgebühr gemäß der ersten Zahlung vorhanden, müssen Sie zusätzlich die folgenden Parameter übermitteln:
  • purchase.checkout.amount – Preis des Abo-Modells
  • purchase.checkout.currency – Währung
Übermitteln Sie bei Bedarf zusätzliche Parameter für die Anpassung.
Copy
Full screen
Small screen
curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "payment_method": 1380,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Eingabeseite für Zahlungsdaten (Beispiel):

Über clientseitige API-Methode

  1. Implementieren Sie mithilfe der clientseitigen API-Methode den Abruf eines Links zum Öffnen des Zahlungsportals.
  2. Implementieren Sie, worin das Zahlungsportal geöffnet werden soll. Möglich sind:

Clientseitige API-Methode für den Abruf eines Links zum Öffnen des Zahlungsportals

Nutzen Sie aufseiten Ihres Anwendungs-Clients eine HTTP-POST-Anfrage, um das Öffnen des Zahlungsportals zu implementieren: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy.

Die Anfrage muss den Header Authorization: Bearer <client_user_jwt> enthalten, wobei <client_user_jwt> der JSON Web Token (JWT) des Benutzer ist – ein eindeutiger, nach dem Base64-Xsolla-Standard kodierter Token. So rufen Sie den Token ab:

  • Nutzen Sie die API-Aufrufe Register new user und Auth by username, sofern die Autorisierung bei Ihrer Anwendung über Benutzername und Passwort erfolgt.
  • Nutzen Sie den API-Aufruf Auth via social network, sofern die Autorisierung bei Ihrer Anwendung über ein soziales Netzwerk erfolgt.

Geben Sie die Projekt-ID als Pfadparameter projectId an. Sie finden diesen Parameter im Kundenportal neben dem Projektnamen.

Legen Sie country als Abfrageparameter fest – die aus zwei Buchstaben bestehende Bezeichnung des Landes des Nutzers nach der Norm ISO 3166-1 Alpha-2. Beeinflusst die Wahl des Gebietsschemas und der Währung. Wird dieser Parameter nicht übermittelt, wird das Land des Benutzers anhand seiner IP-Adresse ermittelt.

Übermitteln Sie die folgenden Parameter in der Anfrage:

  • plan_external_id, damit beim Öffnen des Zahlungsportals die Seite zur Auswahl der Zahlungsmethode angezeigt wird.

Zahlungsportal (Beispiel):
Zahlungsportal (Beispiel):

Parameter im Anfragerumpf:

ParameterTypBeschreibung
plan_external_id
stringErforderlich. Die external ID des Abo-Modells. Diese finden Sie im Kundenportal unter Subscriptions > Abo-Modelle.
settings
objectBenutzerdefinierte Projekteinstellungen (Objekt).
settings.ui
objectSchnittstellen-Einstellungen (Objekt).
settings.ui.theme
stringZahlungsportal-Theme. Möglich sind default, default_dark oder ID eines benutzerdefinierten Themes.
settings.ui.version
stringGerätetyp. Möglich ist desktop (voreingestellt) oder mobile.
settings.ui.desktop
objectSchnittstellen-Einstellungen für die Desktop-Version (Objekt).
settings.ui.desktop.header
objectEinstellungen für den Header (Objekt).
settings.ui.desktop.header.close_button
booleanLegt fest, ob eine Schließen-Schaltfläche in der Desktop-Version der Pay Station angezeigt wird. Die Schaltfläche schließt die Pay Station und leitet den Benutzer an die im settings.return_url-Parameter angegebene URL weiter. Standardwert ist false.
settings.ui.desktop.header.is_visible
booleanLegt fest, ob der Header im Zahlungsportal angezeigt wird.
settings.ui.desktop.header.type
stringHeader-Erscheinungsbild. Möglich ist compact (in diesem Fall werden der Spielname und die Benutzer-ID nicht im Header angezeigt) oder normal.
booleanFalls true festgelegt ist, wird Ihr Logo im Header angezeigt (senden Sie dazu das Logo als Bilddatei an Ihren Customer Success Manager).
settings.ui.desktop.header.visible_name
booleanLegt fest, ob der Projektname im Header angezeigt wird.
settings.ui.desktop.header.type
stringErscheinungsbild des Headers. Möglich ist compact (Projektname und Benutzer-ID sind ausgeblendet) oder normal (voreingestellt) festlegen.
settings.ui.mobile.header.close_button
booleanLegt fest, ob eine Schließen-Schaltfläche in der mobilen Version der Pay Station angezeigt wird. Die Schaltfläche schließt die Pay Station und leitet den Benutzer an die im settings.return_url-Parameter angegebene URL weiter. Standardwert ist false.
settings.ui.mode
stringBenutzeroberflächenmodus in der Pay Station. Als Wert lässt sich lediglich user_account festlegen: Der Header enthält ausschließlich die Navigationsleiste des Benutzerkontos und der Benutzer kann kein Produkt auswählen oder eine Zahlung tätigen. Dieser Modus ist nur in der Desktop-Version verfügbar.
settings.currency
stringBevorzugte Zahlungswährung. Währungscode, bestehend aus drei Buchstaben gemäß ISO 4217.
settings.external_id
stringTransaktions-ID im Spiel. Eine individuelle ID pro Benutzerzahlung erforderlich.
settings.payment_method
integerID der Zahlungsmethode. Die Liste der Zahlungsmethoden-IDs finden Sie im Kundenportal.
settings.return_url
stringSeite, zu welcher der Benutzer nach der Zahlung weitergeleitet wird. Die folgenden Parameter werden dem Link automatisch hinzugefügt: user_id, foreigninvoice, invoice_id, status.
settings.redirect_policy
objectWeiterleitungsrichtlinien-Einstellungen (Objekt).
settings.redirect_policy.redirect_conditions
stringZahlungsstatus, der einen Benutzer nach erfolgter Zahlung an eine Rückgabe-URL weiterleitet. Möglich ist: none, successful, successful_or_canceled oder any.
settings.redirect_policy.delay
integerVerzögerung (in Sekunden), nach der ein Benutzer automatisch zur Rückgabe-URL weitergeleitet wird.
settings.redirect_policy.status_for_manual_redirection
stringZahlungsstatus, der einen Benutzer nach erfolgter Zahlung an eine Rückgabe-URL weiterleitet. Möglich ist: none, successful, successful_or_canceled oder any.
settings.redirect_policy.redirect_button_caption
stringText auf der Schaltfläche für die manuelle Weiterleitung.
Übermitteln Sie bei Bedarf zusätzliche Parameter für die Anpassung.
Copy
Full screen
Small screen
curl -X 'POST' \
'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

  {
    "plan_external_id": "PlanExternalId",
    "settings": {
      "ui": {
        "size": "large",
        "theme": "string",
        "version": "desktop",
        "desktop": {
          "header": {
            "is_visible": true,
            "visible_logo": true,
            "visible_name": true,
            "type": "compact",
            "close_button": true
          }
        },
        "mobile": {
          "mode": "saved_accounts",
          "footer": {
            "is_visible": true
          },
          "header": {
            "close_button": true
          }
        },
        "mode": "user_account"
        }
      },
      "currency": "string",
      "locale": "string",
      "external_id": "string",
      "payment_method": 1,
      "return_url": "string",
      "redirect_policy": {
        "redirect_conditions": "none",
        "delay": 0,
        "status_for_manual_redirection": "none",
        "redirect_button_caption": "string"
      }
    }
Copy
Full screen
Small screen
    {
      "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
    }
    

    Mit Pay Station Embed

    Fügen Sie Ihrer Webseite ein Skript hinzu, welches das Zahlungsportal-Widget öffnet. Eine vollständige Beschreibung des Skripts finden Sie im GitHub-Repository.

    BEISPIEL: ASYNCHRONES LADEN VON SCRIPTEN

    Copy
    Full screen
    Small screen
    <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.

    Script-Initialisierungsparameter:

    ParameterTypBeschreibung
    access_token
    stringToken, empfangen über den serverseitigen API-Aufruf “Token erstellen” oder – sofern der clientseitige API-Aufruf genutzt wird – in einem Link. Erforderlich.
    sandbox
    booleanStellen Sie den Wert des Parameters auf true, um den Zahlungsvorgang auszutesten: Anstelle von sandbox-secure.xsolla.com wird secure.xsolla.com verwendet.
    lightbox
    objectLightbox-Parameter (Objekt; nur für die Desktop-Version).
    payment_widget_ui.lightbox.width
    stringRahmenhö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
    stringRahmenhö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
    integerDefiniert die Stapelanordnung. Standardwert ist 1000.
    payment_widget_ui.lightbox.overlayOpacity
    integerDeckkraft des Widget-Hintergrunds (0 – völlig transparent, 1 – völlig undurchsichtig). Der Standardwert ist 60 % (.6).
    payment_widget_ui.lightbox.overlayBackground
    stringHintergrundfarbe der Einblendung. Standardwert ist #000000.
    payment_widget_ui.lightbox.modal
    booleanFalls true festgelegt ist, kann der Lightbox-Rahmen nicht geschlossen werden. Standardwert ist false.
    lightbox.closeByClick
    booleanFalls true festgelegt ist, wird die Lightbox durch Klick auf die Einblendung geschlossen. Standardwert ist true.
    lightbox.closeByKeyboard
    booleanFalls true festgelegt ist, wird die Lightbox durch Drücken der Escape-Taste geschlossen. Standardwert ist true.
    payment_widget_ui.lightbox.contentBackground
    stringHintergrundfarbe 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
    stringBreite des Rahmens. Standardwert ist 10px.
    payment_widget_ui.lightbox.spinner
    stringArt der animierten Ladeanzeige. Als Wert lässt sich entweder xsolla oder round festlegen. Standardwert ist xsolla.
    payment_widget_ui.lightbox.spinnerColor
    stringFarbe des Ladekreises. Kein Wert voreingestellt.
    childWindow
    objectOptionen für das untergeordnete Fenster, welches die Benutzeroberfläche der Pay Station enthält. Wird in der mobilen Version unterstützt.
    childWindow.target
    stringStelle, an welcher das Pay Station-Fenster geöffnet werden soll. Als Wert lässt sich entweder _blank, _self, _parent festlegen. Standardwert ist _blank.
    Nutzen Sie den folgenden Link, um das Öffnen des Zahlungsportals zu initialisieren: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, wobei ACCESS_TOKEN der Token ist, den Sie beim Abruf der Methode Token erstellen erhalten haben. Sie können auch einen vorgefertigten Link samt Token erhalten, implementieren Sie dazu die Client-Methode zum Öffnen des Zahlungsportals.
    Hinweis
    Für das Aufrufen des Zahlungsportals muss zwingend der Präfix https verwendet werden.
    Für Testzwecke steht Ihnen die folgende URL zur Verfügung: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.
    Achtung
    Der Parameter access_token enthält personenbezogene Nutzerdaten. Stellen Sie sicher, dass Sie Server-zu-Server-Kommunikation einsetzen, wenn Sie diesen Parameter abrufen.

    In einem Iframe

    Sie müssen Ihrerseits folgende Mechanismen implementieren:

    • Prüfung des Gerätetyps (Desktop oder mobiles Endgerät) und Übermittlung innerhalb des settings.ui.version-Tokenparameters.
    • Abrufen von Ereignissen aus dem Zahlungsportal via postMessage. Diese Ereignisse können an Analytics-Systeme gesendet werden. Um die Verarbeitung von Ereignissen in Ihrem Analytics-System einzurichten, wenden Sie sich an Ihren Customer Success Manager oder senden Sie eine E-Mail an csm@xsolla.com.

    Nutzen Sie zum Öffnen des Zahlungsportals in einem iframe den folgenden Link: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, wobei ACCESS_TOKEN der Token ist, den Sie beim Abruf der Methode Token erstellen erhalten haben. Sie können auch einen vorgefertigten Link samt Token erhalten, implementieren Sie dazu die Client-Methode zum Öffnen des Zahlungsportals.

    Zu Testzwecken können Sie diese URL nutzen: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

    In einem neuen Fenster

    Nutzen Sie zum Öffnen des Zahlungsportals in einem neuen Fenster den folgenden Link: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, wobei ACCESS_TOKEN der Token ist, den Sie beim Abruf der Methode Token erstellen erhalten haben. Sie können auch einen vorgefertigten Link samt Token erhalten, implementieren Sie dazu die clientseitige Methode zum Öffnen des Zahlungsportals.

    Zu Testzwecken können Sie diese URL nutzen: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

    War dieser Artikel hilfreich?
    Vielen Dank!
    Gibt es etwas, das wir verbessern können? Nachricht
    Das tut uns leid
    Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
    Vielen Dank für Ihr Feedback!
    Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
    Letztmalig aktualisiert: 30. September 2024

    Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

    Problem melden
    Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
    Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
    Vielen Dank für Ihr Feedback!