Shop in Spiel integrieren

Nachdem Sie Waren (virtuelle Gegenstände, virtuelle Währung, Bundles, Schlüssel) im Kundenportal erstellt und konfiguriert haben, erweitern Sie Ihr Spiel um einen Ingame-Shop:

1. Implementieren Sie die Anzeige des Artikelkatalogs.
2. Implementieren Sie die Logik für den Verkauf von Artikeln.

Artikelkatalog anzeigen

Implementieren Sie die Anzeige des Artikelkatalogs über die In-Game Store-API-Aufrufe:

Artikel verkaufen

Artikel lassen sich auf folgende Arten verkaufen:

1. Schnellkauf eines Artikels. Dabei können Sie eine SKU in beliebiger Menge verkaufen (z. B. 100 identische Tränke oder eine eigens festgelegte Menge virtueller Währung).
2. Warenkorb kaufen. Dabei kann der Spieler einen Warenkorb zusammenstellen, anschließend Artikel hinzufügen oder entfernen oder Mengen ändern.

Schnellkauf

Warenkorbkauf

1. Warenkorb zusammenstellen und Token abrufen:
   • Im Client – Wenn Sie den Warenkorb selbst in Ihre Anwendung implementieren möchten.
   • Auf dem Server – Wenn Sie die Lösung von Xsolla (In-Game Store-API-Aufrufe) verwenden möchten, um den Warenkorb zu verwalten.
2. Zahlungsportal öffnen.

Warenkorb im Client zusammenstellen und kaufen

Implementieren Sie die Logik für das Hinzufügen und Entfernen von Artikeln selbst. Bedenken Sie außerdem, dass Sie vor dem für die Zusammenstellung eines Warenkorbs nötigen API-Aufruf keine Infos darüber haben, welche Werbeaktionen auf den Kauf angewendet werden. Das heißt die Gesamtkosten und die hinzugefügten Bonusartikel sind nicht bekannt.

1. Nachdem der Spieler einen Warenkorb zusammengestellt hat, rufen Sie den API-Aufruf Fill cart with items auf. Die aktuellen Informationen über die ausgewählten Artikel (Preise mit und ohne Rabatt, Bonusartikel) werden in der Antwort übermittelt.
2. Rufen Sie den API-Aufruf Create order with all items from current cart auf. Die Bestell-ID und der Zahlungstoken werden in der Antwort übermittelt. Die angelegte Bestellung erhält den Status Neu.
3. Öffnen Sie das Zahlungsportal.

Warenkorb auf dem Server zusammenstellen und kaufen

Bei dieser Variante kann die Zusammenstellung des Warenkorbs länger dauern, da jede Änderung des Warenkorbs einen API-Aufruf erfordert.

Führen Sie die folgenden Schritte aus:

1. Warenkorb ändern:
   • Um einen Artikel hinzuzufügen oder die Artikelmenge zu ändern, rufen Sie den API-Aufruf Update cart item by card ID auf.
   • Um einen Artikel zu entfernen, rufen Sie den API-Aufruf Delete cart item by card ID auf.

2. Rufen Sie den API-Aufruf Create order with all items from the current cart auf. Die Bestell-ID und der Zahlungstoken werden in der Antwort übermittelt. Die angelegte Bestellung erhält den Status Neu.
3. Öffnen Sie das Zahlungsportal.

Zahlungsportal öffnen

Öffnen Sie zum Bezahlen von Artikeln das Zahlungsportal. Ein Token für das Öffnen des Zahlungsportals wird in der API-Antwort Create order with all items from current cart übermittelt.

Implementieren Sie das Öffnen des Zahlungsportals. Es stehen zwei Möglichkeiten zur Auswahl:

• In einem neuen Fenster. Nutzen Sie folgenden Link, um das Zahlungsportal in einem neuen Browser-Fenster zu öffnen: https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, wobei ACCESS_TOKEN dem Token entspricht, den Sie beim Anlegen der Bestellung erhalten haben.
• Über das Widget. Nutzen Sie dafür das Xsolla-Zahlungsportal-Widget-Skript (Anweisungen in der README-Datei).

Zahlungsvorgang testen

Sie können den Zahlungsvorgang in der Testumgebung testen. Dabei können Sie eine Testbankkarte und ein beliebiges Konto verwenden.

Benutzerbestellstatus abrufen

Sie können Benutzerbestellstatus auf eine der folgenden Weisen abrufen:

1. serverseitig über Webhooks
2. clientseitig über die WebSocket API oder die IGS API

Benutzerbestellstatus serverseitig über Webhooks abrufen

Benutzerbestellstatus clientseitig über die WebSocket API oder die IGS API abrufen

1. WebSocket API
2. Short-polling

Bestellstatus mithilfe der WebSocket API clientseitig abrufen

Die Lösung verwendet Websockets, um den Bestellstatus abzurufen, ohne detaillierte Informationen über die Bestellung zu erhalten. Diese Methode ist vorzuziehen, da nur eine Verbindung zwischen dem Client (z. B. Ihrer Website oder App) und dem Xsolla-Server hergestellt wird und somit die Auslastung des Clients oder des Servers nicht weiter steigt.

Gehen Sie wie folgt vor:

1. Damit der Xsolla-Websocket-Server und Ihr Client die Bestellstatusmeldungen erkennen können, müssen Sie eine Verbindung herstellen:

const client = new Centrifuge(
connectionURL,
{
data: {
  user_external_id: user_external_id,
  auth: auth,
  project_id: project_id
}
}
)
connectionURL - wss://ws-store.xsolla.com/connection/websocket
auth - user JWT token

2. Abonnieren Sie die Ereignisse mithilfe der Funktion client.on, um neue Meldungen über den Bestellstatus zu erhalten:

client.on('publication', (ctx) => {
   //handle the status
});

3. Triggern Sie die eigentliche Verbindungsherstellung:

client.connect()

4. Nutzen Sie die history method der API, um den Bestellstatus-Änderungsverlauf zu erhalten:

client.on('subscribed', function (ctx) {
   client.history(ctx.channel, { limit: -1, since: { offset: 0 }, reverse: false }).then(function (resp) {
resp.publications.forEach((ctx) => {
   /handle the status
});

   }, function (err) {
       //handle the status
   });
});

Nachrichtenrumpf (Beispiel):

{
order_id: 59614241,
status: 'new'
}

Folgende Bestellstatus sind möglich:

• New – Bestellung angelegt, aber noch nicht bezahlt
• Paid – Bestellung bezahlt
• Done – Bestellung ausgeliefert (alle Belege gesendet, Auslieferung durch Xsolla, externe Plattformen usw. ist erfolgt)
• Canceled – Bestellung ist storniert und die Zahlung wurde dem Nutzer erstattet

Der Zeitbedarf für eine Antwort über den Websocket beträgt fünf Minuten. Danach oder bei Problemen mit dem Websocket wird empfohlen, ein Short-polling zu verwenden.

Short-polling

Nutzen Sie den API-Aufruf Bestellung abrufen, um nach einer Bestellstatusänderung detaillierte Informationen über die Artikel in der Bestellung zu erhalten.