Zahlungsportal öffnen

Je nach den Einstellungen für die Projektauthentifizierung können Sie das Zahlungsportal wie folgt öffnen:

• über den API-Aufruf Token erstellen, sofern Sie Ihr eigenes Autorisierungssystem in Ihrer Anwendung verwenden.
• über die Client-API-Aufrufe, sofern Sie in Ihrem Projekt Xsolla-Login verwenden.

Über den API-Aufruf "Token erstellen"

1. Implementieren Sie den Abruf eines Tokens, damit beim Öffnen des Zahlungsportals eine der folgenden Seiten angezeigt wird:
   • Seite zur Auswahl der Zahlungsmethode
   • Seite zur Eingabe der Zahlungsdaten
   • Seite zur Verwaltung von Abonnements und Zahlungskonten
2. Implementieren Sie, worin das Zahlungsportal geöffnet werden soll:
   • Pay Station Embed-Skript
   • Iframe
   • Neues Fenster

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.

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 ID der Zahlungsmethode. Die Liste der IDs finden Sie in Ihrem Projekt im Kundenportal unter Bezahlstation > Zahlungsarten, oder bitten Sie den Account Manager um Zusendung.

Übermitteln Sie bei Bedarf die zusätzlichen Parameter für die Anpassung.

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):

Anzeige der Seite zur Verwaltung von Abonnements und Zahlungskonten

Damit das Zahlungsportal beim Öffnen die Seite zur Verwaltung von Abonnements und Zahlungskonten anzeigt, übermitteln Sie den Parameter settings.ui.mode = user_account an den API-Aufruf Token erstellen.

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
        }
    },
    "settings": {
      "project_id": 146026,
      "language": "en",
      "currency": "USD",
      "ui": {
          "mode": "user_account",
          "theme": "default_dark",
          "desktop": {
             "subscription_list": {
               "layout": "grid"
             }
           }
         }
    }
  }

Seite zur Verwaltung von Abonnements und Zahlungskonten (Beispiel):

Über Client-API-Methoden

1. Damit beim Öffnen des Zahlungsportals eine der folgenden Seiten angezeigt wird, müssen Sie die Client-Methoden implementieren:
   • Seite zur Auswahl der Zahlungsmethode oder zur Eingabe der Zahlungsdaten
   • Seite zur Verwaltung von Abonnements und Zahlungskonten
2. Implementieren Sie, worin das Zahlungsportal geöffnet werden soll. Möglich sind:
   • Pay Station Embed-Skript
   • Iframe
   • Neues Fenster

Anzeige der Seite für die Auswahl der Zahlungsmethode oder für die Eingabe der Zahlungsdaten

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 project ID als Pfadparameter 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):

• plan_external_id und settings.payment_method, damit beim Öffnen des Zahlungsportals die Eingabeseite für die Zahlungsdaten angezeigt wird.

Zahlungsportal (Beispiel):

Parameter im Anfragerumpf:

Ü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>"
}

Anzeige der Seite zur Verwaltung von Abonnements und Zahlungskonten

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/manage.

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 project ID als Pfadparameter 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 bei Bedarf die zusätzlichen Parameter für die Anpassung.

Parameter im Anfragerumpf:

Ü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/manage?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'
{
  "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": "str",
    "locale": "st",
    "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>"
}

Zahlungsportal (Beispiel):

Personalisierung

Im Zahlungsportal lässt sich Folgendes anpassen:

• Das voreingestellte helle Theme lässt sich in ein dunkles Theme ändern, indem Sie den Parameter settings.ui.theme = default_dark an den API-Aufruf Token erstellen oder an die Client-Methode zum Öffnen des Zahlungsportals übermitteln. Wird dieser Parameter nicht übermittelt, wird standardmäßig das helle Theme verwendet.

Zahlungsportal mit dunklem Theme:

Beispielhafte Tokenanfrage für ein dunkles Theme:

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"
    "ui": {
       "theme": "default_dark"
    }
  }
}
'

• Platzieren Sie Ihre eigene Beschreibung der Abo-Modelle. Übermitteln Sie dazu den Beschreibungstext im Parameter ui.desktop.subscription_list.description an den API-Aufruf Token erstellen.

Zahlungsportal (Beispiel):

Beispielhafte Tokenanfrage für ein helles Theme samt Bereich für die Abonnementverwaltung und Beschreibung der Abo-Modelle:

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",
    "ui": {
       "desktop": {
         "subscription_list": {
           "description": "Your Description"
         }
       },
        "user_account": {
          "subscriptions": {
              "order": 1,
              "enable": true
          }
        }
      }
    }
}
'

• Ändern Sie die Standardansicht der Abonnementliste in eine alternative Rasteransicht. Übermitteln Sie dazu den Parameter settings.ui.desktop.subscription_list.layout = grid an den API-Aufruf Token erstellen. Der Parameter hat standardmäßig den Wert list.

Zahlungsportal (Beispiel):

Beispielhafte Tokenanfrage für eine alternative Ansicht der Abonnementliste:

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": 111111,
    "currency": "USD",
    "ui": {
       "desktop": {
         "subscription_list": {
           "layout": "grid"
         }
       }
    }
  }
}
'

Weitere Informationen zur Anpassung und den dafür verwendeten Parametern finden Sie in der Anleitung So passen Sie die Bezahlstation an.

Mit Pay Station Embed

BEISPIEL: ASYNCHRONES LADEN VON SCRIPTEN

<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:

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:

Nutzen Sie den folgenden Link, um das Öffnen des Zahlungsportals zu initialisieren: https://secure.xsolla.com/paystation3/?access_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.

Für Testzwecke steht Ihnen folgende URL zur Verfügung: https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

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 Account Manager oder senden Sie eine E-Mail an am@xsolla.com.

Nutzen Sie zum Öffnen des Zahlungsportals in einem iframe den folgenden Link: https://secure.xsolla.com/paystation3/?access_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/paystation3/?access_token=ACCESS_TOKEN.

In einem neuen Fenster

Nutzen Sie zum Öffnen des Zahlungsportals in einem neuen Fenster den folgenden Link: https://secure.xsolla.com/paystation3/?access_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/paystation3/?access_token=ACCESS_TOKEN.