SDK aufseiten der Anwendung integrieren
Allgemeine Informationen
- Gestalten Sie eine Benutzeroberfläche für das Anmeldesystem, den Ingame-Shop und sonstige Seiten Ihrer Anwendung.
- Implementieren Sie mithilfe von SDK-Methoden in Ihrer Anwendung eine Logik für die Benutzerauthentifizierung, die Shop-Anzeige, den Kaufvorgang und mehr.
Schnellstart
Nachfolgend ist schrittweise erläutert, wie sich das Szenario eines Ingame-Kaufs am einfachsten implementieren lässt.
Interaktionsablauf:
- Der Nutzer startet das Spiel.
- Die Anwendung startet das Xsolla-Login-Web-Widget.
- Der Nutzer meldet sich beim Spiel an und wechselt in den Artikelkatalog.
- Die Anwendung fordert den Artikelkatalog von Xsolla an.
- Nachdem die Artikeldaten erfolgreich empfangen wurden, zeigt die Anwendung den Artikelkatalog an.
- Der Nutzer klickt bei dem gewünschten Artikel auf die Kaufen-Schaltfläche.
- Die Anwendung initiiert den Kaufvorgang und zeigt das Zahlungsportal im Browser an.
- Der Nutzer zahlt.
- Die Anwendung schließt das Zahlungsportal und übermittelt die Zahlungsdaten an Xsolla.
- Die Anwendung schreibt die Ergebnisse der Zahlungsabwicklung in das Protokoll.
Sequenzdiagramm für die Interaktion zwischen Ihrer Anwendung (Skript StoreController
) und dem SDK:
Szenariobeschränkungen:
- Das fertige Xsolla-Login-Web-Widget wird für die Benutzerautorisierung verwendet. Xsolla stellt standardmäßige Widget-Vorlagen bereit. Deren Optik und Inhalte sind durch die für Ihr Projekt gewählte Anmeldemethode und die Widget-Anpassungseinstellungen im Kundenportal bestimmt.
- In diesem Szenario werden Artikel nur gegen echte Währung verkauft, ohne Verwendung eines Warenkorbs, d. h., der Nutzer kann nur einen Artikel kaufen.
Artikel-Widget-Skript erstellen
Erstellen Sie ein neues Skript namens VirtualItemWidget
:
- Öffnen Sie Ihr Projekt im Unity-Editor.
- Navigieren Sie im Hauptmenü zu
Assets > Create > C# Script . - Vergeben Sie der neuen Datei im Ordner
Assets den NamenVirtualItemWidget
. - Öffnen Sie die erstellte Datei im Editor, und fügen Sie den folgenden Code ein:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Xsolla.Example
{
public class VirtualItemWidget : MonoBehaviour
{
public Image IconImage;
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Button BuyButton;
}
}
- Speichern Sie die Änderungen.
Prefab für Artikel-Widget erstellen
Gestalten Sie die Benutzeroberfläche (UI) für die Anzeige eines Artikels im Shop:
- Erstellen Sie ein
Canvas
-Objekt für die Anzeige von UI-Elementen. Navigieren Sie dazu im Hauptmenü zuGameObject > UI > Canvas . Daraufhin werden die folgenden Objekte in der Szene erstellt:- Das Objekt
Canvas
mitsamt den KomponentenCanvas
,Canvas Scaler
undGraphic Raycaster
. - Das Objekt
EventSystem
, sofern ein solches Objekt in der Szene noch nicht existiert.
- Das Objekt
- Erstellen Sie das untergeordnete Objekt
VirtualItemWidget
:- Wählen Sie im
Hierarchy -Fenster dasCanvas
-Objekt aus. - Navigieren Sie im Hauptmenü zu
GameObject > UI > Image . Daraufhin wird ein neues Spielobjekt erstellt, hierbei handelt es sich um ein untergeordnetes Objekt vonCanvas
. - Benennen Sie das erstellte Objekt in
VirtualItemWidget
um.
- Wählen Sie im
- Fügen Sie UI-Objekte für die Anzeige von Artikelinformationen hinzu:
- Erstellen Sie ein Objekt für die Anzeige des Widget-Symbols:
- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Navigieren Sie im Hauptmenü zu
GameObject > UI > Image . - Benennen Sie das erstellte Objekt in
IconImage
um.
- Wählen Sie im
- Erstellen Sie ein Objekt für die Anzeige des Artikelnamens:
- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Navigieren Sie im Hauptmenü zu
GameObject > UI > Legacy > Text . - Benennen Sie das erstellte Objekt in
NameText
um.
- Wählen Sie im
- Erstellen Sie ein Objekt für die Anzeige der Artikelbeschreibung:
- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Navigieren Sie im Hauptmenü zu
GameObject > UI > Legacy > Text . - Benennen Sie das erstellte Objekt in
DescriptionText
um.
- Wählen Sie im
- Erstellen Sie ein Objekt für die Schaltfläche, über die der Artikel gekauft werden kann.
- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Navigieren Sie im Hauptmenü zu
GameObject > UI > Legacy > Button . Daraufhin wird ein Schaltflächen-Objekt mitsamt dem untergeordneten ObjektText
erstellt. - Benennen Sie das erstellte Objekt in
BuyButton
um. - Benennen Sie das Objekt
Text
inPriceText
um.
- Wählen Sie im
- Erstellen Sie ein Objekt für die Anzeige des Widget-Symbols:
- Fügen Sie das Artikel-Widget-Skript dem Objekt
VirtualItemWidget
als Komponente hinzu:- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie das SkriptVirtualItemWidget
aus.
- Wählen Sie im
- Weisen Sie den entsprechenden Skript-Slots die UI-Elemente zu:
- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Ziehen Sie die untergeordneten UI-Objekte per Drag-and-drop aus dem
Hierarchy -Fenster insInspector -Fenster, und legen Sie die Elemente auf den entsprechenden Slots der KomponenteVirtualItemWidget
ab.
- Wählen Sie im
- Konvertieren Sie das erstellte
VirtualItemWidget
-Objekt in ein Prefab:- Wählen Sie im
Hierarchy -Fenster dasVirtualItemWidget
-Objekt aus. - Ziehen Sie das Objekt per Drag-and-drop in das
Project -Fenster im OrdnerAssets . Daraufhin erscheint ein neues Objekt im OrdnerAssets , und das Objekt in der Szene ändert seine Farbe in Blau.
- Wählen Sie im
Prefab für das Artikel-Widget (Beispiel):
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/item-widget.png)
Shop-Skript erstellen
Erstellen Sie ein neues Skript namens StoreController
:
- Öffnen Sie Ihr Projekt im Unity-Editor.
- Navigieren Sie im Hauptmenü zu
Assets > Create > C# Script . - Vergeben Sie der neuen Datei im Ordner
Assets den NamenStoreController
. - Öffnen Sie die erstellte Datei im Editor, und fügen Sie den folgenden Code ein:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
namespace Xsolla.Example
{
public class StoreController : MonoBehaviour
{
[SerializeField] private VirtualItemWidget WidgetPrefab;
[SerializeField] private Transform WidgetsContainer;
private void Start()
{
StartAuthorization();
}
private void StartAuthorization()
{
Debug.Log("Start the authorization process with the Xsolla Login Widget");
XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
}
private void OnAuthSuccess()
{
Debug.Log("Authorization successful");
Debug.Log("Get the catalog of virtual items");
XsollaCatalog.GetItems(OnCatalogReceived, OnError);
}
private void OnCatalogReceived(StoreItems items)
{
Debug.Log("Catalog received successfully");
BuildStoreUI(items.items);
}
private void BuildStoreUI(StoreItem[] items)
{
// Create a widget for each item in the catalog
foreach (var item in items)
{
// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
if (item.price == null)
continue;
// Instantiate a widget prefab
var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
// Fill the widget with data
widget.NameText.text = item.name;
widget.DescriptionText.text = item.description;
widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
// Loading the item image and assigning it to the UI element
ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
// Add a click listener to the Buy button
widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
}
}
private void StartPurchase(string sku)
{
Debug.Log($"Start the purchase process for the item: {sku}");
XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
}
private void OnPurchaseCompleted(OrderStatus status)
{
Debug.Log("Purchase completed");
}
private void OnError(Error error)
{
Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
- Speichern Sie die Änderungen.
Shop-Objekt erstellen
Erstellen Sie die Benutzeroberfläche für die Anzeige einer Artikelliste im Shop:
- Fügen Sie eine Komponente hinzu, die die Widgets einzelner Artikel in einem Raster anordnet und die Position und Größe verschachtelter Objekte steuert. Gehen Sie dazu wie folgt vor:
- Wählen Sie im
Hierarchy -Fenster dasCanvas
-Objekt aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie das SkriptGrid Layout Group
aus. - Ändern Sie im
Inspector -Fenster bei Bedarf die Komponenteneinstellungen: Legen Sie die Zellengröße, den Abstand usw. fest.
- Wählen Sie im
VirtualItemWidget
-Objekts anzulegen. So können Sie das allgemeine Layout Ihres Shops sofort begutachten.- Fügen Sie das Shop-Skript dem Objekt
Canvas
als Komponente hinzu:- Wählen Sie im
Hierarchy -Fenster dasCanvas
-Objekt aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie das SkriptStoreController
aus.
- Wählen Sie im
- Weisen Sie den entsprechenden Slots des Skripts
StoreController
die Elemente zu:- Wählen Sie im
Hierarchy -Fenster dasCanvas
-Objekt aus. - Ziehen Sie das
Canvas
-Objekt per Drag-and-drop aus demHierarchy -Fenster auf den SlotWidgetsContainer imInspector -Fenster. - Ziehen Sie das
VirtualItemWidget
-Objekt per Drag-and-drop aus demHierarchy -Fenster auf den SlotWidgetPrefab imInspector -Fenster.
- Wählen Sie im
Shop-Objekt (Beispiel):
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/store-layout.png)
Shop starten und testen
Starten Sie den Shop im Unity-Editor, und prüfen Sie die Funktionalität:
- Löschen Sie alle untergeordneten Objekte des
Canvas
-Objekts. - Klicken Sie auf
Play . Daraufhin öffnet sich beim Start der Anwendung das Xsolla-Login-Widget in einem Browserfenster.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-log-in.png)
- Melden Sie sich bei der Anwendung an. Nach erfolgreicher Benutzerautorisierung fordert die Anwendung den Artikelkatalog von Xsolla an. Nach erfolgreichem Erhalt der Artikeldaten erstellt die Anwendung die erforderlichen Widgets. Anschließend wird eine Liste der Shop-Artikel angezeigt.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-catalog.png)
- Klicken Sie auf die Kaufen-Schaltfläche in einem der Artikel-Widgets. Die Anwendung initiiert den Kaufvorgang und zeigt das Zahlungsportal im Browser an.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-payment-ui.png)
- Schließen Sie den Bezahlvorgang ab. Zum Bezahlen können Sie Testkarten verwenden. Nach dem erfolgreichen Kauf wird im Protokoll die Meldung
Purchase completed
angezeigt.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-purchase-complete.png)
Nützliche Links
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.