Cómo usar Pay Station en combinación con la autenticación de PlayFab

Si ya ha implementado la autenticación de usuario en su aplicación usando PlayFab, puede generar un token de pago en el lado de PlayFab y, luego, transmitirlo al lado del cliente de la aplicación para abrir la interfaz de pago.

Al usar esta opción de integración, debe implementar de forma independiente la lógica para determinar el país y la moneda del usuario para abonar la compra.

Flujo de integración:

1. Crear un proyecto.

1. Regístrese en Cuenta del editor y cree un nuevo proyecto. Necesitará el ID del proyecto creado para los pasos posteriores.

2. Establecer un catálogo:
   • Cree un catálogo de artículos en el lado de Xsolla. Puede agregar artículos manualmente o importarlos desde Google Play o PlayFab.
   • Implemente la obtención y visualización del catálogo en el lado del cliente de la aplicación usando el kit SDK.

3. Establecer la compra de un artículo:
   • Cree un pedido con los datos del usuario y del artículo en el lado del cliente de la aplicación usando el script de PlayFab Cloud.
   • Implemente la apertura de la interfaz de pago en el lado del cliente de su aplicación usando el kit SDK.

4. Establecer un seguimiento del estado del pedido.

Crear proyecto

Registrarse en Cuenta del editor

Cuenta del editor es la herramienta fundamental para configurar las funciones de Xsolla, así como para operar con los análisis y las transacciones.

Los datos sobre la empresa y su aplicación indicados durante el registro se usarán para crear un borrador de acuerdo de licencia con Xsolla y para generar recomendaciones sobre las soluciones que se adaptan a sus necesidades. Puede modificar los datos después, pero si facilita los datos correctos al registrarse, se acelerará el proceso de firma del acuerdo de licencia.

Para registrarse, acceda a Cuenta del editor y cree una cuenta.

Crear proyecto en Cuenta del editor

Si tiene varias aplicaciones, recomendamos crear un proyecto independiente para cada una de ellas. A partir de los datos especificados durante la creación del proyecto, Xsolla genera recomendaciones sobre soluciones que se adaptan a sus necesidades.

Para crear un nuevo proyecto:

1. Abra Cuenta del editor.
2. En el menú lateral, haga clic en Create project.

3. Introduzca el nombre de su proyecto en inglés (obligatorio).

4. Seleccione una o varias plataformas de lanzamiento de su juego (obligatorio).
5. Agregue un enlace a su juego. Si su juego aún no tiene sitio web, agregue un enlace al código fuente que incluya información sobre el juego (obligatorio).
6. Seleccione el motor del juego.
7. Seleccione las opciones de monetización que utiliza o prevé utilizar.
8. Especifique si el juego ya se ha lanzado. Si el juego aún no se ha lanzado, especifique la fecha de lanzamiento prevista.
9. Haga clic en Create project. Podrá ver una página con los productos de Xsolla que le recomendamos.

Durante el proceso de integración, debe proporcionar el ID del proyecto que se encuentra en su Cuenta del editor junto al nombre del proyecto.

Establecer catálogo

Crear artículos en Cuenta del editor

Para agregar un artículo virtual con la configuración básica al catálogo:

1. Abra su proyecto en Cuenta del editor.
2. Haga clic en Store en el menú lateral.
3. En el panel Virtual items, haga clic en Connect.
4. En el menú desplegable, seleccione Create item.

5. Establezca la configuración básica del artículo en los siguientes campos:
   • Image (opcional)
   • SKU (ID único del artículo)
   • Item name
   • Description (opcional)

6. Especificar el precio del artículo:
   1. Establezca el conmutador Price in real currency en On.
   2. En el campo Default currency, cambie la moneda (opcional) y especifique el precio del artículo.
   3. Si cambió la moneda en el campo Default currency, seleccione la misma moneda en el campo Price in real currency.

7. Cambie el estado del artículo a Available.

8. Haga clic en Create item.

Visualizar el catálogo en el lado del cliente de la aplicación

1. Descargue el SDK desde CDN o desde GitHub.
2. Descomprima el paquete.
3. En el menú principal, acceda a Assets > Import Package > Custom Package y seleccione el SDK descargado.
4. En el menú principal, vaya a Window > Xsolla > Edit Settings.
5. Vaya al panel Inspector. En el campo Project ID, especifique el ID del proyecto que se encuentra en Cuenta del editor junto al nombre de su proyecto.

