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

Le lien suivant ouvre l’interface de paiement :

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

Ajoutez les données suivantes à ce lien :

• YOUR-ITEM-TYPE — type de bien :
  • game — jeu ; game_key — jeu sur une plateforme spécifique.
  • bundle — lot.
• YOUR-PROJECT-ID — ID de votre projet, qui se trouve dans la section Project settings > General settings > Project ID dans Compte éditeur.
• YOUR-ITEM-SKU — UGS du package de clés de jeu. Pour vendre un jeu sur une plateforme spécifique, utilisez la méthode Get games list (en général, cette UGS ressemble à unit_name_drm_sku) pour obtenir l’UGS.

• Style de l'interface de paiement : thème (sombre, ou clair, par défaut), taille et autres paramètres. Spécifiez le paramètre ui_settings dans l'URL et passez un objet JSON settings.ui encodé en Base64 comme valeur. Exemple d'URL avec les paramètres de l'interface utilisateur :

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

• Jeton permettant de passer les données utilisateur. Utilisé lors de la vente de clés de jeu aux utilisateurs authentifiés uniquement. Ce jeton dépend de la méthode d'authentification. Exemple d'URL avec un jeton :

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

• Paramètre mode=sandbox pour les tests de paiement. Utilisez les cartes bancaires de test pour effectuer des paiements.

1. Exemple d'URL de test :

https://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 In-Game Store API.

Pour vendre des packages de clés de jeu en utilisant In-Game Store API :

1. Utilisez la méthode Get games list 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 Create order with specified item. 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 :
     • Update cart item from current cart pour ajouter une clé de jeu au panier ;
     • Get the current user’s cart pour récupérer la liste des clés de jeu dans le panier ;
     • Create an order with all items from the current cart 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 :

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

Customisation des boutons

1. Ouvrez votre projet dans le Compte éditeur.
2. Dans le menu latéral, cliquez sur Store.
3. Dans le volet Game Keys, cliquez sur Configure.
4. Sélectionnez une clé de jeu et accédez à l'onglet Widget customization.

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

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

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

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 :

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