Intégrer le SDK côté application
Informations générales
- Concevez une interface pour le système de connexion, le magasin en jeu et les autres pages de votre application.
- Dans votre application, implémentez la logique d'authentification utilisateur, d'affichage du magasin, d'achat, etc., en utilisant les méthodes SDK.
Démarrage rapide
Vous trouverez ci-dessous des instructions pour l’implémentation la plus simple du scénario de vente dans le jeu.
Flux d’interaction :
- L’utilisateur lance le jeu.
- L’application lance le widget Web Xsolla Login.
- L’utilisateur se connecte au jeu et accède au catalogue des objets.
- L’application demande le catalogue des objets à Xsolla.
- Une fois les données relatives aux articles reçues avec succès, l’application affiche le catalogue des objets.
- L’utilisateur clique sur le bouton d’achat de bien.
- L’application lance le processus d’achat et affiche l’interface de paiement dans le navigateur.
- L’utilisateur effectue le paiement.
- L’application ferme l’interface de paiement et transmet les données de paiement à Xsolla.
- L’application envoie un message au journal concernant les résultats du traitement du paiement.
Diagramme de séquence pour l’interaction entre votre application (script StoreController
) et le SDK :
Limites du scénario :
- Le widget Web Xsolla Login prêt à l’emploi est utilisé pour l’autorisation utilisateur. Xsolla fournit des modèles de widget standard. Leur apparence et leur contenu sont déterminés par la méthode de Login choisie pour le projet et les paramètres de customisation du widget dans le Compte éditeur.
- Le scénario implémente la vente d’objets en monnaie réelle uniquement, sans recourir à un panier d’achat. Cela signifie que l’utilisateur peut acheter un seul article à la fois.
Créer un script de widget d'objet
Créez un nouveau script nommé VirtualItemWidget
:
- Ouvrez votre projet dans l’éditeur Unity.
- Dans le menu principal, accédez à
Assets > Create > C# Script . - Spécifiez le nom du nouveau fichier dans le dossier
Assets commeVirtualItemWidget
. - Ouvrez le fichier créé dans l’éditeur et ajoutez-y le code suivant :
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Xsolla.Example
{
public class VirtualItemWidget : MonoBehaviour
{
public Image IconImage;
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Button BuyButton;
}
}
- Enregistrez les modifications.
Créer un prefab de widget d'objet
Créez l’interface utilisateur pour afficher le bien dans le magasin :
- Créez un objet
Canvas
pour afficher les éléments de l’interface utilisateur. Pour ce faire, dans le menu principal, accédez àGameObject > UI > Canvas . Cela créera les objets suivants sur la scène :- L’objet
Canvas
avec les composantsCanvas
,Canvas Scaler
etGraphic Raycaster
. - L’objet
EventSystem
, s’il n’est pas déjà présent sur la scène.
- L’objet
- Créez l’objet enfant
VirtualItemWidget
:- Dans le panneau
Hierarchy , sélectionnez l’objetCanvas
. - Dans le menu principal, accédez à
GameObject > UI > Image . Cela créera un nouvel objet de jeu qui sera automatiquement enfant de l’objetCanvas
. - Renommez l’objet créé en
VirtualItemWidget
.
- Dans le panneau
- Ajoutez des objets d’interface utilisateur pour afficher les informations sur le bien :
- Créez un objet pour afficher l'icône du widget :
- Dans le panneau
Hierarchy , sélectionnez l'objetVirtualItemWidget
; - Dans le menu principal, accédez à
GameObject > UI > Image ; - Renommez l'objet créé en
IconImage
.
- Dans le panneau
- Créez un objet pour afficher le nom du bien :
- Dans le panneau
Hierarchy , sélectionnez le bienVirtualItemWidget
; - Dans le menu principal, accédez à
GameObject > UI > Legacy > Text ; - Renommez l'objet créé en
NameText
.
- Dans le panneau
- Créez un objet pour afficher la description du bien :
- Dans le panneau
Hierarchy , sélectionnez l'objetVirtualItemWidget
; - Dans le menu principal, accédez à
GameObject > UI > Legacy > Text ; - Renommez l'objet créé en
DescriptionText
.
- Dans le panneau
- Créez un objet pour le bouton d'achat de bien :
- Dans le panneau
Hierarchy , sélectionnez l'objetVirtualItemWidget
; - Dans le menu principal, accédez à
GameObject > UI > Legacy > Button . Cela créera un objet bouton avec l'objet enfantText
; - Renommez l'objet créé en
BuyButton
; - Renommez l'objet
Text
enPriceText
.
- Dans le panneau
- Créez un objet pour afficher l'icône du widget :
- Ajoutez le script du widget d’objet en tant que composant de l’objet
VirtualItemWidget
:- Dans le panneau
Hierarchy , sélectionnez l’objetVirtualItemWidget
. - Dans le panneau
Inspector , cliquez surAdd Component et sélectionnez le scriptVirtualItemWidget
.
- Dans le panneau
- Attribuez des éléments d’interface utilisateur aux emplacements de script requis :
- Dans le panneau
Hierarchy , sélectionnez l’objetVirtualItemWidget
. - Faites glisser et déposez les objets enfant de l’interface du panneau
Hierarchy vers les emplacements de composantsVirtualItemWidget
correspondants dans le panneauInspector .
- Dans le panneau
- Convertissez l’objet
VirtualItemWidget
créé en prefab :- Dans le panneau
Hierarchy , sélectionnez l’objetVirtualItemWidget
. - Faites glisser et déposez l’objet dans le panneau
Project du dossierAssets . Un nouvel objet apparaît alors dans le dossierAssets , et l’objet de la scène prend la couleur bleue.
- Dans le panneau
Exemple de prefab d’un widget d’objet :
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/item-widget.png)
Créer un script de magasin
Créez un nouveau script nommé StoreController
:
- Ouvrez votre projet dans l’éditeur Unity.
- Dans le menu principal, accédez à
Assets > Create > C# Script . - Spécifiez le nom du nouveau fichier dans le dossier
Assets commeStoreController
. - Ouvrez le fichier créé dans l’éditeur et ajoutez-y le code suivant :
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
namespace Xsolla.Example
{
public class StoreController : MonoBehaviour
{
[SerializeField] private VirtualItemWidget WidgetPrefab;
[SerializeField] private Transform WidgetsContainer;
private void Start()
{
StartAuthorization();
}
private void StartAuthorization()
{
Debug.Log("Start the authorization process with the Xsolla Login Widget");
XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
}
private void OnAuthSuccess()
{
Debug.Log("Authorization successful");
Debug.Log("Get the catalog of virtual items");
XsollaCatalog.GetItems(OnCatalogReceived, OnError);
}
private void OnCatalogReceived(StoreItems items)
{
Debug.Log("Catalog received successfully");
BuildStoreUI(items.items);
}
private void BuildStoreUI(StoreItem[] items)
{
// Create a widget for each item in the catalog
foreach (var item in items)
{
// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
if (item.price == null)
continue;
// Instantiate a widget prefab
var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
// Fill the widget with data
widget.NameText.text = item.name;
widget.DescriptionText.text = item.description;
widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
// Loading the item image and assigning it to the UI element
ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
// Add a click listener to the Buy button
widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
}
}
private void StartPurchase(string sku)
{
Debug.Log($"Start the purchase process for the item: {sku}");
XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
}
private void OnPurchaseCompleted(OrderStatus status)
{
Debug.Log("Purchase completed");
}
private void OnError(Error error)
{
Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
- Enregistrez les modifications.
Créer un objet magasin
Créez l’interface utilisateur pour afficher la liste des biens dans le magasin :
- Ajoutez un composant qui organise les widgets des biens individuels dans une grille, gère l’emplacement et la taille des objets imbriqués. Pour ce faire :
- Dans le panneau
Hierarchy , sélectionnez l’objetCanvas
. - Dans le panneau
Inspector , cliquez surAdd Component et sélectionnez le scriptGrid Layout Group
. - Dans le panneau
Inspector , modifiez les paramètres du composant si nécessaire : définissez la taille des cellules, l’espacement, etc.
- Dans le panneau
VirtualItemWidget
pour une meilleure visualisation et une configuration plus facile. Cela vous permet d’évaluer immédiatement l’agencement général de votre magasin.- Ajoutez le script du magasin en tant que composant de l’objet
Canvas
:- Dans le panneau
Hierarchy , sélectionnez l’objetCanvas
. - Dans le panneau
Inspector , cliquez surAdd Component et sélectionnez le scriptStoreController
.
- Dans le panneau
- Assignez les éléments aux emplacements requis du script
StoreController
:- Dans le panneau
Hierarchy , sélectionnez l’objetCanvas
. - Faites glisser et déposez l’objet
Canvas
du panneauHierarchy vers l’emplacementWidgetsContainer du panneauInspector . - Faites glisser et déposez l’objet
VirtualItemWidget
du panneauHierarchy vers l’emplacementWidgetPrefab du panneauInspector .
- Dans le panneau
Exemple d’objet magasin :
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/store-layout.png)
Lancer et tester le magasin
Lancez le magasin dans l’éditeur Unity et vérifiez son fonctionnement :
- Pour l’objet
Canvas
, supprimez tous les objets enfants. - Cliquez sur
Play . Ainsi, lorsque l’application démarre, une fenêtre de navigateur avec le widget Xsolla Login s’ouvre.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-log-in.png)
- Connectez-vous à l’application. Une fois l’autorisation de l’utilisateur obtenue, l’application demande le catalogue des objets à Xsolla. Après réception des données relatives aux biens, l’application crée les widgets nécessaires et affiche la liste des biens du magasin.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-catalog.png)
- Cliquez sur le bouton d’achat dans n’importe quel widget d’objet. L’application lance le processus d’achat et affiche l’interface de paiement dans le navigateur.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-payment-ui.png)
- Complétez le processus d’achat. Utilisez les cartes de test pour le paiement. Après un achat réussi, le message
Purchase completed
apparaît dans les journaux.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-purchase-complete.png)
Liens utiles
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.