Katalogbenutzeroberfläche erstellen

Die Katalogbenutzeroberlfäche lässt sich auf drei Wege erstellen:

Mithilfe einer eigenen Benutzeroberfläche

Beim Anlegen eines Verzeichnisses in Ihrer eigenen Benutzeroberfläche können Sie:

  • einen eigenen Datenspeicher und eine beliebige Autorisierungsoption nutzen. Implementieren Sie in diesem Fall die Katalogbenutzeroberfläche Ihrerseits.
  • Ihre eigene Autorisierungsmethode und die Servermethode Abo-Modelle abrufen nutzen. Implementieren Sie die Katalogbenutzeroberfläche Ihrerseits, nachdem Sie die Liste der Abo-Modelle abgerufen haben.
  • Xsolla-Login und clientseitige API-Aufrufe.
Hinweis
Ebenso können Sie die SDK-Bibliotheken nutzen und damit einen Katalog in Ihrer eigenen Benutzeroberfläche implementieren. Vorgefertigte Bibliotheken erleichtern es, Xsolla-Produkte in Ihr Projekt zu integrieren, weil sie sofort einsetzbare Datenstrukturen und Methoden für die Arbeit mit der Xsolla-API bereitstellen.

Xsolla-Login und clientseitige API-Aufrufe

So implementieren Sie einen Katalog:

  1. Abrufen einer Liste von Abo-Modelle mit Client-Methoden:
  2. Die empfangene Liste der Abo-Modelle muss in der Benutzeroberfläche angezeigt werden; implementieren Sie diesen Vorgang.

Clientseitige Methode zum Abrufen der Abo-Modelle nach Produkten

Nutzen Sie aufseiten Ihres Anwendungs-Clients eine HTTP GET-Anfrage, um den Abruf der Liste der Abo-Modelle zu implementieren: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans.

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.

Als Pfadparameter angeben:

  • projectId – Projekt-ID. Diesen Parameter finden Sie im Kundenportal neben dem Projektnamen.
  • productID – ID des abonnementbasierten Produkts. Wenden Sie sich dazu an Ihren Account Manager.

Als Abfrageparameter angeben:

ParameterTypBeschreibung
plan_id
array of integersID des Abo-Modells.
plan_external_id
array of stringsExternal ID des Abo-Modells. Diese finden Sie im Kundenportal unter Abonnements > Abo-Modelle > Ihr Abo-Modell oder indem Sie den API-Aufruf Abo-Modelle abrufen nutzen.
limit
integerBegrenzung der Elementanzahl auf der Seite. Standardmäßig werden 15 Elemente angezeigt.
offset
integerElementnummer, aus der die Liste generiert wird. Die Zählung beginnt standardmäßig bei 0.
locale
stringSprache der Benutzeroberfläche, Code bestehend aus zwei Kleinbuchstaben gemäß ISO 639-1. Wird dieser Parameter nicht übermittelt, wird die Sprache anhand der IP-Adresse des Benutzer bestimmt.
country
stringCode bestehend aus zwei Buchstaben gemäß ISO 3166-1 Alpha-2. Dient dazu, das Land des Benutzers zu bestimmen. Dieser Parameter wirkt sich auf die Wahl des Gebietsschemas und der Währung aus. Wird dieser Parameter nicht übermittelt, wird das Land des Benutzers anhand seiner IP-Adresse bestimmt.
Copy
Full screen
Small screen

    curl -X 'GET' \
    'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans?country=RU  ' \
      -H 'accept: application/json' \
      -H 'Authorization: Bearer client_user_jwt'

    Copy
    Full screen
    Small screen

    {
      "items": [
        {
          "plan_id": 54321,
          "plan_external_id": "PlanExternalId",
          "plan_group_id": "TestGroupId",
          "plan_type": "all",
          "plan_name": "Localized plan name",
          "plan_description": "Localized plan description",
          "plan_start_date": "2021-04-11T13:51:02+03:00",
          "plan_end_date": "2031-04-11T13:51:02+03:00",
          "trial_period": 7,
          "period": {
            "value": 1,
            "unit": "month"
          },
          "charge": {
            "amount": 4.99,
            "setup_fee": 0.99,
            "currency": "USD"
          },
          "promotion": {
            "promotion_charge_amount": 3.99,
            "promotion_remaining_charges": 3
          }
        }
      ],
      "has_more": false
    }
    

    Clientseitige Methode für den Abruf der Liste der Abo-Modelle

    Nutzen Sie aufseiten Ihres Anwendungs-Clients eine HTTP GET-Anfrage, um den Abruf der Liste der Abo-Modelle zu implementieren: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans.

    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.

    Als Abfrageparameter angeben:

    ParameterTypBeschreibung
    plan_id
    array of integersID des Abo-Modells.
    plan_external_id
    array of stringsExternal ID des Abo-Modells. Diese finden Sie im Kundenportal unter Abonnements > Abo-Modelle > Ihr Abo-Modell oder indem Sie den API-Aufruf Abo-Modelle abrufen nutzen.
    limit
    integerBegrenzung der Elementanzahl auf der Seite. Standardmäßig werden 15 Elemente angezeigt.
    offset
    integerElementnummer, aus der die Liste generiert wird. Die Zählung beginnt standardmäßig bei 0.
    locale
    stringSprache der Benutzeroberfläche, Code bestehend aus zwei Kleinbuchstaben gemäß ISO 639-1. Wird dieser Parameter nicht übermittelt, wird die Sprache anhand der IP-Adresse des Benutzer bestimmt.
    country
    stringCode bestehend aus zwei Buchstaben gemäß ISO 3166-1 Alpha-2. Dient dazu, das Land des Benutzers zu bestimmen. Dieser Parameter wirkt sich auf die Wahl des Gebietsschemas und der Währung aus. Wird dieser Parameter nicht übermittelt, wird das Land des Benutzers anhand seiner IP-Adresse bestimmt.
    Copy
    Full screen
    Small screen

      curl -X 'GET' \
      'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans?country=RU  ' \
        -H 'accept: application/json' \
        -H 'Authorization: Bearer client_user_jwt'
        

      Copy
      Full screen
      Small screen

      {
        "items": [
          {
            "plan_id": 54321,
            "plan_external_id": "PlanExternalId",
            "plan_group_id": "TestGroupId",
            "plan_type": "all",
            "plan_name": "Localized plan name",
            "plan_description": "Localized plan description",
            "plan_start_date": "2021-04-11T13:51:02+03:00",
            "plan_end_date": "2031-04-11T13:51:02+03:00",
            "trial_period": 7,
            "period": {
              "value": 1,
              "unit": "month"
            },
            "charge": {
              "amount": 4.99,
              "setup_fee": 0.99,
              "currency": "USD"
            },
            "promotion": {
              "promotion_charge_amount": 3.99,
              "promotion_remaining_charges": 3
            }
          }
        ],
        "has_more": false
      }
      

      Mithilfe der Xsolla-Bezahlstation

      Wie ein Katalog im Zahlungsportal erstellt wird, hängt von den Autorisierungseinstellungen Ihres Projekts ab:

      Eigenes Autorisierungssystem

      Wenn Ihre Anwendung ein eigenes Berechtigungssystem verwendet:

      1. Implementieren Sie, dass der Token über den API-Aufruf Token erstellen abgerufen wird. Übermitteln Sie in der Anfrage die Benutzerinformationen in den Parametern user.id und user.email.
      2. Implementieren Sie, dass das Zahlungsportals in Pay Station Embed, einem iframe oder einem neuen Fenster geöffnet wird.
      Copy
      Full screen
      Small screen

      {
          "user": {
              "id": {
                  "value": "1234567",
                  "hidden": true
              }
          },
          "settings": {
              "project_id": 123456,
              "language": "en",
              "currency": "USD"
          }
      }
      

      Xsolla-Login

      Sofern Xsolla-Login in Ihrem Projekt eingerichtet ist:

      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.

      Parameter im Anfragerumpf:

      ParameterTypBeschreibung
      plan_external_id
      stringErforderlich. Die external ID des Abo-Modells. Diese finden Sie im Kundenportal unter Abonnements > Abo-Modelle.
      settings
      objectBenutzerdefinierte Projekteinstellungen (Objekt).
      settings.ui
      objectSchnittstellen-Einstellungen (Objekt).
      settings.ui.size
      stringGröße des Zahlungsportals. Folgende Größen sind möglich:
      • small: die kleinstmögliche Größe des Zahlungsportals. Verwenden Sie diese, wenn die Fenstergröße begrenzt ist (Abmessungen: 620 x 630)
      • medium: empfohlene Größe. Verwenden Sie diese, um das Zahlungsportal in einer Lightbox darzustellen (Abmessungen: 820 x 840)
      • large: optimal für die Anzeige des Zahlungsportals in einem neuen Fenster/Registerkarte (Abmessungen: 820 x 840)
      settings.ui.theme
      stringTheme des Zahlungsportals. Möglich ist default oder default_dark.
      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 Bezahlstation angezeigt wird. Die Schaltfläche schließt die Bezahlstation 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.is_visible.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 Account 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.mode
      stringEin Benutzer kann nur mit seinen gespeicherten Zahlungsmethoden bezahlen. Möglich ist saved_accounts.
      booleanLegt fest, ob der Footer in der mobilen Version des Zahlungsportals ausgeblendet ist.
      settings.ui.mobile.header.close_button
      booleanLegt fest, ob eine Schließen-Schaltfläche in der mobilen Version der Bezahlstation angezeigt wird. Die Schaltfläche schließt die Bezahlstation und leitet den Benutzer an die im settings.return_url-Parameter angegebene URL weiter. Standardwert ist false.
      settings.ui.license_url
      stringLink zur EULA.
      settings.ui.mode
      stringBenutzeroberflächenmodus in der Bezahlstation. 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.ui.user_account
      objectDetails zum Benutzerkonto (Objekt).
      settings.ui.user_account.history
      objectUntermenü Historie.
      settings.ui.user_account.history.enable
      integerOb der Abschnitt im Drop-down-Menü des Zahlungsportals angezeigt wird. Möglich ist true oder false. Wird der Parameter nicht übermittelt, wird der Abschnitt nicht angezeigt.
      settings.ui.user_account.history.order
      integerDie Position des Abschnitts im Drop-down-Menü im Zahlungsportal.
      settings.ui.user_account.info
      objectSeite Mein Konto.
      settings.ui.user_account.info.order
      integerDie Position des Abschnitts im Drop-down-Menü im Zahlungsportal.
      settings.ui.user_account.info.enable
      booleanOb der Abschnitt im Drop-down-Menü des Zahlungsportals angezeigt wird. Möglich ist true oder false. Wird der Parameter nicht übermittelt, wird der Abschnitt nicht angezeigt.
      settings.ui.user_account.payment_accounts
      objectUntermenü Meine Zahlungskonten.
      settings.ui.user_account.payment_accounts.order
      integerDie Position des Abschnitts im Drop-down-Menü im Zahlungsportal.
      settings.ui.user_account.payment_accounts.enable
      booleanOb das Untermenü angezeigt wird. Möglich ist true oder false. Wird der Parameter nicht übermittelt, wird der Abschnitt angezeigt.
      settings.ui.user_account.subscriptions
      objectUntermenü Abonnements verwalten.
      settings.ui.user_account.subscriptions.enable
      booleanOb das Untermenü angezeigt wird. Möglich ist true oder false. Wird der Parameter nicht übermittelt, wird der Abschnitt angezeigt.
      settings.ui.user_account.subscriptions.order
      integerDie Position des Abschnitts im Drop-down-Menü im Zahlungsportal.
      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 mit den Zahlungsmethoden-IDs erhalten Sie im Kundenportal oder über den API-Aufruf Zahlungsarten abrufen.
      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 die zusätzlichen 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
                }
              },
              "license_url": "string",
              "mode": "user_account",
              "user_account": {
                "history": {
                  "enable": true,
                  "order": 1
                },
                "payment_accounts": {
                  "enable": true,
                  "order": 1
                },
                "info": {
                  "enable": true,
                  "order": 1
                },
                "subscriptions": {
                  "enable": true,
                  "order": 1
                }
              }
            },
            "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>"
          }

          Beispiel für die Anzeige des Abonnementkatalogs in der Xsolla-Bezahlstation:

          Mithilfe des Xsolla-Website-Baukastens

          Mit dem Website-Baukasten von Xsolla können Sie eine Website erstellen und darüber Abonnements verkaufen. Verwenden Sie dazu die Webshop-Vorlage. Mehr über das Konfigurieren von Rollen erfahren Sie in der Anleitung Webshop mit Benutzerauthentifizierung.

          Ihr Fortschritt
          Vielen Dank für Ihr Feedback!
          Letztmalig aktualisiert: 14. Februar 2023

          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!