So nutzen Sie Pay Station in Kombination mit der PlayFab-Authentifizierung

Wenn Sie in Ihrer Anwendung bereits eine auf PlayFab beruhende Benutzerauthentifizierung implementiert haben, können Sie bei PlayFab einen Zahlungstoken generieren und ihn dann an den Anwendungs-Client übermitteln, um das Zahlungsportal zu öffnen.

Bei dieser Integrationsoption müssen Sie die Logik, gemäß der das Land des Nutzers und die entsprechende Zahlungswährung ermittelt wird, selbst implementieren.

Integrationsablauf:

1. Projekt erstellen:

1. Registrieren Sie sich im Kundenportal, und erstellen Sie ein neues Projekt. Im weiteren Verlauf dieser Anleitung benötigen Sie die ID des erstellten Projekts.

2. Katalog einrichten:
   • Erstellen Sie einen Artikelkatalog bei Xsolla. Sie können Artikel manuell hinzufügen oder diese aus Google Play oder PlayFab importieren.
   • Implementieren Sie mithilfe des SDK, dass der Artikelkatalog aufseiten des Anwendungs-Clients abgerufen und angezeigt wird.

3. Artikelverkauf einrichten:
   • Legen Sie mithilfe eines PlayFab-Cloud-Skripts eine Bestellung mit Nutzer- und Artikeldaten aufseiten des Anwendung-Clients an.
   • Implementieren Sie mithilfe des SDK, dass das Zahlungsportal aufseiten des Anwendungs-Clients geöffnet wird.

4. Richten Sie das Bestellstatus-Tracking ein.

Projekt erstellen

Im Kundenportal registrieren

Das Kundenportal ist das wichtigste Tool für die Konfiguration der Xsolla-Funktionen und auch für die Arbeit mit Analytics und Transaktionen unerlässlich.

Die bei der Registrierung angegebenen Daten zu Ihrer Firma und zu Ihrer Anwendung dienen dazu, eine Entwurfsfassung der Xsolla-Lizenzvereinbarung zu erstellen und für Sie geeignete Lösungen vorzuschlagen. Sie können die Daten später ändern, allerdings verkürzt sich die Dauer bis zur Lizenzvereinbarungsunterzeichnung, wenn Sie bei der Registrierung korrekte Angaben machen.

Wechseln Sie zum Kundenportal, und erstellen Sie ein Konto, um sich zu registrieren.

Projekt im Kundenportal erstellen

Wenn Sie mehrere Anwendungen haben, empfehlen wir Ihnen, für jede Anwendung ein eigenes Projekt zu erstellen. Auf der Grundlage der bei der Projekterstellung angegebenen Daten generiert Xsolla Empfehlungen und schlägt für Sie geeignete Lösungen vor.

So erstellen Sie ein neues Projekt:

1. Öffnen Sie das Kundenportal.
2. Klicken Sie in der Seitenleiste auf Projekt erstellen.

3. Vergeben Sie einen englischen Namen für Ihr Projekt (erforderlich).

4. Wählen Sie eine oder mehrere Release-Plattformen für Ihr Spiel aus (erforderlich).
5. Geben Sie einen Link zu Ihrem Spiel ein. Wenn Ihr Spiel noch keine Website hat, geben Sie einen Link zu einer Quelle ein, die Informationen über das Spiel enthält (erforderlich).
6. Wählen Sie die Spiel-Engine aus.
7. Wählen Sie die Monetarisierungsoptionen, die Sie verwenden oder planen zu verwenden.
8. Geben Sie an, ob das Spiel bereits veröffentlicht wurde. Wenn das Spiel noch nicht veröffentlicht wurde, geben Sie den geplanten Release-Termin an.
9. Klicken Sie auf Projekt erstellen.

Während des Integrationsprozesses benötigen Sie die Projekt-ID. Diese wird im Kundenportal neben dem Projektnamen angezeigt.

Katalog einrichten

Artikel im Kundenportal erstellen

So erstellen Sie einen virtuellen Gegenstand im Katalog:

