Intégrer le SDK côté application

Informations générales

1. Concevez une interface pour le système de connexion, le magasin en jeu et les autres pages de votre application.
2. 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 :

1. L’utilisateur lance le jeu.
2. L’application lance le widget Web Xsolla Login.
3. L’utilisateur se connecte au jeu et accède au catalogue des objets.
4. L’application demande le catalogue des objets à Xsolla.
5. Une fois les données relatives aux articles reçues avec succès, l’application affiche le catalogue des objets.
6. L’utilisateur clique sur le bouton d’achat de bien.
7. L’application lance le processus d’achat et affiche l’interface de paiement dans le navigateur.
8. L’utilisateur effectue le paiement.
9. L’application ferme l’interface de paiement et transmet les données de paiement à Xsolla.
10. 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 :

1. Ouvrez votre projet dans l’éditeur Unity.
2. Dans le menu principal, accédez à Assets > Create > C# Script.
3. Spécifiez le nom du nouveau fichier dans le dossier Assets comme VirtualItemWidget.
4. Ouvrez le fichier créé dans l’éditeur et ajoutez-y le code suivant :

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

5. Enregistrez les modifications.

Créer un prefab de widget d'objet

Créez l’interface utilisateur pour afficher le bien dans le magasin :

1. 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 composants Canvas,Canvas Scaler et Graphic Raycaster.
   • L’objet EventSystem, s’il n’est pas déjà présent sur la scène.
2. Créez l’objet enfant VirtualItemWidget :
   1. Dans le panneau Hierarchy, sélectionnez l’objet Canvas.
   2. Dans le menu principal, accédez à GameObject > UI > Image. Cela créera un nouvel objet de jeu qui sera automatiquement enfant de l’objet Canvas.
   3. Renommez l’objet créé en VirtualItemWidget.
3. Ajoutez des objets d’interface utilisateur pour afficher les informations sur le bien :
   1. Créez un objet pour afficher l'icône du widget :
      1. Dans le panneau Hierarchy, sélectionnez l'objet VirtualItemWidget ;
      2. Dans le menu principal, accédez à GameObject > UI > Image ;
      3. Renommez l'objet créé en IconImage.
   2. Créez un objet pour afficher le nom du bien :
      1. Dans le panneau Hierarchy, sélectionnez le bien VirtualItemWidget ;
      2. Dans le menu principal, accédez à GameObject > UI > Legacy > Text ;
      3. Renommez l'objet créé en NameText.
   3. Créez un objet pour afficher la description du bien :
      1. Dans le panneau Hierarchy, sélectionnez l'objet VirtualItemWidget ;
      2. Dans le menu principal, accédez à GameObject > UI > Legacy > Text ;
      3. Renommez l'objet créé en DescriptionText.
   4. Créez un objet pour le bouton d'achat de bien :
      1. Dans le panneau Hierarchy, sélectionnez l'objet VirtualItemWidget ;
      2. Dans le menu principal, accédez à GameObject > UI > Legacy > Button. Cela créera un objet bouton avec l'objet enfant Text ;
      3. Renommez l'objet créé en BuyButton ;
      4. Renommez l'objet Text en PriceText.
4. Ajoutez le script du widget d’objet en tant que composant de l’objet VirtualItemWidget :
   1. Dans le panneau Hierarchy, sélectionnez l’objet VirtualItemWidget.
   2. Dans le panneau Inspector, cliquez sur Add Component et sélectionnez le script VirtualItemWidget.
5. Attribuez des éléments d’interface utilisateur aux emplacements de script requis :
   1. Dans le panneau Hierarchy, sélectionnez l’objet VirtualItemWidget.
   2. Faites glisser et déposez les objets enfant de l’interface du panneau Hierarchy vers les emplacements de composants VirtualItemWidget correspondants dans le panneau Inspector.
6. Convertissez l’objet VirtualItemWidget créé en prefab :
   1. Dans le panneau Hierarchy, sélectionnez l’objet VirtualItemWidget.
   2. Faites glisser et déposez l’objet dans le panneau Project du dossier Assets. Un nouvel objet apparaît alors dans le dossier Assets, et l’objet de la scène prend la couleur bleue.

Exemple de prefab d’un widget d’objet :

Créer un script de magasin

Créez un nouveau script nommé StoreController :

1. Ouvrez votre projet dans l’éditeur Unity.
2. Dans le menu principal, accédez à Assets > Create > C# Script.
3. Spécifiez le nom du nouveau fichier dans le dossier Assets comme StoreController.
4. Ouvrez le fichier créé dans l’éditeur et ajoutez-y le code suivant :

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}");
		}
	}
}

5. Enregistrez les modifications.

Créer un objet magasin

Créez l’interface utilisateur pour afficher la liste des biens dans le magasin :

1. 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 :
   1. Dans le panneau Hierarchy, sélectionnez l’objet Canvas.
   2. Dans le panneau Inspector, cliquez sur Add Component et sélectionnez le script Grid Layout Group.
   3. Dans le panneau Inspector, modifiez les paramètres du composant si nécessaire : définissez la taille des cellules, l’espacement, etc.

2. Ajoutez le script du magasin en tant que composant de l’objet Canvas :
   1. Dans le panneau Hierarchy, sélectionnez l’objet Canvas.
   2. Dans le panneau Inspector, cliquez sur Add Component et sélectionnez le script StoreController.
3. Assignez les éléments aux emplacements requis du script StoreController :
   1. Dans le panneau Hierarchy, sélectionnez l’objetCanvas.
   2. Faites glisser et déposez l’objet Canvas du panneau Hierarchy vers l’emplacement WidgetsContainer du panneau Inspector.
   3. Faites glisser et déposez l’objet VirtualItemWidget du panneau Hierarchy vers l’emplacement WidgetPrefab du panneau Inspector.

Exemple d’objet magasin :

Lancer et tester le magasin

Lancez le magasin dans l’éditeur Unity et vérifiez son fonctionnement :

1. Pour l’objet Canvas, supprimez tous les objets enfants.
2. Cliquez sur Play. Ainsi, lorsque l’application démarre, une fenêtre de navigateur avec le widget Xsolla Login s’ouvre.

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

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

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

Liens utiles