Integrar el SDK en el lado de la aplicación

Información general

1. Diseñe una interfaz para el sistema de inicio de sesión, la tienda en el juego y otras páginas para su aplicación.
2. Implemente en su aplicación la lógica para la autenticación de usuarios, la visualización de la tienda, la compra, etc., utilizando los métodos del SDK.

Inicio rápido

A continuación encontrará instrucciones para la implementación más sencilla del escenario de ventas en el juego.

Flujo de interacción:

1. El usuario lanza el juego.
2. La aplicación lanza el widget web de Xsolla Login.
3. El usuario inicia sesión en el juego y accede al catálogo de artículos.
4. La aplicación solicita el catálogo de artículos a Xsolla.
5. Tras recibir correctamente los datos del artículo, la aplicación muestra el catálogo de artículos.
6. El usuario pulsa el botón de compra del artículo.
7. La aplicación inicia el proceso de compra y muestra la interfaz de usuario de pago en el navegador.
8. El usuario realiza el pago.
9. La aplicación cierra la interfaz de pago y transmite los datos de pago a Xsolla.
10. La aplicación envía un mensaje al registro sobre los resultados del procesamiento del pago.

Diagrama de secuencia para la interacción de su aplicación (script StoreController) y el SDK:

Limitaciones del escenario:

• El widget web prediseñado de Xsolla se utiliza para la autorización de usuarios. Xsolla proporciona plantillas de widgets estándar. Su apariencia y contenido vienen determinados por el Método de inicio de sesión elegido para su proyecto y por la configuración de personalización del widget de Cuenta del editor.

• El escenario implementa la venta de artículos solo en moneda real, sin utilizar una cesta de la compra; es decir, el usuario solo puede comprar un artículo.

Crear script de widget de artículo

Cree un nuevo script denominado VirtualItemWidget:

1. Abra su proyecto en Unity Editor.
2. En el menú principal, acceda a Assets > Create > C# Script.
3. Especifique el nombre del nuevo archivo en la carpeta Assets como VirtualItemWidget.
4. Abra el archivo creado en el editor y agréguele el siguiente código:

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. Guarde los cambios.

Crear script de widget de artículo

Cree la interfaz de usuario para visualizar un artículo en la tienda:

1. Cree un objeto de Canvas para mostrar elementos de la interfaz de usuario. Para ello, en el menú principal, vaya a GameObject > UI > Canvas. Esto creará los siguientes objetos en la escena:
   • El objeto de Canvas con los componentes Canvas, Canvas Scaler y Graphic Raycaster.
   • El objeto de EventSystem, si ese objeto no existe ya en la escena.
2. Cree el objeto secundario VirtualItemWidget:
   1. En el panel Hierarchy, seleccione el objeto de Canvas.
   2. En el menú principal, vaya al GameObject > UI > Image. Esto creará un nuevo objeto de juego, este objeto será un elemento secundario del objeto de Canvas.
   3. Cambie el nombre del objeto a VirtualItemWidget.
3. Agregue objetos de la interfaz de usuario para visualizar la información del artículo:
   1. Cree un objeto para visualizar el icono del widget:
      1. . En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
      2. En el menú principal, vaya al GameObject > UI > Image.
      3. Cambie el nombre del objeto a IconImage.
   2. Cree un objeto para visualizar el nombre del artículo:
      1. En el panel Hierarchy panel, seleccione el objeto VirtualItemWidget.
      2. En el menú principal, vaya al GameObject > UI > Legacy > Text.
      3. Cambie el nombre del objeto a NameText.
   3. Cree un objeto para visualizar la descripción del artículo:
      1. . En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
      2. En el menú principal, vaya al GameObject > UI > Legacy > Text.
      3. Cambie el nombre del objeto a IconImage.
   4. Cree un objeto para el botón de compra del artículo:
      1. En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
      2. En el menú principal, vaya a GameObject > UI > Legacy > Button. Esto creará un objeto de botón con el objeto secundario Text.
      3. Cambie el nombre del objeto creado a BuyButton.
      4. Cambie el nombre del objeto Text a PriceText.
4. Agregue un script de widget de artículo al objeto VirtualItemWidget:
   1. En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
   2. En el panel Inspector, haga clic en Add Component y seleccione el script VirtualItemWidget.
5. Asigne elementos de interfaz de usuario a las ranuras de script necesarias:
   1. . En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
   2. Arrastre los objetos secundarios de interfaz de usuario desde el panel de Hierarchy a sus correspondientes ranuras del componente VirtualItemWidget del panel de Inspector.
6. Convierta el objeto de VirtualItemWidget creado en un prefab:
   1. En el panel Hierarchy, seleccione el objeto VirtualItemWidget.
   2. Arrastre y suelte el objeto en el panel de Project en la carpeta Assets. A continuación, aparecerá un nuevo objeto en la carpeta de Assets, y el objeto que hay en la escena cambia su color a azul.

Ejemplo de prefab del widget del artículo:

Crear script de tienda

Cree un nuevo script denominado StoreController:

1. Abra su proyecto en Unity Editor.
2. En el menú principal, acceda a Assets > Create > C# Script.
3. Especifique el nombre del nuevo archivo en la carpeta Assets como StoreController.
4. Abra el archivo creado en el editor y agréguele el siguiente código:

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. Guarde los cambios.

Crear objeto de tienda

Cree la interfaz de usuario para visualizar la lista de artículos en la tienda:

1. Agregue un componente que organice los widgets de artículos individuales en una cuadrícula, gestione la ubicación y el tamaño de los objetos anidados. Para ello, haga lo siguiente:
   1. En el panel Hierarchy, seleccione el objeto Canvas.
   2. En el panel de Inspector, haga clic en Add Component y seleccione el script Grid Layout Group.
   3. En el panel de Inspector, cambie la configuración de los componentes si es necesario: establezca el tamaño de la celda, el espaciado, etc.

2. Agregue un script de tienda al objeto Canvas:
   1. En el panel Hierarchy, seleccione el objeto Canvas.
   2. En el panel Inspector, haga clic en Add Component y seleccione el script StoreController.
3. Asigne los elementos a las ranuras necesarias del script StoreController:
   1. En el panel Hierarchy, seleccione el objeto Canvas.
   2. Arrastre y suelte el objeto Canvas desde el panel de Hierarchy a la ranura WidgetsContainer del panel de Inspector.
   3. Arrastre y suelte el objeto VirtualItemWidget desde el panel de Hierarchy a la ranura WidgetPrefab del panel de Inspector.

Ejemplo de objeto de la tienda:

Lanzar y probar la tienda

Inicie la tienda en el Unity Editor y compruebe su correcto funcionamiento:

1. Para el objeto Canvas, elimine todos los objetos.
2. Haga clic en Play. En consecuencia, cuando se inicia la aplicación, se abre una ventana del navegador con el widget de Xsolla Login.

3. Inicie sesión en la aplicación. Tras la autorización correcta del usuario, la aplicación solicita el catálogo de artículos a Xsolla. Tras recibir correctamente los datos de los artículos, la aplicación crea los widgets necesarios. A continuación, se muestra una lista de los artículos de la tienda.

4. Haga clic en el botón de compra en cualquier widget de artículos. La aplicación inicia el proceso de compra y muestra la interfaz de pago en el navegador.

5. Complete el proceso de compra. Utilice las tarjetas de prueba para realizar pagos. Cuando se confirme la compra, el mensaje Purchase completed aparecerá en los registros.

Enlaces útiles