Cómo usar Pay Station en combinación con la autenticación de Firebase
Si ya ha implementado la autenticación de usuario en su aplicación usando Firebase, puede generar un token de pago en el lado de Firebase 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:
- Regístrese en Cuenta del editor y cree un nuevo proyecto. Necesitará el ID del proyecto creado para los pasos posteriores.
- 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.
- 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 la función de nube de Firebase.
- Implemente la apertura de la interfaz de pago en el lado del cliente de su aplicación usando el kit SDK.
Para ejecutar la integración y empezar a aceptar pagos reales, deberá firmar un acuerdo de concesión de licencia con Xsolla.
Puede firmar el acuerdo de licencia en cualquier paso de la integración, pero tenga en cuenta que el proceso de revisión puede tardar hasta 3 días laborables.
Utilice la aplicación web de muestra como ejemplo para implementar el uso combinado de la autenticación de Firebase y Pay Station. El código fuente de la aplicación de muestra está disponible en GitHub.
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.
La contraseña de Cuenta del editor puede estar compuesta por letras del alfabeto latino, números y caracteres especiales y debe contener al menos:
- 8 caracteres
- un dígito
- una letra mayúscula
- y una letra minúscula
Para maximizar la seguridad de su contraseña, le recomendamos:
- cambiar su contraseña al menos una vez cada 90 días
- utilizar una contraseña nueva que no coincida con las 4 últimas contraseñas de su cuenta
- utilizar una contraseña única que no coincida con contraseñas empleadas en ningún otro lugar
- no almacenar su contraseña en un lugar de fácil acceso
- utilizar gestores de contraseñas para almacenar su contraseña
Cuenta del editor utiliza la autenticación de dos factores y envía un código de confirmación siempre que se produce un intento de autenticación.
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:
- Abra Cuenta del editor.
- En el menú lateral, haga clic en Create project.
- Introduzca el nombre de su proyecto en inglés (obligatorio).
- Seleccione una o varias plataformas de lanzamiento de su juego (obligatorio).
- 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).
- Seleccione el motor del juego.
- Seleccione las opciones de monetización que utiliza o prevé utilizar.
- Especifique si el juego ya se ha lanzado. Si el juego aún no se ha lanzado, especifique la fecha de lanzamiento prevista.
- 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
Tiene que crear un catálogo en el lado de Xsolla. Puede agregar artículos manualmente o importarlos desde Google Play o PlayFab. Cuando haga importaciones desde Google Play, puede importar un máximo de 100 artículos cada vez.
Estas instrucciones indican los pasos para la configuración básica de un artículo virtual. Más tarde, podrá agregar otros artículos a su catálogo (moneda virtual, lotes y claves del juego), crear grupos de artículos, establecer campañas promocionales, precios regionales, etc.
Para agregar un artículo virtual con la configuración básica al catálogo:
- Abra su proyecto en Cuenta del editor.
- Haga clic en Store en el menú lateral.
- En el panel Virtual items, haga clic en Connect.
- En el menú desplegable, seleccione Create item.
- 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)
- Especificar el precio del artículo:
- Establezca el conmutador Price in real currency en On.
- En el campo Default currency, cambie la moneda (opcional) y especifique el precio del artículo.
- Si cambió la moneda en el campo Default currency, seleccione la misma moneda en el campo Price in real currency.
- Cambie el estado del artículo a Available.
- Haga clic en Create item.
Visualizar el catálogo en el lado del cliente de la aplicación
- Descargue el SDK desde CDN o desde GitHub.
- Descomprima el paquete.
- En el menú principal, acceda a
Assets > Import Package > Custom Package y seleccione el SDK descargado. - En el menú principal, vaya a
Window > Xsolla > Edit Settings . - Vaya al panel
Inspector . En el campoProject ID , especifique el ID del proyecto que se encuentra en Cuenta del editor junto al nombre de su proyecto.
- En el lado del cliente de la aplicación, agregue una interfaz de usuario para visualizar el catálogo de productos.
- Implemente la solicitud de un catálogo de artículos a los servidores de Xsolla.
Para obtener una lista de artículos virtuales, use el método del SDK GetCatalog
. También puede obtener información sobre los artículos del catálogo utilizando otros métodos del SDK.
Para ver un tutorial paso a paso sobre la creación de una página de catálogo, consulte Visualización de catálogo de artículos.
Establecer la compra de artículos
Crear pedido mediante la función de nube
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.
Para agregar una función de nube a un proyecto:
- Instale la CLI (interfaz de línea de comandos) de Firebase. Para hacerlo, ejecute el comando CLI:
npm install -g firebase-tools
- Para vincular su proyecto al proyecto de Firebase, inicialice el proyecto de Firebase ejecutando el comando CLI:
firebase init functions
- Siga las instrucciones del instalador para configurar los ajustes:
- Seleccione un código base existente.
- Defina JavaScript como el lenguaje empleado para crear funciones de nube.
- Instale las dependencias.
- Abra el
functions/index.js
y modifíquelo:
- javascript
// The Cloud Functions for Firebase SDK to create Cloud Functions and triggers.
const functions = require('firebase-functions/v1');
const projectId = <projectId>;
const apiKey = <apiKey>;
exports.getXsollaPaymentToken = functions.https.onRequest((req, res) => {
const requestBody = req.body;
if (!requestBody) {
res.status(400).send('Request body is missing');
return;
}
const userId = requestBody.data.uid;
const email = requestBody.data.email;
const sku = requestBody.data.sku;
const returnUrl = requestBody.data.returnUrl;
const payload = {
user: {
id: {value: userId},
name: {
value: email
},
email: {
value: email
},
country: {
value: 'US',
allow_modify: false
}
},
purchase: {
items: [
{
sku: sku,
quantity: 1
}
]
},
sandbox: true,
settings: {
language: 'en',
currency: 'USD',
return_url: returnUrl,
ui: {
theme: '63295aab2e47fab76f7708e3'
}
}
}
let url = "https://store.xsolla.com/api/v3/project/" + projectId.toString() + "/admin/payment/token";
fetch(
url,
{
method: "POST",
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic ' + btoa(`${projectId}:${apiKey}`)
},
body: JSON.stringify(payload)
},
)
.then(xsollaRes => {
// Handle the response data
if (xsollaRes.ok) {
return xsollaRes.json();
} else {
throw new Error(`HTTP request failed with status ${xsollaRes.status} and statusText: ${xsollaRes.statusText}`)
}
})
.then(data => {
res.send(JSON.stringify(data));
})
.catch(error => {
res.send("Error = " + error);
});
});
exports.webhookFakeResponse = functions.https.onRequest((request, response) => {
response.status(200).send()
})
- En el script, especifique los valores para las variables:
projectId
: ID del proyecto que puede encontrar en su Cuenta del editor junto al nombre del proyecto.
apiKey
: 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
- Para probar la función de nube con el emulador, ejecute el comando CLI:
firebase emulators:start
- Después de ejecutar la función de nube, puede hacer una llamada a los siguientes métodos en el lado del cliente de su aplicación:
getXsollaPaymentToken
: devuelve el token de pago para abrir la interfaz de pago.webhookFakeResponse
: envía el código HTTP200
en respuesta al webhook Payment. El método no contiene una lógica de validación de compra: úselo solo para las pruebas. Para obtener la lista completa de webhooks e información general sobre cómo operar con ellos, consulte la documentación de webhooks.
- Para llamar a los métodos de forma local, use las URL
https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken
yhttps://localhost:5001/{firebase-project-id}/us-central1/webhookFakeResponse
, en los cuales{firebase-project-id}
es el ID del proyecto de Firebase (Firebase console > Project Settings > Project ID).
- Para implementar la función de nube en producción, ejecute el comando CLI:
firebase deploy --only functions
- Cuando se haya implementado en producción, puede llamar a los métodos a través de las URL
https://us-central1-{firebase-project-id}.cloudfunctions.net/getXsollaPaymentToken
yhttps://us-central1-{firebase-project-id}.cloudfunctions.net/webhookFakeResponse
, el los cuales{firebase-project-id}
es el ID del proyecto de Firebase (Firebase console > Project Settings > Project ID). Para obtener más detalles sobre cómo ejecutar la función en producción, consulte la documentación de Firebase.
Cree el pedido y abra la interfaz de pago en el proyecto de Unity
- Abra su proyecto de Unity.
- Haga cambios en el script de controlador de páginas:
- Agregue el método
MakeCloudFunctionRequest
método para llamar a la función de nube. Para invocar el métodogetXsollaPaymentToken
, facilite una de las siguientes direcciones URL, en las cuales{firebase-project-id}
es el ID del proyecto de Firebase (Firebase console > Project Settings > Project ID):
- Agregue el método
- para acceso local:
https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken
- para acceso en la producción:
https://us-central1-{firebase-project-id}.cloudfunctions.net/getXsollaPaymentToken
- para acceso local:
- C++
IEnumerator MakeCloudFunctionRequest(string sku)
{
string url = "https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken";
using (UnityWebRequest webRequest = UnityWebRequest.Get(url))
{
var userData = new UserData()
{
data = new UserData.Data() {
uid = user.UserId,
email = user.Email,
sku = sku,
returnUrl = "app://xpayment.com.xsolla.unitysample"
}
};
byte[] data = System.Text.Encoding.UTF8.GetBytes(JsonUtility.ToJson(userData, true));
UploadHandlerRaw upHandler = new UploadHandlerRaw(data);
upHandler.contentType = "application/json";
webRequest.uploadHandler = upHandler;
webRequest.method = "POST";
yield return webRequest.SendWebRequest();
if (webRequest.result != UnityWebRequest.Result.Success)
{
Debug.LogError("Error: " + webRequest.error);
}
else
{
var paymentToken = "";
XsollaWebBrowser.OpenPurchaseUI(
paymentToken,
false);
Debug.Log("Response: " + webRequest.downloadHandler.text);
}
}
}
- Agregue devolución de llamada de función de nube al pulsar el botón de compra:
- C++
private void OnItemsRequestSuccess(StoreItems storeItems)
{
foreach (var storeItem in storeItems.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<StoreItemWidget>();
widget.BuyButton.onClick.AddListener(() =>
{
StartCoroutine(MakeCloudFunctionRequest(storeItem.sku));
});
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
if (storeItem.price != null)
{
var realMoneyPrice = storeItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);
}
}
Puede usar el proyecto de prueba como ejemplo de implementación. El código fuente del proyecto de Unity está disponible en GitHub.
Ejemplo de script de controlador de páginas:
- C++
using Firebase.Extensions;
using System;
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
using Xsolla.Catalog;
using Xsolla.Core;
[Serializable]
public class UserData
{
public Data data;
[Serializable]
public class Data
{
public string uid;
public string email;
public string sku;
public string returnUrl;
}
}
public class FirebaseExamplePage : MonoBehaviour
{
public GameObject LoginContainer;
public GameObject StoreItemsContainer;
public InputField EmailInputField;
public InputField PasswordInputField;
public Button LoginButton;
public Button RegisterButton;
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
protected Firebase.Auth.FirebaseAuth auth;
Firebase.Auth.FirebaseUser user = null;
Firebase.DependencyStatus dependencyStatus = Firebase.DependencyStatus.UnavailableOther;
public virtual void Start()
{
Firebase.FirebaseApp.CheckAndFixDependenciesAsync().ContinueWithOnMainThread(task => {
dependencyStatus = task.Result;
if (dependencyStatus == Firebase.DependencyStatus.Available)
{
InitializeFirebase();
}
else
{
Debug.LogError(
"Could not resolve all Firebase dependencies: " + dependencyStatus);
}
});
}
protected void InitializeFirebase()
{
StoreItemsContainer.SetActive(false);
Debug.Log("Setting up Firebase Auth");
auth = Firebase.Auth.FirebaseAuth.DefaultInstance;
auth.StateChanged += AuthStateChanged;
RegisterButton.onClick.AddListener(() =>
{
auth.CreateUserWithEmailAndPasswordAsync(EmailInputField.text, PasswordInputField.text).ContinueWith(task =>
{
if (task.IsCanceled)
{
Debug.LogError("CreateUserWithEmailAndPasswordAsync was canceled.");
return;
}
if (task.IsFaulted)
{
Debug.LogError("CreateUserWithEmailAndPasswordAsync encountered an error: " + task.Exception);
return;
}
Firebase.Auth.AuthResult result = task.Result;
Debug.LogFormat("Firebase user created successfully: {0} ({1})",
result.User.DisplayName, result.User.UserId);
});
});
LoginButton.onClick.AddListener(() =>
{
auth.SignInWithEmailAndPasswordAsync(EmailInputField.text, PasswordInputField.text).ContinueWith(task =>
{
if (task.IsCanceled)
{
Debug.LogError("SignInWithEmailAndPasswordAsync was canceled.");
return;
}
if (task.IsFaulted)
{
Debug.LogError("SignInWithEmailAndPasswordAsync encountered an error: " + task.Exception);
return;
}
Firebase.Auth.AuthResult result = task.Result;
Debug.LogFormat("Firebase user logged in successfully: {0} ({1})",
result.User.DisplayName, result.User.UserId);
});
});
}
void AuthStateChanged(object sender, System.EventArgs eventArgs)
{
Firebase.Auth.FirebaseAuth senderAuth = sender as Firebase.Auth.FirebaseAuth;
if (senderAuth == auth && senderAuth.CurrentUser != user)
{
bool signedIn = user != senderAuth.CurrentUser && senderAuth.CurrentUser != null;
if (!signedIn && user != null)
{
Debug.Log("Signed out " + user.UserId);
}
user = senderAuth.CurrentUser;
if (signedIn)
{
Debug.Log("AuthStateChanged Signed in " + user.UserId);
LoadCatalog();
}
}
}
void OnDestroy()
{
if (auth != null)
{
auth.SignOut();
auth.StateChanged -= AuthStateChanged;
auth = null;
}
}
private void LoadCatalog()
{
LoginContainer.SetActive(false);
StoreItemsContainer.SetActive(true);
XsollaCatalog.GetCatalog(OnItemsRequestSuccess, OnError);
}
private void OnItemsRequestSuccess(StoreItems storeItems)
{
foreach (var storeItem in storeItems.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<StoreItemWidget>();
if(widget != null)
{
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
widget.BuyButton.onClick.AddListener(() =>
{
StartCoroutine(MakeCloudFunctionRequest(storeItem.sku));
});
if (storeItem.price != null)
{
var realMoneyPrice = storeItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);
}
}
}
IEnumerator MakeCloudFunctionRequest(string sku)
{
string url = "https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken";
using (UnityWebRequest webRequest = UnityWebRequest.Get(url))
{
var userData = new UserData()
{
data = new UserData.Data() {
uid = user.UserId,
email = user.Email,
sku = sku,
returnUrl = "app://xpayment.com.xsolla.unitysample"
}
};
byte[] data = System.Text.Encoding.UTF8.GetBytes(JsonUtility.ToJson(userData, true));
UploadHandlerRaw upHandler = new UploadHandlerRaw(data);
upHandler.contentType = "application/json";
webRequest.uploadHandler = upHandler;
webRequest.method = "POST";
yield return webRequest.SendWebRequest();
if (webRequest.result != UnityWebRequest.Result.Success)
{
Debug.LogError("Error: " + webRequest.error);
}
else
{
string responseJson = webRequest.downloadHandler.text;
var responseData = JsonUtility.FromJson<OrderData>(responseJson);
var paymentToken = responseData.token;
int orderId = responseData.order_id;
XsollaWebBrowser.OpenPurchaseUI(
paymentToken,
false);
Debug.Log("Response: " + webRequest.downloadHandler.text);
}
}
}
private void OnError(Error error)
{
Debug.LogError($"Error: {error.errorMessage}");
}
}
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
El SDK le permite hacer un seguimiento del estado del pedido en el lado del cliente de su aplicación. Sin embargo, le recomendamos que establezca un controlador del webhook Payment para recibir información del pedido en el back-end de su aplicación. Esto le permite implementar una validación adicional de las compras realizadas.
Para obtener la lista completa de webhooks e información general sobre cómo operar con ellos, consulte la documentación de webhooks.
Para configurar los webhooks en el lado de Xsolla:
- Abra su proyecto en Cuenta del editor.
- Haga clic en Project settings en el menú lateral y vaya a la sección Webhooks.
- En el campo Webhook URL, ingrese la URL a la que Xsolla enviará los webhooks.
Para realizar pruebas, puede especificarhttps://us-central1-{firebase-project-id}.cloudfunctions.net/webhookFakeResponse
, en la cual{firebase-project-id}
es el ID del proyecto de Firebase (Firebase console>Project Settings > Project ID). En este caso, Firebase simula el procesamiento eficiente del webhook. Para un proyecto real, necesita agregar lógica de validación de compra.
Para probar los webhooks, también puede elegir cualquier sitio web específico, como webhook.site, o una plataforma, como ngrok.
- 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.
- Haga clic en Enable webhooks.
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.