1. Öffnen Sie Ihr Projekt im Kundenportal.
2. Klicken Sie in der Seitenleiste auf Store.
3. Klicken Sie bei Virtuelle Gegenstände auf Verknüpfen.
4. Wählen Sie in der Drop-down-Liste den Menüpunkt Artikel anlegen.

5. Legen Sie die Grundeinstellungen des Artikels fest:
   • Bild (optional)
   • SKU (individuelle Artikel-ID)
   • Gegenstandsname 
   • Beschreibung (optional)

6. Legen Sie den Artikelpreis fest:
   1. Stellen Sie den Schalter Preise in echter Währung auf Ein.
   2. Im Feld Standard-Währung können Sie wahlweise die Währung ändern. Legen Sie den Artikelpreis fest.
   3. Sollten Sie die Währung im Feld Standard-Währung geändert haben, müssen Sie unter Preis in echter Währung dieselbe Währung auswählen.

7. Ändern Sie den Artikelstatus in Verfügbar.

8. Klicken Sie auf Artikel anlegen.

Katalog aufseiten des Anwendungs-Clients anzeigen

1. Laden Sie das SDK aus CDN oder GitHub herunter.
2. Entpacken Sie das Archiv.
3. Navigieren Sie im Hauptmenü zu Assets > Import Package > Custom Package, und wählen Sie das heruntergeladene SDK aus.
4. Navigieren Sie im Hauptmenü zu Window > Xsolla > Edit Settings.
5. Wechseln Sie zum Inspector-Fenster. Geben Sie im Feld Project ID die Projekt-ID an. Diese wird im Kundenportal neben dem Namen Ihres Projekts angezeigt.

6. Erstellen Sie aufseiten des Anwendungs-Clients eine Benutzeroberfläche, auf der der Produktkatalog angezeigt werden kann.
7. Implementieren Sie, dass der Artikelkatalog von Xsolla-Servern abgerufen wird.

Artikelverkauf einrichten

Um eine Bestellung mit Nutzer- und Artikeldaten bei Xsolla anzulegen, müssen Sie das Projekt um eine Cloud-Funktion ergänzen, die den API-Aufruf Zahlungstoken für den Kauf erstellen verwendet. Dieser Aufruf gibt einen Zahlungstoken zurück. Dieser ist erforderlich, um das Zahlungsportal zu öffnen und einen Kauf zu tätigen.

Einschränkungen:

• Sie müssen entweder das Land des Nutzers oder die dessen IP-Adresse übermitteln, wenn Sie den Zahlungstoken anfordern.
• Wenn Sie keine Währung im Token angeben, bestimmt das Land die Währung.
• Wenn Sie die Währung im Token angeben, zahlt der Nutzer in dieser Währung.

Cloud-Skript Ihrem Projekt hinzufügen

1. Öffnen Sie Visual Studio Code, und navigieren Sie zur Registerkarte Azure.
2. Klicken Sie unter Workspace auf das +-Symbol, und wählen Sie Create Function.

3. Wählen Sie das neue Projektverzeichnis aus. Es erscheint ein Menü zum Erstellen eines neuen Projekts mit einer Auswahl an Einstellungen.

4. Legen Sie die neuen Projekteinstellungen fest:
   1. Wählen Sie eine Sprache für Ihr Funktionsprojekt aus – C#.
   2. Wählen Sie eine .NET-Laufzeitumgebung aus – .NET 8.0 Isolated (LTS).
   3. Wählen Sie eine Vorlage für die erste Funktion Ihres Projekts aus – HTTP trigger.
   4. Vergeben Sie einen Funktionsnamen – GetXsollaPaymentToken.
   5. Geben Sie einen Namespace ein – My.Functions.
   6. Wählen Sie die Autorisierungsstufe aus – Anonymous.
   7. Wählen Sie aus, wie Ihr Projekt geöffnet werden soll – Open in current window.

1. Daraufhin generiert Visual Studio Code ein C#-Projekt und öffnet die generierte Datei GetXsollaPaymentToken.cs.

5. Modifizieren Sie die Datei GetXsollaPaymentToken.cs:

using System.Text;
using System.Net.Http.Headers;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;

namespace My.Function
{
    public class GetXsollaPaymentToken
    {
        private readonly ILogger<GetXsollaPaymentToken> _logger;

