Integrar el SDK en el lado de la aplicación
Información general
- 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.
- 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:
- El usuario lanza el juego.
- La aplicación lanza el widget web de Xsolla Login.
- El usuario inicia sesión en el juego y accede al catálogo de artículos.
- La aplicación solicita el catálogo de artículos a Xsolla.
- Tras recibir correctamente los datos del artículo, la aplicación muestra el catálogo de artículos.
- El usuario pulsa el botón de compra del artículo.
- La aplicación inicia el proceso de compra y muestra la interfaz de usuario de pago en el navegador.
- El usuario realiza el pago.
- La aplicación cierra la interfaz de pago y transmite los datos de pago a Xsolla.
- 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
:
- Abra su proyecto en Unity Editor.
- En el menú principal, acceda a
Assets > Create > C# Script . - Especifique el nombre del nuevo archivo en la carpeta
Assets comoVirtualItemWidget
. - Abra el archivo creado en el editor y agréguele el siguiente código:
- 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;
}
}
- Guarde los cambios.
Crear script de widget de artículo
Cree la interfaz de usuario para visualizar un artículo en la tienda:
- Cree un objeto de
Canvas
para mostrar elementos de la interfaz de usuario. Para ello, en el menú principal, vaya aGameObject > UI > Canvas . Esto creará los siguientes objetos en la escena:- El objeto de
Canvas
con los componentesCanvas
,Canvas Scaler
yGraphic Raycaster
. - El objeto de
EventSystem
, si ese objeto no existe ya en la escena.
- El objeto de
- Cree el objeto secundario
VirtualItemWidget
:- En el panel
Hierarchy , seleccione el objeto deCanvas
. - En el menú principal, vaya al
GameObject > UI > Image . Esto creará un nuevo objeto de juego, este objeto será un elemento secundario del objeto deCanvas
. - Cambie el nombre del objeto a
VirtualItemWidget
.
- En el panel
- Agregue objetos de la interfaz de usuario para visualizar la información del artículo:
- Cree un objeto para visualizar el icono del widget:
- . En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - En el menú principal, vaya al
GameObject > UI > Image . - Cambie el nombre del objeto a
IconImage
.
- . En el panel
- Cree un objeto para visualizar el nombre del artículo:
- En el panel
Hierarchy panel, seleccione el objetoVirtualItemWidget
. - En el menú principal, vaya al
GameObject > UI > Legacy > Text . - Cambie el nombre del objeto a
NameText
.
- En el panel
- Cree un objeto para visualizar la descripción del artículo:
- . En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - En el menú principal, vaya al
GameObject > UI > Legacy > Text . - Cambie el nombre del objeto a
IconImage
.
- . En el panel
- Cree un objeto para el botón de compra del artículo:
- En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - En el menú principal, vaya a
GameObject > UI > Legacy > Button . Esto creará un objeto de botón con el objeto secundarioText
. - Cambie el nombre del objeto creado a
BuyButton
. - Cambie el nombre del objeto
Text
aPriceText
.
- En el panel
- Cree un objeto para visualizar el icono del widget:
- Agregue un script de widget de artículo al objeto
VirtualItemWidget
:- En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - En el panel
Inspector , haga clic enAdd Component y seleccione el scriptVirtualItemWidget
.
- En el panel
- Asigne elementos de interfaz de usuario a las ranuras de script necesarias:
- . En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - Arrastre los objetos secundarios de interfaz de usuario desde el panel de
Hierarchy a sus correspondientes ranuras del componenteVirtualItemWidget
del panel deInspector .
- . En el panel
- Convierta el objeto de
VirtualItemWidget
creado en un prefab:- En el panel
Hierarchy , seleccione el objetoVirtualItemWidget
. - Arrastre y suelte el objeto en el panel de
Project en la carpetaAssets . A continuación, aparecerá un nuevo objeto en la carpeta deAssets , y el objeto que hay en la escena cambia su color a azul.
- En el panel
Ejemplo de prefab del widget del artículo:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/item-widget.png)
Crear script de tienda
Cree un nuevo script denominado StoreController
:
- Abra su proyecto en Unity Editor.
- En el menú principal, acceda a
Assets > Create > C# Script . - Especifique el nombre del nuevo archivo en la carpeta
Assets comoStoreController
. - Abra el archivo creado en el editor y agréguele el siguiente código:
- 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}");
}
}
}
- Guarde los cambios.
Crear objeto de tienda
Cree la interfaz de usuario para visualizar la lista de artículos en la tienda:
- 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:
- En el panel
Hierarchy , seleccione el objetoCanvas
. - En el panel de
Inspector , haga clic enAdd Component y seleccione el scriptGrid Layout Group
. - 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.
- En el panel
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.- Agregue un script de tienda al objeto
Canvas
:- En el panel
Hierarchy , seleccione el objetoCanvas
. - En el panel
Inspector , haga clic enAdd Component y seleccione el scriptStoreController
.
- En el panel
- Asigne los elementos a las ranuras necesarias del script
StoreController
:- En el panel
Hierarchy , seleccione el objetoCanvas
. - Arrastre y suelte el objeto
Canvas
desde el panel deHierarchy a la ranuraWidgetsContainer del panel deInspector . - Arrastre y suelte el objeto
VirtualItemWidget
desde el panel deHierarchy a la ranuraWidgetPrefab del panel deInspector .
- En el panel
Ejemplo de objeto de la tienda:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/store-layout.png)
Lanzar y probar la tienda
Inicie la tienda en el Unity Editor y compruebe su correcto funcionamiento:
- Para el objeto
Canvas
, elimine todos los objetos. - Haga clic en
Play . En consecuencia, cuando se inicia la aplicación, se abre una ventana del navegador con el widget de Xsolla Login.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-log-in.png)
- 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.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-catalog.png)
- 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.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-payment-ui.png)
- 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.
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-purchase-complete.png)
Enlaces útiles
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.