SDK para Unity (PC, web) / Integre o SDK no lado do aplicativo
  Voltar aos Documentos

SDK para Unity (PC, web)

Integre o SDK no lado do aplicativo

Informações gerais

  1. Projete uma interface para o sistema de login, a loja do jogo e outras páginas para o seu aplicativo.
  2. 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.

Observação
Você pode criar sua própria solução seguindo as instruções Unity, ou usar a cena de demonstração como um modelo. Para adaptar a interface da cena de demonstração ao seu aplicativo, use o UI Builder.

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:

  1. O usuário inicializa o jogo.
  2. O aplicativo inicializa o widget da web Xsolla Login.
  3. O usuário acessa o jogo e navega pelo catálogo de itens.
  4. O aplicativo solicita o catálogo de itens da Xsolla.
  5. Após recuperar os dados do item com sucesso, o aplicativo exibe o catálogo de itens.
  6. O usuário clica no botão de compra do item.
  7. O aplicativo inicia o processo de compra e exibe a interface de pagamento no navegador.
  8. O usuário faz o pagamento.
  9. O aplicativo fecha a interface de pagamento e passa os dados de pagamento à Xsolla.
  10. 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:

Observação
A personalização do widget só estará disponível depois de assinar o Contrato de Licenciamento de Produto Xsolla. Para assinar o contrato, vá para a seção Contratos & Taxas > Contratos em sua 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:

  1. Abra seu projeto no editor Unity.
  2. No menu principal, acesse Assets > Create > C# Script.
  3. Especifique o nome do novo arquivo na pasta Assets como VirtualItemWidget.
  4. Abra o arquivo criado no editor e adicione o seguinte código a ele:
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. Salve as alterações.

Crie um widget prefab de item

Crie a interface para exibir itens na loja:

  1. Crie um objeto Canvas para exibir elementos de interface. Para fazer isso, no menu principal, vá para GameObject > UI > Canvas. Isso criará os seguintes objetos na cena:
    • O objeto Canvas com os componentes Canvas, Canvas Scaler e Graphic Raycaster.
    • O objeto EventSystem, se tal objeto já não existir na cena.
  2. Crie o objeto filho VirtualItemWidget:
    1. No painel Hierarchy, selecione o objeto Canvas.
    2. No menu principal, acesse GameObject > UI > Image. Isso vai criar um novo objeto de jogo, e ele será filho do objeto Canvas.
    3. Renomeie o objeto criado para VirtualItemWidget.
  3. Adicione objetos da interface para exibir as informações do item:
    1. Crie um objeto para exibir o ícone do widget:
      1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
      2. No menu principal, acesse GameObject > UI > Image.
      3. Renomeie o objeto criado para IconImage.
    1. Crie um objeto para exibir o nome do item:
      1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
      2. No menu principal, vá para GameObject > UI > Legacy > Text.
      3. Renomeie o objeto criado para NameText.
    1. Crie um objeto para exibir a descrição do item:
      1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
      2. No menu principal, vá para GameObject > UI > Legacy > Text.
      3. Renomeie o objeto criado para DescriptionText.
    1. Crie um objeto para o botão de compra do item:
      1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
      2. No menu principal, vá para GameObject > UI > Legacy > Button. Isso vai criar um objeto de botão com o objeto filho Text.
      3. Renomeie o objeto criado para BuyButton.
      4. Renomeie o objeto Text para PriceText.
  4. Adicione o script do widget do item como um componente para o objeto VirtualItemWidget:
    1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
    2. No painel Inspector, clique em Add Component e selecione o script VirtualItemWidget.
  5. Atribua elementos de interface aos espaços de script necessários:
    1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
    2. Arraste e solte os objetos de interface filhos do painel Hierarchy aos espaços correspondentes do componente VirtualItemWidget no painel Inspector.
  6. Converta o objeto VirtualItemWidget criado a um prefab:
    1. No painel Hierarchy, selecione o objeto VirtualItemWidget.
    2. Arraste e solte o objeto ao painel Project na pasta Assets. Como resultado, um novo objeto aparecerá na pasta Assets, e o objeto na cena mudará de cor para azul.

Exemplo do prefab do widget de item:

Crie um script da loja

Crie um novo script chamado StoreController:

  1. Abra seu projeto no editor Unity.
  2. No menu principal, acesse Assets > Create > C# Script.
  3. Especifique o nome do novo arquivo na pasta Assets como StoreController.
  4. Abra o arquivo criado no editor e adicione o seguinte código a ele:
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. Salve as alterações.

Criar objeto da loja

Criar a interface para exibir a lista de itens na loja:

  1. Adicione um componente que reúne widgets de itens individuais em uma grade, gerencia o local e tamanho dos objetos aninhados. Para fazer isso:
    1. No painel Hierarchy, selecione o objeto Canvas.
    2. No painel Inspector, clique em Add Component e selecione o script Grid Layout Group.
    3. No painel Inspector, altere as configurações do componente se necessário: defina o tamanho da célula, espaçamento, etc.
Observação
Recomendamos fazer diversas cópias do objeto VirtualItemWidget para uma visualização e configuração mais fácil. Isso permite que você avalie o layout geral da sua loja imediatamente.
  1. Adicione o script da loja como componente ao objeto Canvas:
    1. No painel Hierarchy, selecione o objeto Canvas.
    2. No painel Inspector, clique em Add Component e selecione o script StoreController.
  2. Atribua os elementos aos espaços necessários do script StoreController:
    1. No painel Hierarchy, selecione o objeto Canvas.
    2. Arraste e solte o objeto Canvas do painel Hierarchy ao espaço WidgetsContainer no painel Inspector.
    3. Arraste e solte o objeto VirtualItemWidget do painel Hierarchy ao espaço WidgetPrefab no painel Inspector.

Exemplo do objeto da loja:

Inicialize e teste a loja

Inicialize a loja no editor Unity e verifique o funcionamento:

  1. Para o objeto Canvas, exclua todos os objetos filhos.
  2. Clique em Play. Como resultado, quando o aplicativo iniciar, uma janela de navegador com o widget Xsolla Login será aberta.
  1. 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.
  1. 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.
  1. 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.
Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Links úteis

Última atualização: 7 de Fevereiro de 2025

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

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!