        private const int PROJECT_ID = ""; // Your Xsolla project ID
        private const string API_KEY = ""; // Your Xsolla API key

        public GetXsollaPaymentToken(ILogger<GetXsollaPaymentToken> logger)
        {
            _logger = logger;
        }

        [Function("GetXsollaPaymentToken")]
        public async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequest req)
        {
            _logger.LogInformation("GetXsollaPaymentToken function processed a request.");

            // Reading the request body
            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            _logger.LogInformation("Request body: " + requestBody);

            // Deserializing request body JSON
            dynamic data = JsonConvert.DeserializeObject(requestBody);

            // Extracting necessary data from JSON
            string uid = data.FunctionArgument.uid;
            string sku = data.FunctionArgument.sku;
            string returnUrl = data.FunctionArgument.returnUrl;

            // Creating payload for Xsolla API
            var payload = new
            {
                user = new
                {
                    id = new { value = uid },
                    country = new { value = "US", allow_modify = false }
                },
                purchase = new
                {
                    items = new[]
                    {
                        new { sku = sku, quantity = 1 }
                    }
                },
                sandbox = true,
                settings = new
                {
                    language = "en",
                    currency = "USD",
                    return_url = returnUrl,
                    ui = new { theme = "63295aab2e47fab76f7708e3" }
                }
            };

            // Constructing Xsolla API URL
            string url = $"https://store.xsolla.com/api/v3/project/{PROJECT_ID}/admin/payment/token";

            // Sending request to Xsolla API
            using (HttpClient client = new HttpClient())
            {
                // Adding authorization header
                string headerValue = Convert.ToBase64String(Encoding.UTF8.GetBytes($"{PROJECT_ID}:{API_KEY}"));
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", headerValue);

                // Serializing payload to JSON
                var jsonPayload = JsonConvert.SerializeObject(payload);
                var content = new StringContent(jsonPayload, Encoding.UTF8, "application/json");

                // Making POST request to Xsolla API
                var xsollaRes = await client.PostAsync(url, content);

                // Checking response from Xsolla API
                if (xsollaRes.IsSuccessStatusCode)
                {
                    // Reading successful response content
                    string responseContent = await xsollaRes.Content.ReadAsStringAsync();
                    return new OkObjectResult(responseContent);
                }
                else
                {
                    // Returning status code in case of failure
                    return new StatusCodeResult((int)xsollaRes.StatusCode);
                }
            }
        }
    }
}

1. Geben Sie in dem Skript die Werte für die Konstanten an:

1. • PROJECT_ID – Projekt-ID, diese wird im Kundenportal neben dem Projektnamen angezeigt.

1. • API_KEY – API-Schlüssel. Wird im Kundenportal nur einmal angezeigt, nämlich dann, wenn er erstellt wird. Sie sind selbst dafür verantwortlich, den Schlüssel zu speichern. Einen neuen Schlüssel können Sie in den folgenden Abschnitten erstellen:
     • Firmeneinstellungen > API-Schlüssel
     • Projekteinstellungen > API-Schlüssel

Nachdem Sie das Cloud-Skript hinzugefügt haben, können Sie den Aufruf der Funktion GetXsollaPaymentToken lokal testen.

Cloud-Skript bereitstellen

1. Navigieren Sie in Visual Studio Code zu Azure > Resources, und klicken Sie auf das +-Symbol.
2. Wählen Sie Create Function App in Azure als Ressource aus. Es erscheint ein Menü zum Erstellen einer neuen Anwendung mit einer Auswahl an Einstellungen.
3. Legen Sie die Anwendungseinstellungen fest:

1. 1. Benennen Sie die neue Funktions-App – XsollaFunctions.
   2. Wählen Sie einen Laufzeit-Stack aus – .NET 8 Isolated.
   3. Wählen Sie einen Ort für neue Ressourcen aus (Sie können eine beliebige Option auswählen).

1. Warten Sie, bis die Ressourcengruppe erstellt ist.

4. Wählen Sie in der Liste der Ressourcen die Option XsollaFunctions aus, öffnen Sie das Kontextmenü, und wählen Sie Deply to Function App aus.

