Verkauf von Spielschlüsseln einrichten

Es ist möglich, Spielschlüssel über einen Direktlink, die Shop-Benutzeroberfläche oder ein Widget zu verkaufen.

Der folgende Link öffnet das Zahlungsportal:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}

Hinweis

Der Kauf von Spielschlüsseln gegen echte Währung über einen Direktlink ist nur nach Unterzeichnung der Xsolla-Lizenzvereinbarung möglich. Navigieren Sie dazu im Kundenportal zu Finanzen > Lizenzvereinbarungen, füllen Sie das Formular aus, und warten Sie auf die Bestätigung. Die Prüfung der Vereinbarung kann bis zu drei Geschäftstage dauern.

Zahlungen können Sie in der Testumgebung testen, ergänzen Sie dazu den Link um den Parameter mode=sandbox.

Ergänzen Sie den Link um folgende Daten:

  • YOUR-ITEM-TYPE – Artikeltyp:
    • game – Spiel; game_key – Spiel auf einer bestimmten Plattform.
    • bundle – Bundle.
  • YOUR-PROJECT-ID – ID Ihres Projekts aus dem Kundeportal, siehe Projekteinstellungen > Allgemeine Einstellungen > Projekt-ID.
  • YOUR-ITEM-SKU – SKU des Spielschlüsselpakets. Verwenden Sie die Methode Spieleliste abrufen (normalerweise sieht diese SKU wie folgt aus: unit_name_drm_sku), um die SKU abzurufen und ein Spiel auf einer bestimmten Plattform zu verkaufen.

  • Zahlungsportal-Stil: Theme (dunkel oder hell, letzteres ist voreingestellt), Größe und sonstige Parameter. Spezifizieren Sie den Parameter ui_settings in der URL, und übermitteln Sie ein settings.ui-JSON-Objekt mit einer Base64-Kodierung als Wert. Beispielhafte URL mit Benutzeroberflächeneinstellungen:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

  • Token zur Übermittlung von Benutzerdaten. Dient nur dazu, Spielschlüssel an authentifizierte Benutzer zu verkaufen. Dieser Token hängt von der Authentifizierungsmethode ab. Beispielhafte URL mit einem Token:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

  • Der Parameter mode=sandbox für Testzahlungen. Sie können Testbankkarten zum Abschließen der Zahlungen verwenden.

Hinweis
Beim Zahlen sendet der Xsolla-Server eine Anfrage an die Webhook-URL, um zu überprüfen, ob der Benutzer im Spiel existiert. Um Fehlermeldungen bei Testzahlungen zu vermeiden, navigieren Sie zu Kundenportal > Projekteinstellungen > Webhooks, und stellen Sie den Schalter auf AUS. Wenn Sie Webhooks verwenden möchten, implementieren Sie die erfolgreiche Verarbeitung eines Webhooks zur Benutzervalidierung.

  1. Beispiel-URL für den Test:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

Verkauf über die Shop-Benutzeroberfläche

Sie können Spielschlüssel über die Shop-Benutzeroberfläche verkaufen. Um einen Shop zu erstellen, können Sie:

Wenn Sie Ihren eigenen Shop implementieren, können Sie die Onlineshop-Demoversion als Grundlage nutzen und um die auf GitHub veröffentlichten Codeschnipsel ergänzen.

Um Spielschlüsselpakete zu verkaufen, müssen Sie die In-Game Store & Buy Button API integrieren:

  1. Mit der Methode Spieleliste abrufen können Sie einen Katalog anzeigen.
  2. Implementieren Sie den Kauf von Spielschlüsseln:

Wählen Sie eine geeignete Authentifizierungsoption, damit die Methoden korrekt funktionieren.

Hinweis
Wird ein Spiel über die In-Game Store & Buy Button API verkauft, sollten Sie eine Funktion implementieren, die es Spielern im Client ermöglicht, eine bestimmte Plattform auszuwählen. Um die SKU abzurufen, müssen Sie den Wert des Parameters items.unit_items.sku aus der Anfrage an die Methode Spieleliste abrufen übermitteln.

Verkauf über Widget

Es gibt mehrere Möglichkeiten, wie Schaltflächen entwickelt und in der Xsolla-API integriert werden können:

Individualisieren von Schaltflächen

  1. Öffnen Sie Ihr Projekt im Kundenportal.
  2. Klicken Sie auf Shop in der Seitenleiste.
  3. Bei Spieleschlüssel klicken Sie Konfigurieren.
  4. Wählen Sie einen Spielschlüssel und gehen Sie zur Registerkarte Widget-Anpassung.

Hinweis
Wenn es keine Spielschlüssel gibt, erstellen Sie einen neuen.

  1. Im Block Anpassen wählen Sie hell als Hintergrundfarbe.

Hinweis
Sie können auch das Objekt theme im Code ändern, damit der Parameter background einen leeren String als Wert hat.

  1. Wenn Sie den Widget Code zu Ihrer Seite hinzufügen, enthält er vererbte Stile. Fügen Sie die Stile unten ein, um diese Stile überschreiben zu können.

Achtung
Fügen Sie diese einem style unter dem script zu, den Sie auf der Registerkarte Widget-Anpassung aus Gründen der CSS-Vererbung/Priorität erhalten haben.
Copy
Full screen
Small screen
/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

Achtung
  • Die obengenannten Namen und der Codeschnipsel werden in Verbindung mit dem kopierten Widget-Code (das Bild bei Schritt 5) verwendet. Deswegen ist es wichtig, dass die den kopierten Widget-Code implementieren.
  • Sie können den oben genannten Code so verwenden, wie er ist, oder ihn auf Ihr Szenario anpassen. Die Code-Kommentare (Zeilen 1, 3, 5, 11, 16, 18, 22, 29) sind dazu da, um festzulegen, worauf die einzelnen CSS-Regeln ausgerichtet sind, und helfen bei der künftigen Gestaltung. Wenn Sie z. B. nur die Schaltfläche (und nicht das gesamte Widget) haben möchten, müssen Sie die Hintergrundfarbe Ihrer Seite an den folgenden Stellen ersetzen, wo die Farbe ist white — Zeilen 20 und 27.

So erstellen Sie mehrere Schaltflächen oder SKUs.

Sie können unter Xsolla Pay2Play-Widget - einfache Integration von 4 Schaltflächen ein Code-Muster für die Erstellung mithilfe des Pay2Play Widgets finden.

Die Struktur ist ähnlich wie beim Code für das Kaufschaltflächen-Widget. Hier ein Beispiel für eine Migration:

Copy
Full screen
Small screen
<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>

Achtung
  • Zeilen 1 und 2 - ein div pro Schaltfläche, jede mit einer eindeutigen ID.
  • Beginnend mit Zeile 26 sind die Optionen für die zweite Schaltfläche (festgelegt im options2-Objekt) zu finden. Sie benötigen einen Satz von options, wie diejenigen im obigen Beispiel für jede Kauf-Schaltfläche. Achten Sie auf die Unterschiede im sku (Zeile 28) und target_element (Zeile 34, mit Ziel auf div in Zeile 2).
War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!

Weitere Informationen

Nächste Schritte

Webhooks einrichten
Letztmalig aktualisiert: 20. September 2022

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

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!