6. En el lado del cliente de la aplicación, agregue una interfaz de usuario para visualizar el catálogo de productos.
7. Implemente la solicitud de un catálogo de artículos a los servidores de Xsolla.

Establecer la compra de artículos

Para crear un pedido con los datos del usuario y del artículo en el lado de Xsolla, agregue al proyecto una función de nube que use la llamada API Crear token de pago para la compra. Esta llamada devolverá un token de pago, el cual es necesario para abrir la interfaz de pago y hacer una compra.

Limitaciones:

• Necesita transmitir el país del usuario o la dirección IP del usuario cuando se solicite el token de pago.
• Si no transmite la moneda en el token, esta se determinaré en función del país.
• Si transmite la moneda en el token, el usuario paga con esta moneda.

Agregar Cloud Script (script en la nube) a su proyecto

1. Abra Visual Studio Code y acceda a la pestaña Azure.
2. En la sección Workspace, haga clic en el icono + y seleccione Create Function.

3. Seleccione el directorio del nuevo proyecto. Se mostrará un menú para crear un nuevo proyecto con varias opciones de configuración.

4. Especifique la configuración del nuevo proyecto:
   1. Seleccione un idioma para su proyecto de función: C#.
   2. Seleccione un tiempo de ejecución de .NET: .NET 8.0 Isolated (LTS).
   3. Seleccione una plantilla para la primera función de su proyecto: HTTP trigger.
   4. Introduzca un nombre de función: GetXsollaPaymentToken.
   5. Introduzca un espacio de nombres: My.Functions.
   6. Seleccione el nivel de autorización: Anonymous.
   7. Seleccione cómo le gustaría abrir su proyecto: Open in current window.

1. En consecuencia, Visual Studio Code generará un proyecto de C# y abrirá el archivo GetXsollaPaymentToken.cs generado.

5. Modifique el archivo GetXsollaPaymentToken.cs:

using System.Text;
using System.Net.Http.Headers;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;

namespace My.Function
{
    public class GetXsollaPaymentToken
    {
        private readonly ILogger<GetXsollaPaymentToken> _logger;

        private const int PROJECT_ID = ""; // Your Xsolla project ID
        private const string API_KEY = ""; // Your Xsolla API key

        public GetXsollaPaymentToken(ILogger<GetXsollaPaymentToken> logger)
        {
            _logger = logger;
        }

        [Function("GetXsollaPaymentToken")]
        public async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequest req)
        {
            _logger.LogInformation("GetXsollaPaymentToken function processed a request.");

            // Reading the request body
            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            _logger.LogInformation("Request body: " + requestBody);

            // Deserializing request body JSON
            dynamic data = JsonConvert.DeserializeObject(requestBody);

            // Extracting necessary data from JSON
            string uid = data.FunctionArgument.uid;
            string sku = data.FunctionArgument.sku;
            string returnUrl = data.FunctionArgument.returnUrl;

            // Creating payload for Xsolla API
            var payload = new
            {
                user = new
                {
                    id = new { value = uid },
                    country = new { value = "US", allow_modify = false }
                },
                purchase = new
                {
                    items = new[]
                    {
                        new { sku = sku, quantity = 1 }
                    }
                },
                sandbox = true,
                settings = new
                {
                    language = "en",
                    currency = "USD",
                    return_url = returnUrl,
                    ui = new { theme = "63295aab2e47fab76f7708e3" }
                }
            };

            // Constructing Xsolla API URL
            string url = $"https://store.xsolla.com/api/v3/project/{PROJECT_ID}/admin/payment/token";

            // Sending request to Xsolla API
            using (HttpClient client = new HttpClient())
            {
                // Adding authorization header
                string headerValue = Convert.ToBase64String(Encoding.UTF8.GetBytes($"{PROJECT_ID}:{API_KEY}"));
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", headerValue);

                // Serializing payload to JSON
                var jsonPayload = JsonConvert.SerializeObject(payload);
                var content = new StringContent(jsonPayload, Encoding.UTF8, "application/json");

                // Making POST request to Xsolla API
                var xsollaRes = await client.PostAsync(url, content);

                // Checking response from Xsolla API
                if (xsollaRes.IsSuccessStatusCode)
                {
                    // Reading successful response content
                    string responseContent = await xsollaRes.Content.ReadAsStringAsync();
                    return new OkObjectResult(responseContent);
                }
                else
                {
                    // Returning status code in case of failure
                    return new StatusCodeResult((int)xsollaRes.StatusCode);
                }
            }
        }
    }
}

