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

Spielschlüssel können über einen direkten Link verkauft werden, der das Zahlungsportal im folgenden Format öffnet:

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

Zusätzlich zu den Hauptabfrageparametern können Sie auch die Parameter zur Anpassung der Zahlungsschnittstelle und den Verkauf an authentifizierte Nutzer übermitteln.

Erforderliche Parameter

Fügen Sie dem Link folgende Daten hinzu:

• YOUR-ITEM-TYPE – Artikeltyp. Mögliche Werte sind:

  • game - Spielschlüsselpaket.
  • game_key – Spielschlüsselpaket auf einer bestimmten Plattform.
  • bundle – Bundle mit Spielschlüsselpaketen.

• YOUR-PROJECT-ID – ID Ihres Projekts, das in Ihrem Kundenportal neben dem Projektnamen steht.

• YOUR-ITEM-SKU – Spielschlüsselpaket-SKU, zum Beispiel:

  • order456 - SKU ohne bestimmte Plattform.
  • pre.order123_steam – SKU mit einer bestimmten Plattform.

Wir empfehlen die Verwendung plattformspezifischer Spielschlüsselpakete. Dadurch lassen sich Kompatibilitätsprobleme bei der Verwendung oder Aktivierung der Schlüssel vermeiden. In jedem Fall muss der SKU ein plattformspezifischer Suffix hinzugefügt werden – entweder automatisch oder manuell, je nachdem, wie das Schlüsselpaket erstellt wurde:

• Wenn Sie ein Schlüsselpaket im Kundenportal erstellen, fügt das System automatisch ein plattformspezifisches Suffix mit Unterstrich zur eingegebenen SKU hinzu (z. B. _steam, _playstation).

• Wenn Sie ein plattformspezifische Schlüsselpakete mittels API-Aufrufe erstellen, können Sie das Plattform-Suffix in jedem beliebigen Format angeben, das nur lateinische Klein- und Großbuchstaben, alphanumerische Zeichen, Punkte, Bindestriche und Unterstriche enthält.

Liste der unterstützten Xsolla-Plattformen und ihrer Suffixe als Beispiel:

Um sicherzustellen, dass der Link korrekt funtkioniert, können Sie die genaue SKU mithilfe des API-Aufrufs Spieleliste abrufen aufrufen und als SKU-Wert in den Zahlungslink einfügen. Die Artikel-SKU wird im Parameter items.unit_items.sku zurückgegeben (in der Regel folgt diese SKU dem Format game_key_sku_drm_sku).

Beispiel-URL für den Verkauf eines Spiels auf Steam:

1https://purchase.xsolla.com/pages/buy?type=game_key&project;_id=123456&sku;=pre.order123_steam

Zahlungsportal anpassen

Um Ihr Zahlungsportal an den Stil Ihres Spiels anzupassen, konfigurieren Sie das Theme, die Größe und andere Parameter der Benutzeroberfläche wie im Leitfaden zur Anpassung der Bezahlstation beschrieben. Fügen Sie der URL den Parameter ui_settings hinzu und übermitteln Sie ein settings.ui-JSON-Object mit Base64-Kodierung als Wert.

Beispiel-URL für die Öffnung des Zahlungsportals mit einem benutzerdefinierten Theme:

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

Verkauf an authentifizierte Nutzer

Um Schlüssel an authentifizierte Nutzer zu verkaufen, müssen Sie den Benutzerzugriffstoken im xsolla_login_token-Parameter übermitteln. Dieser Token hängt von der gewählten Authentifizierungsmethode ab.

Beispiel-URL für die Öffnung des Zahlungsportals mit einem Token:

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

Zahlungstest

Um den Zahlungsablauf im Sandbox-Modus zu testen, fügen Sie den Parameter mode=sandbox zur URL hinzu. Sie können Testkarten für die Abwicklung der Transaktionen verwenden.

Beispiel-URL für die Öffnung eines Zahlungsportals im Sandbox-Modus:

1https://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 Shop Builder API integrieren.

