Katalogbenutzeroberfläche erstellen
Die Katalogbenutzeroberlfäche lässt sich auf drei Wege erstellen:
- mithilfe einer eigenen Benutzeroberfläche
- mithilfe der Xsolla-Bezahlstation
- mithilfe des Xsolla-Website-Baukastens
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.
Xsolla-Login und clientseitige API-Aufrufe
So implementieren Sie einen Katalog:
- Abrufen einer Liste von Abo-Modelle mit Client-Methoden:
- Wenn in Ihrem Projekt abonnementbasierte Produkte konfiguriert sind, verwenden Sie die clientseitige Methode zum Abruf der Abo-Modelle nach Produkten
- Wenn in Ihrem Projekt keine abonnementbasierten Produkte konfiguriert sind, verwenden Sie die clientseitige Methode zum Abruf der Liste der Abo-Modelle
- 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 undAuth 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:
Parameter | Typ | Beschreibung |
---|---|---|
plan_id | array of integers | ID des Abo-Modells. |
| array of strings | External 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. |
| integer | Begrenzung der Elementanzahl auf der Seite. Standardmäßig werden 15 Elemente angezeigt. |
| integer | Elementnummer, aus der die Liste generiert wird. Die Zählung beginnt standardmäßig bei 0. |
| string | Sprache 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. |
| string | Code 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. |
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'
- js
{
"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 undAuth 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:
Parameter | Typ | Beschreibung |
---|---|---|
plan_id | array of integers | ID des Abo-Modells. |
| array of strings | External 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. |
| integer | Begrenzung der Elementanzahl auf der Seite. Standardmäßig werden 15 Elemente angezeigt. |
| integer | Elementnummer, aus der die Liste generiert wird. Die Zählung beginnt standardmäßig bei 0. |
| string | Sprache 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. |
| string | Code 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. |
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'
- js
{
"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:
- 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
unduser.email
. - Implementieren Sie, dass das Zahlungsportals in Pay Station Embed, einem iframe oder einem neuen Fenster geöffnet wird.
- js
{
"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 undAuth 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:
Parameter | Typ | Beschreibung |
---|---|---|
| string | Erforderlich. Die external ID des Abo-Modells. Diese finden Sie im Kundenportal unter Abonnements > Abo-Modelle. |
| object | Benutzerdefinierte Projekteinstellungen (Objekt). |
| object | Schnittstellen-Einstellungen (Objekt). |
| string | Größe des Zahlungsportals. Folgende Größen sind möglich:
|
| string | Theme des Zahlungsportals. Möglich ist default oder default_dark . |
| string | Gerätetyp. Möglich ist desktop (voreingestellt) oder mobile . |
| object | Schnittstellen-Einstellungen für die Desktop-Version (Objekt). |
| object | Einstellungen für den Header (Objekt). |
| boolean | Legt 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 . |
| boolean | Legt fest, ob der Header im Zahlungsportal angezeigt wird. |
| string | Header-Erscheinungsbild. Möglich ist compact (in diesem Fall werden der Spielname und die Benutzer-ID nicht im Header angezeigt) oder normal . |
| boolean | Falls true festgelegt ist, wird Ihr Logo im Header angezeigt (senden Sie dazu das Logo als Bilddatei an Ihren Account Manager). |
| boolean | Legt fest, ob der Projektname im Header angezeigt wird. |
| string | Erscheinungsbild des Headers. Möglich ist compact (Projektname und Benutzer-ID sind ausgeblendet) oder normal (voreingestellt) festlegen. |
| string | Ein Benutzer kann nur mit seinen gespeicherten Zahlungsmethoden bezahlen. Möglich ist saved_accounts . |
| boolean | Legt fest, ob der Footer in der mobilen Version des Zahlungsportals ausgeblendet ist. |
| boolean | Legt 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 . |
| string | Link zur EULA. |
| string | Benutzeroberflä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. |
| object | Details zum Benutzerkonto (Objekt). |
| object | Untermenü Historie. |
| integer | Ob 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. |
| integer | Die Position des Abschnitts im Drop-down-Menü im Zahlungsportal. |
| object | Seite Mein Konto. |
| integer | Die Position des Abschnitts im Drop-down-Menü im Zahlungsportal. |
| boolean | Ob 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. |
| object | Untermenü Meine Zahlungskonten. |
| integer | Die Position des Abschnitts im Drop-down-Menü im Zahlungsportal. |
| boolean | Ob das Untermenü angezeigt wird. Möglich ist true oder false . Wird der Parameter nicht übermittelt, wird der Abschnitt angezeigt. |
| object | Untermenü Abonnements verwalten. |
| boolean | Ob 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 | integer | Die Position des Abschnitts im Drop-down-Menü im Zahlungsportal. |
| string | Bevorzugte Zahlungswährung. Währungscode, bestehend aus drei Buchstaben gemäß ISO 4217. |
| string | Transaktions-ID im Spiel. Eine individuelle ID pro Benutzerzahlung erforderlich. |
| integer | ID der Zahlungsmethode. Die Liste mit den Zahlungsmethoden-IDs erhalten Sie im Kundenportal oder über den API-Aufruf Zahlungsarten abrufen. |
| string | Seite, zu welcher der Benutzer nach der Zahlung weitergeleitet wird. Die folgenden Parameter werden dem Link automatisch hinzugefügt: user_id , foreigninvoice , invoice_id , status . |
| object | Weiterleitungsrichtlinien-Einstellungen (Objekt). |
| string | Zahlungsstatus, 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 | integer | Verzögerung (in Sekunden), nach der ein Benutzer automatisch zur Rückgabe-URL weitergeleitet wird. |
| string | Zahlungsstatus, der einen Benutzer nach erfolgter Zahlung an eine Rückgabe-URL weiterleitet. Möglich ist: none , successful , successful_or_canceled oder any . |
| string | Text auf der Schaltfläche für die manuelle Weiterleitung. |
Übermitteln Sie bei Bedarf die zusätzlichen Parameter für die Anpassung.
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"
}
}
}
{
"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.

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