Verkauf von Spielschlüsseln einrichten

Sie können Spielschlüssel über einen Direktlink, die Shop-Benutzeroberfläche oder ein Widget verkaufen.

Sie können Spielschlüssel an autorisierte und nicht autorisierte Nutzer verkaufen.

Mit der Autorisierung können Sie:

• Obergrenzen für den Verkauf von Spielschlüsseln für Benutzer festlegen
• Artikelkataloge und Werbeaktionen personalisieren
• das Berechtigungssystem verwenden
• Nutzerdaten im Zahlungsportal von Xsolla speichern

Sie können Nutzer mit dem Login-Produkt oder Ihrem eigenen Berechtigungssystem autorisieren. In dieser Anleitung finden Sie alle Details zur Einrichtung.

Verkauf über Direktlink

Der folgende Link öffnet das Zahlungsportal:

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}

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:

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_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:

https://purchase.xsolla.com/pages/buy?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.

1. Beispiel-URL für den Test:

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_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:

• den Site Builder verwenden;
• Ihren eigenen Shop erstellen und die In-Game Store API integrieren.

Verkauf von Spielschlüsselpaketen über In-Game Store-API:

1. Mit der Methode Spieleliste abrufen können Sie einen Katalog anzeigen.

2. Implementieren Sie den Kauf von Spielschlüsseln:

   • Verwenden Sie beim Schnellkauf eines Schlüssels die Methode Bestellung mit dem angegebenen Artikel erstellen. Diese Methode antwortet mit einem Token, der zum Öffnen des Zahlungsportals verwendet werden muss.
   • Um mehrere Spielschlüssel zu kaufen, verwenden Sie die Warenkorbverwaltungsmethoden:
     • Warenkorbartikel aus aktuellem Warenkorb aktualisieren, um einen Spielschlüssel in den Warenkorb zu legen.
     • Warenkorb des aktuellen Benutzers abrufen, um eine Liste der im Warenkorb vorhandenen Spielschlüssel abzurufen.
     • Bestellung mit allen Artikeln aus dem aktuellen Warenkorb anlegen, um die Spielschlüssel im Warenkorb zu bezahlen. Die Methode antwortet mit einem Token, der zum Öffnen des Zahlungsportals verwendet werden muss.

Verkauf über Widget

Sie können auf Ihrer Seite ein Widget zum Verkauf von Spielschlüsseln hinzufügen und es anpassen. Öffnen Sie nach dem Erstellen des Schlüsselpakets im Kundenportal den Abschnitt Widget-Anpassung und kopieren Sie dort den Widget-Code.

Wird ein Spiel nur auf einer Plattform verkauft, zeigt das Widget den Preis des Spiels auf dieser Plattform an.

Beispiel: Jetzt kaufen für 10€.

Wird ein Spiel auf mehreren Plattformen verkauft, zeigt das Widget den niedrigsten Preis an, den es auf diesen Plattformen findet.

Beispiel: Erhältlich ab 10€.

Im Bestellfenster sieht der Nutzer die Preise für alle Plattformen und kann sich entscheiden.

Sie können auch den Preis für eine bestimmte Plattform im Widget anzeigen lassen, indem Sie im Parameter DRM die SKU der Plattform eingeben.

Beispiel für einen Widget-Code:

<div id="xsolla-buy-button-widget"></div>
      <script>
          var options = {
              project_id: "101010",
              sku: "my_key",
              user: {
                  auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
              },
              drm: "steam",
              item_type: "unit",
              api_settings: {
                  sandbox: true,
              },
              widget_ui: {
                  target_element: "#xsolla-buy-button-widget",
                  theme: {
                      foreground: "green",
                      background: "light"
                  },
              },

             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.8/widget.min.js";
          s.addEventListener('load', function (e) {
              var widgetInstance = XBuyButtonWidget.create(options);
          }, false);
          var head = document.getElementsByTagName('head')[0];
          head.appendChild(s);
      </script>
      <style>
          #xsolla-buy-button-widget {

          /* place code for button positioning here */
            margin: 10px  
          }

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

Individualisieren von Schaltflächen

1. Öffnen Sie Ihr Projekt im Kundenportal.
2. Klicken Sie in der Seitenleiste auf Online-Shop.
3. Klicken Sie unter Spielschlüssel auf Konfigurieren.
4. Wählen Sie einen Spielschlüssel und öffnen Sie die Widget-Anpassung.

5. Wählen Sie im Abschnitt Anpassen die Hintergrundfarbe aus.

6. 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.

/* 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;
}

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:

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