Configurer la vente de clés de jeu

Vous pouvez vendre des clés de jeu par lien direct, via une interface de magasin ou un widget.

Vous pouvez vendre des clés de jeu à tous les utilisateurs, autorisés ou non.

L’autorisation permet de :

• fixer des limites à la vente de clés de jeu pour l’utilisateur ;
• personnaliser les catalogues des objets et les offres promotionnelles ;
• utiliser le système de droits ;
• stocker les données utilisateur dans l’interface de paiement Xsolla.

Pour autoriser les utilisateurs, utilisez le produit Login ou votre propre système d’autorisation. Des informations détaillées sur la configuration sont fournies dans les instructions.

Vendre par lien direct

Vous pouvez vendre les clés de jeu via un lien direct ouvrant l’interface de paiement au format suivant :

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

En plus des paramètres de requête principaux, vous pouvez passe des paramètres pour personnaliser l’interface de paiement et vendre aux utilisateurs connectés.

Paramètres requis

Ajoutez les données suivantes à ce lien :

• YOUR-ITEM-TYPE — type d’objet. Valeurs possibles :

  • game — package de clés de jeu.
  • game_key — package de clés de jeu sur une plateforme spécifique.
  • bundle — lot avec packages de clés de jeu.

• YOUR-PROJECT-ID — ID du projet, que vous trouverez dans le Compte éditeur à côté du nom du projet.

• YOUR-ITEM-SKU — UGS du package de clés de jeu, par exemple :

  • order456 — UGS sans plateforme spécifique.
  • pre.order123_steam — UGS pour une plateforme spécifique.

Nous recommandons d’utiliser des packages de clés de jeu spécifiques à chaque plateforme. Cela évite les problèmes de compatibilité lors de l’utilisation ou de l’activation des clés. Dans tous les cas, un suffixe propre à la plateforme doit être ajouté à l’UGS, automatiquement ou manuellement selon la méthode de création du package :

• Lorsque vous créez des packages de clés dans le Compte éditeur, le système ajoute automatiquement un suffixe spécifique à la plateforme avec un tiret bas (par exemple _steam, _playstation) à la référence que vous indiquez.

• Lorsque vous créez des packages de clés spécifiques à une plateforme via des appels API, vous pouvez définir le suffixe de la plateforme dans n’importe quel format, en utilisant uniquement des caractères alphanumériques latins, des points, des tirets et des tirets bas.

Liste des plateformes prises en charge par Xsolla et exemples de suffixes :

Pour garantir le bon fonctionnement du lien, récupérez l’UGS exacte via l’appel API Get games list et utilisez-la dans le lien de paiement comme valeur SKU. L’UGS de l’objet se trouve dans le paramètre items.unit_items.sku et suit généralement le format game_key_sku_drm_sku.

Exemple d’URL pour vendre un jeu sur Steam :

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

Personnalisation de l'interface de paiement

Pour que l’interface de paiement reflète le style de votre jeu&#39, configurez le thème, la taille et les autres paramètres d’interface comme indiqué dans le guide sur la personnalisation de Pay Station. Ajoutez le paramètre ui_settings à l’URL et passez un objet JSON settings.ui encodé en Base64 en tant que valeur.

Exemple d’URL pour ouvrir l’interface de paiement avec un thème personnalisé :

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

Vendre à des utilisateurs authentifiés

Pour vendre des clés aux utilisateurs authentifiés, passez un jeton d’accès utilisateur dans le paramètre xsolla_login_token. Ce jeton dépend de la méthode d’authentification choisie.

Exemple d’URL pour ouvrir l’interface de paiement avec un jeton :

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

Test de paiement

Pour tester le flux de paiement en mode bac à sable, ajoutez le paramètre mode=sandbox à l’URL. Utilisez ensuite des cartes bancaires de test pour effectuer les transactions.

Exemple d’URL pour ouvrir l’interface de paiement en mode bac à sable :

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

Vendre via une interface de magasin

Vous pouvez vendre des clés de jeu via une interface de magasin. Pour créer un magasin, vous pouvez :

• utiliser Site Builder ;
• créer votre propre version de magasin et intégrer Shop Builder API.

Pour vendre des packages de clés de jeu en utilisant Shop Builder API :

1. Utilisez la méthode Lire une liste de jeux pour afficher le catalogue.

2. Implémentez l’achat de clés de jeu :

   • Pour un achat rapide d’une clé, utilisez la méthode Créer une commande à partir d’un objet spécifique. En réponse à cette méthode, vous recevrez un jeton qui doit être utilisé pour ouvrir l’interface de paiement.
   • Pour acheter plusieurs clés de jeu, utilisez les méthodes de gestion du panier :
     • Mettre à jour un objet du panier actuel pour ajouter une clé de jeu au panier ;
     • Lire le panier de l’utilisateur actuel pour récupérer la liste des clés de jeu dans le panier ;
     • Créer une commande à partir de tous les objets du panier actuel pour payer les clés de jeu dans le panier. En réponse à cette méthode, vous recevrez un jeton qui doit être utilisé pour ouvrir l’interface de paiement.

Vendre via un widget

Vous pouvez ajouter un widget à votre page pour vendre des clés de jeu et le customiser. Pour copier le code du widget, accédez à la section Widget customization après avoir créé le package de clés dans votre Compte éditeur.

Si un jeu est vendu sur une seule plateforme, le widget affichera le prix du jeu spécifique à cette plateforme.

Exemple : Acheter maintenant pour 10 $.

Si un jeu est vendu sur plusieurs plateformes, le widget affichera le prix le plus bas parmi les plateformes.

Exemple : Obtenir à partir de 10 $.

Dans la fenêtre de création de la commande, l’utilisateur peut voir les prix pour toutes les plateformes et faire son choix.

Pour afficher le prix pour une plateforme spécifique dans le widget, spécifiez l’UGS de la plateforme dans le paramètre drm.

Exemple de code de widget :

 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>

Customisation des boutons

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Items catalog > Game keys.
2. Sélectionnez une clé de jeu et accédez à l'onglet Widget customization.

3. Dans le bloc Customize, sélectionnez la couleur d'arrière-plan.

4. Lorsque vous ajoutez le code du widget à votre page, il inclut des styles hérités. Ajoutez les styles ci-dessous pour remplacer ces styles.

 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}

Comment créer plusieurs boutons ou UGS

Référez-vous au Xsolla Pay2Play Widget Simple Integration 4 buttons pour un exemple de code démontrant comment cela est mis en œuvre en utilisant le widget Pay2Play.

La structure est similaire au code du widget Buy Button. Exemple de 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>