Nachdem Sie das Cloud-Skript hinzugefügt haben, können Sie den Aufruf der Funktion GetXsollaPaymentToken remote testen.

Cloud-Skript testen

Rufen Sie die Funktion GetXsollaPaymentToken mit Postman oder einem anderen Tool auf, um das Cloud-Skript (lokal oder remote) zu testen. Gehen Sie dazu wie folgt vor:

1. Navigieren Sie in Visual Studio Code zu Azure > Workspace > Local Project > Functions, und klicken Sie auf Start debugging to update this list.
2. Öffnen Sie das Kontextmenü für die Funktion , und wählen Sie Copy Function Url aus. Erfolgt der Test lokal, sieht die URL wie folgt aus – http://localhost:7071/api/getXsollaPaymentToken. Erfolgt der Test remote, sieht die URL wie folgt aus – https://xsollafunctions.azurewebsites.net/api/GetXsollaPaymentToken.

3. Verwenden Sie die kopierte URL, um die Funktion mit den angegebenen Parametern aufzurufen. So rufen Sie eine Funktion aus Postman auf:
   1. Erstellen Sie eine neue GET-Anfrage.
   2. Geben Sie die in Schritt 2 kopierte URL an.
   3. Wechseln Sie zur Registerkarte Body, und geben Sie die Anfrageparameter an.

Anfragerumpf (Beispiel):

{

 "FunctionArgument": {

   "uid": "1D384D9EF12EAB8B",

   "sku": "booster_max_1",

   "returnUrl": "https://login.xsolla.com/api/blank"

 }

}

4. Klicken Sie auf Send. Die Antwort sollte ein JSON mit den folgenden Parametern enthalten:
   • token – Zahlungstoken. Ist zum Öffnen des Zahlungsportals erforderlich.
   • order_id – ID der angelegten Bestellung. Ist zum Tracken des Bestellstatus erforderlich.

Antwortrumpf (Beispiel):

{"token":"xsnpCF8tS4ox7quoibgTgPFVFxG9gTvS_lc_en_bg_2C2640_tb_6E7BF7","order_id":90288613}

Funktion für den Abruf eines Zahlungstokens in PlayFab registrieren

1. Öffnen Sie Ihr Projekt in PlayFab.
2. Klicken Sie in der Seitenleiste auf Automation.
3. Klicken Sie unter Register New Cloud Script Function auf Register Function.
4. Benennen Sie die Funktion – GetXsollaPaymentToken.
5. Fügen Sie die Funktions-URL ein, die Sie in Visual Code Studio kopiert haben (siehe Schritte 1–2 unter Cloud-Skript testen).

Bestellung anlegen und Zahlungsportal im Unity-Projekt öffnen

1. Öffnen Sie Ihr Unity-Projekt.
2. Erstellen Sie das Skript XsollaPlayfabSample.cs mit dem folgenden Inhalt:

using System;
using PlayFab;
using PlayFab.ClientModels;
using PlayFab.CloudScriptModels;
using UnityEngine;
using Xsolla.Core;

public class XsollaPlayfabSample : MonoBehaviour
{
    private void Start()
    {
        // Logging in anonymously
        LoginAnonymous(
            // Callback function invoked after successful login
            userId => {
                // Requesting Xsolla payment token
                GetXsollaPaymentToken(
                    userId, // PlayFab user ID received after login
                    "booster_max_1", // SKU of the product
                    orderData => {
                        // Creating Xsolla token and opening purchase UI
                        XsollaToken.Create(orderData.token);
                        XsollaWebBrowser.OpenPurchaseUI(orderData.token);

                        // Adding order for tracking
                        OrderTrackingService.AddOrderForTracking(
                            orderData.order_id,
                            true,
                            () => Debug.Log("Payment completed"),
                            onError => Debug.LogError(onError.errorMessage));
                    });
            });
    }

