SDK para Unity (PC, web) / Integrar el SDK en el lado de la aplicación
  Volver a Documentos

SDK para Unity (PC, web)

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.

Nota
Puede crear su propia solución siguiendo las instrucciones de Unity o utilizar la escena de demostración como plantilla. Para adaptar la interfaz de la escena de demostración a su aplicación, utilice el generador de interfaz de usuario.

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:

Nota
La personalización del widget solo está disponible tras firmar el Acuerdo de licencia del producto de Xsolla. Para firmar el acuerdo, vaya a la sección Agreements & Taxes > Agreements en su 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:
Copy
Full screen
Small screen
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;
    }
}
  1. 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.
    1. 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.
    1. 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.
    1. 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:
Copy
Full screen
Small screen
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}");
		}
	}
}
  1. 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.
Nota
Le recomendamos que haga varias copias del objeto VirtualItemWidget para lograr una mejor visualización y una configuración más sencilla. Esto le permitirá evaluar de inmediato el diseño general de su tienda.
  1. 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.
  2. 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.
  1. 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.
  1. 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.
  1. 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.
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.

Enlaces útiles

Última actualización: 7 de Febrero de 2025

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!