1. En el script, defina los valores de las siguientes constantes:

1. • PROJECT_ID: ID del proyecto que puede encontrar en su Cuenta del editor junto al nombre del proyecto.

1. • API_KEY: clave de API. Se muestra en la Cuenta del editor solo una vez cuando se crea, y debe almacenarse en su lado. Puede crear una nueva clave en la siguiente sección:
     • Company settings > API keys
     • Project settings > API keys

Después de añadir el script en la nube, puede probar la llamada de la función GetXsollaPaymentToken en el entorno local.

Implementar el script en la nube

1. En Visual Studio Code vaya a la sección Azure > Resources y pulse en el icono +.
2. Seleccione Create Function App in Azure como recurso. Aparecerá un menú para crear una nueva aplicación con varias opciones de configuración.
3. Establezca los ajustes de la aplicación:

1. 1. Introduzca el nombre para la nueva aplicación de función: XsollaFunctions.
   2. Seleccione una pila de tiempo de ejecución: .NET 8 Isolated.
   3. Seleccione una ubicación para los nuevos recursos (puede escoger cualquier opción).

1. Espere a que se cree el grupo de recursos.

4. De la lista de recursos, seleccione el XsollaFunctions, invoque el menú contextual y seleccione Deply to Function App.

Tras agregar el script en la nube, puede probar la llamada de la función GetXsollaPaymentToken de forma remota.

Probar el script en la nube

Para probar el script en la nube (de forma local o remota), invoque a la función GetXsollaPaymentToken empleando Postman u otra herramienta. Para ello, haga lo siguiente:

1. En Visual Studio Code, acceda a la sección Azure > Workspace > Local Project > Functions y pulse en Start debugging to update this list.
2. Invoque al menú contextual de la función y seleccione Copy Function Url. Cuando haga pruebas de forma local, la URL tendrá este aspecto: http://localhost:7071/api/getXsollaPaymentToken. Cuando haga pruebas de forma remota, tendrá este otro: https://xsollafunctions.azurewebsites.net/api/GetXsollaPaymentToken.

3. Use la URL copiada para invocar la función con los parámetros especificados. Para invocar una función desde Postman:
   1. Cree una nueva solicitud GET.
   2. Proporcione la URL que copió en el paso 2.
   3. Vaya a la pestaña Body y especifique los parámetros de la solicitud.

Ejemplo de cuerpo de solicitud:

{

 "FunctionArgument": {

   "uid": "1D384D9EF12EAB8B",

   "sku": "booster_max_1",

   "returnUrl": "https://login.xsolla.com/api/blank"

 }

}

4. Pulse en Send. En la respuesta debería recibir JSON con los siguientes parámetros:
   • token: token de pago. Se requiere para abrir la interfaz de pago.
   • order_id: ID del pedido creado. Se requiere para realizar el seguimiento del estado del pedido.

Ejemplo de cuerpo de la respuesta:

{"token":"xsnpCF8tS4ox7quoibgTgPFVFxG9gTvS_lc_en_bg_2C2640_tb_6E7BF7","order_id":90288613}

Registrar la función para obtener un token de pago en PlayFab

1. Abra su proyecto en PlayFab.
2. En el menú lateral, pulse en Automation.
3. En la sección Register New Cloud Script Function, pulse en Register Function.
4. Introduzca el nombre de la función: GetXsollaPaymentToken.
5. Introduzca la URL de la función que copió en Visual Code Studio (consulte los pasos 1-2 de Pruebe el script en la nube).

Cree el pedido y abra la interfaz de pago en el proyecto de Unity

1. Abra su proyecto de Unity.
2. Cree el script XsollaPlayfabSample.cs con el siguiente contenido:

using System;
using PlayFab;
using PlayFab.ClientModels;
using PlayFab.CloudScriptModels;
using UnityEngine;
using Xsolla.Core;