Verkauf von Spielschlüsselpaketen über die Shop Builder 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:

 1<div id="xsolla-buy-button-widget"></div>
 2
 3<script>
 4  var options = {
 5    project_id: "101010",
 6    sku: "my_key",
 7    user: {
 8      auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
 9    },
10    drm: "steam",
11    item_type: "unit",
12    api_settings: {
13      sandbox: true
14    },
15    widget_ui: {
16      target_element: "#xsolla-buy-button-widget",
17      theme: {
18        foreground: "green",
19        background: "light"
20      }
21    },
22    payment_widget_ui: {
23      lightbox: {
24        height: "700px",
25        spinner: "round"
26      }
27    }
28  };
29
30  var s = document.createElement("script");
31  s.type = "text/javascript";
32  s.async = true;
33  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
34  s.addEventListener("load", function () {
35    var widgetInstance = XBuyButtonWidget.create(options);
36  });
37  document.getElementsByTagName("head")[0].appendChild(s);
38</script>
39
40<style>
41  #xsolla-buy-button-widget {
42    /* place code for button positioning here */
43    margin: 10px;
44  }
45
46  /* Styles the button itself */
47  .x-buy-button-widget.x-buy-button-widget__tiny .x-buy-button-widget-payment-button {
48    background-color: #ff005b;
49    color: black;
50  }
51</style>

Individualisieren von Schaltflächen

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Artikelkatalog > Spielschlüssel.
2. Wählen Sie einen Spielschlüssel aus, und wechseln Sie zur Registerkarte Widget-Anpassung.

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

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

 1/* This should be used for button positioning but note this technically repositions the entire widget */
 2#xsolla-buy-button-widget {
 3  /* place code for button positioning here */
 4}
 5
 6/* Styles the button itself */
 7.x-buy-button-widget.x-buy-button-widget__tiny
 8  .x-buy-button-widget-payment-button {
 9  background-color: #ff005b;
10  color: black;
11}
12
13/* Button on hover */
14.x-buy-button-widget.x-buy-button-widget__tiny
15  .x-buy-button-widget-payment-button:hover {
16  background-color: #ff005b;
17}
18
19/* The following are style overrides to leave you with just the button */
20
21/* space immediately surrounding button */
22.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
23  background-color: white;
24}
25
26/* space above button (including game title area) */
27.x-buy-button-widget.x-buy-button-widget__tiny
28  .x-buy-button-widget-game-logo {
29  height: 200px;
30  background-image: none !important;
31  background-color: white;
32}
33
34 /* Game title (located right above button) */
35.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
36  display: none !important;
37}

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:

 1<div id="xsolla-buy-button-widget"></div>
 2<div id="xsolla-buy-button-widget-2"></div>
 3
 4<script>
 5  var options = {
 6    project_id: "191204",
 7    sku: "789",
 8    item_type: "unit",
 9    api_settings: {
10      sandbox: false
11    },
12    widget_ui: {
13      target_element: "#xsolla-buy-button-widget",
14      theme: {
15        foreground: "gold",
16        background: ""
17      }
18    },
19    payment_widget_ui: {
20      lightbox: {
21        height: "700px",
22        spinner: "round"
23      }
24    }
25  };
26
27  // options for second buy button - note the different SKU and target_element
28  var options2 = {
29    project_id: "191204",
30    sku: "123",
31    item_type: "unit",
32    api_settings: {
33      sandbox: false
34    },
35    widget_ui: {
36      target_element: "#xsolla-buy-button-widget-2",
37      theme: {
38        foreground: "gold",
39        background: ""
40      }
41    },
42    payment_widget_ui: {
43      lightbox: {
44        height: "700px",
45        spinner: "round"
46      }
47    }
48  };
49
50  var s = document.createElement("script");
51  s.type = "text/javascript";
52  s.async = true;
53  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";
54
55  // one event listener per widget instance. repeat for more buttons, passing in different SKUs
56  s.addEventListener("load", function () {
57    var widgetInstance = XBuyButtonWidget.create(options);
58  });
59  s.addEventListener("load", function () {
60    var widgetInstance2 = XBuyButtonWidget.create(options2);
61  });
62
63  document.getElementsByTagName("head")[0].appendChild(s);
64</script>