Integre o SDK no lado do aplicativo
Informações gerais
- Projete uma interface para o sistema de login, a loja do jogo e outras páginas para o seu aplicativo.
- No seu aplicativo, implemente a lógica para a autenticação de usuários, exibição da loja, compras e muito mais usando os métodos SDK.
Início rápido
Abaixo, há instruções para a implementação mais simples do cenário de venda no jogo.
Fluxo de interação:
- O usuário inicializa o jogo.
- O aplicativo inicializa o widget da web Xsolla Login.
- O usuário acessa o jogo e navega pelo catálogo de itens.
- O aplicativo solicita o catálogo de itens da Xsolla.
- Após recuperar os dados do item com sucesso, o aplicativo exibe o catálogo de itens.
- O usuário clica no botão de compra do item.
- O aplicativo inicia o processo de compra e exibe a interface de pagamento no navegador.
- O usuário faz o pagamento.
- O aplicativo fecha a interface de pagamento e passa os dados de pagamento à Xsolla.
- O aplicativo gera uma mensagem no registro sobre os resultados do processamento do pagamento.
Diagrama de sequência de interações do seu aplicativo (script StoreController
) e SDK:
Limitações do cenário:
- O widget da web Xsolla Login pré-pronto é utilizado para a autorização do usuário. A Xsolla fornece modelos de widget padrão. Sua aparência e conteúdo são determinadas pelo método de login escolhido para seu projeto e as configurações de personalização do widget da Conta de Distribuidor.
- O cenário implementa a venda de itens apenas por moedas reais, sem usar o carrinho de compras (o usuário só pode comprar um item por vez).
Crie o script do widget de item
Crie um novo script chamado VirtualItemWidget
:
- Abra seu projeto no editor Unity.
- No menu principal, acesse
Assets > Create > C# Script . - Especifique o nome do novo arquivo na pasta
Assets comoVirtualItemWidget
. - Abra o arquivo criado no editor e adicione o seguinte código a ele:
- 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;
}
}
- Salve as alterações.
Crie um widget prefab de item
Crie a interface para exibir itens na loja:
- Crie um objeto
Canvas
para exibir elementos de interface. Para fazer isso, no menu principal, vá paraGameObject > UI > Canvas . Isso criará os seguintes objetos na cena:- O objeto
Canvas
com os componentesCanvas
,Canvas Scaler
eGraphic Raycaster
. - O objeto
EventSystem
, se tal objeto já não existir na cena.
- O objeto
- Crie o objeto filho
VirtualItemWidget
:- No painel
Hierarchy , selecione o objetoCanvas
. - No menu principal, acesse
GameObject > UI > Image . Isso vai criar um novo objeto de jogo, e ele será filho do objetoCanvas
. - Renomeie o objeto criado para
VirtualItemWidget
.
- No painel
- Adicione objetos da interface para exibir as informações do item:
- Crie um objeto para exibir o ícone do widget:
- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - No menu principal, acesse
GameObject > UI > Image . - Renomeie o objeto criado para
IconImage
.
- No painel
- Crie um objeto para exibir o nome do item:
- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - No menu principal, vá para
GameObject > UI > Legacy > Text . - Renomeie o objeto criado para
NameText
.
- No painel
- Crie um objeto para exibir a descrição do item:
- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - No menu principal, vá para
GameObject > UI > Legacy > Text . - Renomeie o objeto criado para
DescriptionText
.
- No painel
- Crie um objeto para o botão de compra do item:
- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - No menu principal, vá para
GameObject > UI > Legacy > Button . Isso vai criar um objeto de botão com o objeto filhoText
. - Renomeie o objeto criado para
BuyButton
. - Renomeie o objeto
Text
paraPriceText
.
- No painel
- Crie um objeto para exibir o ícone do widget:
- Adicione o script do widget do item como um componente para o objeto
VirtualItemWidget
:- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - No painel
Inspector , clique emAdd Component e selecione o scriptVirtualItemWidget
.
- No painel
- Atribua elementos de interface aos espaços de script necessários:
- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - Arraste e solte os objetos de interface filhos do painel
Hierarchy aos espaços correspondentes do componenteVirtualItemWidget
no painelInspector .
- No painel
- Converta o objeto
VirtualItemWidget
criado a um prefab:- No painel
Hierarchy , selecione o objetoVirtualItemWidget
. - Arraste e solte o objeto ao painel
Project na pastaAssets . Como resultado, um novo objeto aparecerá na pastaAssets , e o objeto na cena mudará de cor para azul.
- No painel
Exemplo do prefab do widget de item:

Crie um script da loja
Crie um novo script chamado StoreController
:
- Abra seu projeto no editor Unity.
- No menu principal, acesse
Assets > Create > C# Script . - Especifique o nome do novo arquivo na pasta
Assets comoStoreController
. - Abra o arquivo criado no editor e adicione o seguinte código a ele:
- 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}");
}
}
}
- Salve as alterações.
Criar objeto da loja
Criar a interface para exibir a lista de itens na loja:
- Adicione um componente que reúne widgets de itens individuais em uma grade, gerencia o local e tamanho dos objetos aninhados. Para fazer isso:
- No painel
Hierarchy , selecione o objetoCanvas
. - No painel
Inspector , clique emAdd Component e selecione o scriptGrid Layout Group
. - No painel
Inspector , altere as configurações do componente se necessário: defina o tamanho da célula, espaçamento, etc.
- No painel
VirtualItemWidget
para uma visualização e configuração mais fácil. Isso permite que você avalie o layout geral da sua loja imediatamente.- Adicione o script da loja como componente ao objeto
Canvas
:- No painel
Hierarchy , selecione o objetoCanvas
. - No painel
Inspector , clique emAdd Component e selecione o scriptStoreController
.
- No painel
- Atribua os elementos aos espaços necessários do script
StoreController
:- No painel
Hierarchy , selecione o objetoCanvas
. - Arraste e solte o objeto
Canvas
do painelHierarchy ao espaçoWidgetsContainer no painelInspector . - Arraste e solte o objeto
VirtualItemWidget
do painelHierarchy ao espaçoWidgetPrefab no painelInspector .
- No painel
Exemplo do objeto da loja:

Inicialize e teste a loja
Inicialize a loja no editor Unity e verifique o funcionamento:
- Para o objeto
Canvas
, exclua todos os objetos filhos. - Clique em
Play . Como resultado, quando o aplicativo iniciar, uma janela de navegador com o widget Xsolla Login será aberta.

- Acesse o aplicativo. Após uma autorização do usuário bem-sucedida, o aplicativo solicitará o catálogo de itens da Xsolla. Depois de recuperar os dados do item com sucesso, o aplicativo cria os widgets necessários. Como resultado, é exibida uma lista de itens da loja.

- Clique no botão de compra em qualquer widget de item. O aplicativo inicia o processo de compra e exibe a interface de pagamento no navegador.

- Conclua o processo de compra. Use cartões de teste para o pagamento. Após uma compra bem-sucedida, a mensagem
Purchase completed
aparecerá nos registros.

Links úteis
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.