public class XsollaPlayfabSample : MonoBehaviour
{
    private void Start()
    {
        // Logging in anonymously
        LoginAnonymous(
            // Callback function invoked after successful login
            userId => {
                // Requesting Xsolla payment token
                GetXsollaPaymentToken(
                    userId, // PlayFab user ID received after login
                    "booster_max_1", // SKU of the product
                    orderData => {
                        // Creating Xsolla token and opening purchase UI
                        XsollaToken.Create(orderData.token);
                        XsollaWebBrowser.OpenPurchaseUI(orderData.token);

                        // Adding order for tracking
                        OrderTrackingService.AddOrderForTracking(
                            orderData.order_id,
                            true,
                            () => Debug.Log("Payment completed"),
                            onError => Debug.LogError(onError.errorMessage));
                    });
            });
    }

    private static void LoginAnonymous(Action<string> onSuccess)
    {
        // Logging in with custom ID
        PlayFabClientAPI.LoginWithCustomID(
            new LoginWithCustomIDRequest {
                CustomId = SystemInfo.deviceUniqueIdentifier, // Unique ID generated based on the device
                CreateAccount = true
            },
            result => {
                // Logging the result
                Debug.Log("Logged with playfab id: " + result.PlayFabId);

                // Invoking onSuccess callback with PlayFab ID
                onSuccess?.Invoke(result.PlayFabId);
            },
            error => { Debug.LogError(error.GenerateErrorReport()); }); // Handling login error
    }

    private static void GetXsollaPaymentToken(string userId, string sku, Action<OrderData> onSuccess)
    {
        // Creating request data for Xsolla payment token
        var tokenRequestData = new PaymentTokenRequestData {
            uid = userId, // User ID
            sku = sku, // Product SKU
            returnUrl = $"app://xpayment.{Application.identifier}" // Return URL
        };

        // Executing a function in the PlayFab cloud to get payment token
        PlayFabCloudScriptAPI.ExecuteFunction(
            new ExecuteFunctionRequest {
                FunctionName = "GetXsollaPaymentToken", // Name of Azure function
                FunctionParameter = tokenRequestData, // Data passed to the function
                GeneratePlayStreamEvent = false // Setting true if call should show up in PlayStream
            },
            result => {
                // Logging the result
                Debug.Log($"GetXsollaPaymentToken result: {result.FunctionResult}");

                // Parsing JSON result to OrderData object
                OrderData orderData = JsonUtility.FromJson<OrderData>(result.FunctionResult.ToString());

                // Invoking onSuccess callback with order data
                onSuccess?.Invoke(orderData);
            },
            error => Debug.LogError($"Error: {error.GenerateErrorReport()}")); // Handling error
    }

    // Class for payment token request data
    public class PaymentTokenRequestData
    {
        public string uid; // User ID
        public string sku; // Product SKU
        public string returnUrl; // Return URL
    }
}

3. Cree una nueva escena.
4. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.

5. Agregue un script al objeto de juego:
   1. En el panel Hierarchy, seleccione el objeto.
   2. En el panel Inspector, haga clic en Add Component y seleccione el script XsollaPlayfabSample.

6. En el panel Hierarchy, invoque el menú contextual y seleccione UI > EventSystem.

Para probar la creación de pedidos, ejecute la escena pulsando en Play. Como resultado, debería mostrarse la interfaz de pago con la información del pedido.

El código fuente del proyecto de Unity está disponible en GitHub.

Establecer seguimiento del estado del pedido

Se requiere hacer el seguimiento del estado del pedido para garantizar que el pago se realizó correctamente y para conceder artículos al usuario.

Obtener el estado del pedido en el lado del cliente

La lógica de seguimiento del pedido se incluye en el método GetXsollaPaymentToken. Para procesar una compra correctamente, debe transmitirse una función que se invoca cuando el estado del pedido cambia a done.

El método del SDK AddOrderForTracking se utiliza para realizar el seguimiento. Para obtener información detallada sobre cómo funciona el método, consulte Hacer seguimiento del estado del pedido.

Obtener el estado del pedido en el lado del servidor

Para configurar los webhooks en el lado de Xsolla:

1. Abra su proyecto en Cuenta del editor.
2. Haga clic en Project settings en el menú lateral y vaya a la sección Webhooks.
3. En el campo Webhook URL, ingrese la URL a la que Xsolla enviará los webhooks.

4. Copie y guarde el valor del campo Secret key. Esta clave se genera por defecto y se usa para firmar webhooks. Si desea cambiarla, haga clic en el icono de actualización.
5. Haga clic en Enable webhooks.