    private static void LoginAnonymous(Action<string> onSuccess)
    {
        // Logging in with custom ID
        PlayFabClientAPI.LoginWithCustomID(
            new LoginWithCustomIDRequest {
                CustomId = SystemInfo.deviceUniqueIdentifier, // Unique ID generated based on the device
                CreateAccount = true
            },
            result => {
                // Logging the result
                Debug.Log("Logged with playfab id: " + result.PlayFabId);

                // Invoking onSuccess callback with PlayFab ID
                onSuccess?.Invoke(result.PlayFabId);
            },
            error => { Debug.LogError(error.GenerateErrorReport()); }); // Handling login error
    }

    private static void GetXsollaPaymentToken(string userId, string sku, Action<OrderData> onSuccess)
    {
        // Creating request data for Xsolla payment token
        var tokenRequestData = new PaymentTokenRequestData {
            uid = userId, // User ID
            sku = sku, // Product SKU
            returnUrl = $"app://xpayment.{Application.identifier}" // Return URL
        };

        // Executing a function in the PlayFab cloud to get payment token
        PlayFabCloudScriptAPI.ExecuteFunction(
            new ExecuteFunctionRequest {
                FunctionName = "GetXsollaPaymentToken", // Name of Azure function
                FunctionParameter = tokenRequestData, // Data passed to the function
                GeneratePlayStreamEvent = false // Setting true if call should show up in PlayStream
            },
            result => {
                // Logging the result
                Debug.Log($"GetXsollaPaymentToken result: {result.FunctionResult}");

                // Parsing JSON result to OrderData object
                OrderData orderData = JsonUtility.FromJson<OrderData>(result.FunctionResult.ToString());

                // Invoking onSuccess callback with order data
                onSuccess?.Invoke(orderData);
            },
            error => Debug.LogError($"Error: {error.GenerateErrorReport()}")); // Handling error
    }

    // Class for payment token request data
    public class PaymentTokenRequestData
    {
        public string uid; // User ID
        public string sku; // Product SKU
        public string returnUrl; // Return URL
    }
}

3. Erstellen Sie eine neue Szene.
4. Erstellen Sie ein leeres GameObject. Navigieren Sie dazu im Hauptmenü zu GameObject > Create Empty.

5. Fügen Sie dem GameObject ein Skript hinzu:
   1. Wählen Sie im Hierarchy-Fenster das Objekt aus.
   2. Klicken Sie im Inspector-Fenster auf Add Component, und wählen Sie das Skript XsollaPlayfabSample aus.

6. Öffnen Sie im Hierarchy-Fenster das Kontextmenü, und navigieren Sie zu UI > EventSystem.

Führen Sie die Szene aus, indem Sie auf Play klicken, um eine Bestellung testweise anzulegen. Daraufhin sollte das Zahlungsportal mitsamt den Bestellinformationen angezeigt werden.

Der Quellcode für das Unity-Projekt ist auf GitHub verfügbar.

Bestellstatus-Tracking einrichten

Der Bestellstatus muss getrackt werden, um sicherzustellen, dass die Zahlung erfolgreich war, und um dem Nutzer die entsprechenden Artikel zu gewähren.

Bestellstatus clientseitig abrufen

Die Logik für das Bestell-Tracking ist in der Methode GetXsollaPaymentToken enthalten. Um einen erfolgreichen Kauf zu verarbeiten, müssen Sie eine Funktion übermitteln, die aufgerufen wird, wenn der Bestellstatus auf done springt.

Das Tracking erfolgt mithilfe der SDK-Methode AddOrderForTracking. Ausführliche Informationen zur Funktionsweise dieser Methode finden Sie unter Bestellstatus tracken.

Bestellstatus serverseitig abrufen

So konfigurieren Sie Webhooks bei Xsolla:

1. Öffnen Sie Ihr Projekt im Kundenportal.
2. Klicken Sie in der Seitenleiste auf Projekteinstellungen, und navigieren Sie zur Registerkarte Webhooks.
3. Geben Sie im Feld Webhook-Server die URL ein, an die Xsolla die Webhooks senden soll.

4. Kopieren und speichern Sie den Wert aus dem Feld Geheimer Schlüssel. Dieser Schlüssel wird standardmäßig generiert und dient dazu, Webhooks zu signieren. Wenn Sie ihn ändern möchten, klicken Sie auf das Aktualisieren-Symbol.
5. Klicken Sie auf Webhooks aktivieren.