Establecer la compra de artículos
Seleccione el método que mejor se adapte a su proyecto para acceder a los datos de Xsolla:
Crear un pedido en el lado del cliente de la aplicación
Para crear un pedido con los datos del usuario y del artículo en el lado de Xsolla, use la llamada API Crear pedido con un artículo especificado. Este método devolverá un token de pago, el cual es necesario para abrir la interfaz de pago y realizar un pago. Para utilizar el modo de aislador de proceso (sandbox), transmita el parámetro “sandbox”: true
en el cuerpo de la solicitud para obtener un token.
Abrir la interfaz de pago
Para abrir la interfaz de pago en una nueva ventana, use la siguiente URL: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
, en la cual TOKEN
es el token obtenido.
También puede abrir la interfaz de pago utilizando otras opciones:
- Con Pay Station Embed. Limitación: puede haber problemas al abrirla en el navegador del juego (WebView).
- En iframe. Limitación: puede haber problemas al abrirla en el navegador del juego (WebView) y en la versión móvil de su aplicación.
- html
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<button data-xpaystation-widget-open>Buy Credits</button>
Pay Station Embed permite obtener eventos de la interfaz de pago a través de postMessage
. Puede enviar estos eventos a sistemas de análisis. Para configurar el procesamiento de eventos en su sistema analítico, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.
El equipo de Xsolla ha creado un widget que simplifica la integración de la interfaz de pago en su sitio web. El script del widget está disponible en nuestro repositorio de GitHub.
Parámetros de inicialización del script:
Parámetro | Tipo | Descripción |
---|---|---|
access_token | string | Token, recibido a través de API. Obligatorio. |
sandbox | boolean | Establécelo en true para probar el proceso de pago: sandbox-secure.xsolla.com se utilizará en lugar de secure.xsolla.com . |
lightbox | object | Parámetros del Lightbox (objeto, solo versión de escritorio). |
payment_widget_ui.lightbox.width | string | Anchura del marco del Lightbox. Si es null , depende de la altura de Pay Station. Por defecto es null . |
payment_widget_ui.lightbox.height | string | Altura del marco del Lightbox. Si es null , depende de la altura de Pay Station. Por defecto es 100% . |
payment_widget_ui.lightbox.zIndex | integer | Define el orden de disposición. Por defecto es 1000 . |
payment_widget_ui.lightbox.overlayOpacity | integer | Opacidad del fondo del widget (0 - totalmente transparente, 1 - totalmente opaco). El valor por defecto es 60 % (.6 ). |
payment_widget_ui.lightbox.overlayBackground | string | Color de fondo de la superposición. Por defecto es #000000 . |
payment_widget_ui.lightbox.modal | boolean | Si es true , el marco del Lightbox no se puede cerrar. Por defecto es false . |
lightbox.closeByClick | boolean | Si es true , al hacer clic en la superposición se cerrará el Lightbox. Por defecto es true . |
lightbox.closeByKeyboard | boolean | Si es true , al pulsar ESC se cerrará el Lightbox. Por defecto es true . |
payment_widget_ui.lightbox.contentBackground | string | Color de fondo del marco. Por defecto es #ffffff . Tenga en cuenta que estos cambios de color no afectan al propio iframe de Pay Station, solo a la configuración del Lightbox que lo contiene. |
payment_widget_ui.lightbox.contentMargin | string | Margen del marco. Por defecto es 10px . |
payment_widget_ui.lightbox.spinner | string | Tipo de indicador de carga animado. Puede ser xsolla o round . Por defecto es xsolla . |
payment_widget_ui.lightbox.spinnerColor | string | Color del indicador giratorio. Sin valor por defecto. |
childWindow | object | Opciones para la ventana secundaria que contiene la interfaz de usuario de Pay Station. Compatible con la versión móvil. |
childWindow.target | string | Dónde abrir la ventana de Pay Station. Puede ser _blank , _self , _parent . Por defecto es _blank . |
El script permite realizar un seguimiento de los eventos de la interfaz de pago. En función del tipo de evento, puede realizar diversas acciones en la página web.
Lista de eventos:
Parámetro | Descripción |
---|---|
init | Widget inicializado. |
open | Widget abierto. |
load | Interfaz de pago (Pay Station) cargada. |
close | Interfaz de pago (Pay Station) cerrada. |
status | El usuario está en la página de estado. |
status-invoice | El usuario está en la página de estado; pago en curso. |
status-delivering | Evento cuando el usuario se movió en la página de estado, el pago se finalizó, y estamos enviando la notificación de pago. |
status-done | El usuario está en la página de estado; pago abonado en la cuenta del usuario. |
status-troubled | Evento cuando el usuario se movió en la página de estado, pero el pago no se pudo procesar. |
https://secure.xsolla.com/paystation4/?token=TOKEN
.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
.access_token
contiene datos privados del usuario. Asegúrese de utilizar la comunicación de servidor a servidor al obtener este parámetro.Para abrir la interfaz de pago en un iframe:
- Implemente el mecanismo
postMessage
para recibir eventos de la interfaz de pago. - Abra la interfaz de pago pulsando en el enlace
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
, en el cualTOKEN
es el token recibido.
Problema potencial: si no aparece un botón para copiar un código de confirmación de pago requerido por algunos sistemas de pago al abrir la interfaz de pago en un iframe, transmita el atributo allow=“clipboard-read; clipboard-write; payment”
al iframe.
Ejemplo:
- html
<iframe
src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
width="800"
height="700"
allow="clipboard-read; clipboard-write; payment"
></iframe>
Realizar pago de prueba
Para probar el proceso de pago, puede utilizar el modo de aislador de proceso (sandbox). El modo sandbox es un entorno independiente que admite todas las funciones de un entorno real, excepto los pagos reales y los rechazados. Puede acceder al modo sandbox enviando “sandbox”: true
cuando cree un pedido.
Antes de firmar un contrato con Xsolla, probar el proceso de pago solo está disponible en modo sandbox.
El proceso de pruebas no requiere retirar dinero de cuentas bancarias reales.
- Abra la interfaz de pago en modo Aislador de proceso (Sandbox).
- Elija el método de pago Tarjeta bancaria.
- Introduzca los datos de la tarjeta bancaria. En otros campos (p. ej., nombre o dirección), puede introducir cualquier dato. También puede especificar detalles incorrectos (número de tarjeta o fecha de expiración) para comprobar si se genera un error.
- Haga clic en Pagar.
Además de los datos de la tarjeta, debe especificar el código postal si se cumple al menos una de las siguientes condiciones:
- El país del usuario es EE. UU. o Canadá.
- El número de identificación bancaria (BIN) indica que la tarjeta se emitió en EE. UU.
Puede especificar cualquier código postal válido (p. ej., 12345). Esto determina el tipo impositivo sobre las ventas y no afecta al proceso del pago de prueba.
Los pagos con tarjeta bancaria sandbox (aislador de proceso) pueden realizarse en las siguientes divisas: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND y ZAR.
Para obtener más información sobre las transacciones, incluyendo las tasas, realizadas en modo aislador de proceso (Sandbox):
- Abra su Cuenta del editor.
- Vaya a Accounting > Transaction registry.
- Marque la casilla Show test transactions.
Asimismo, puede ver los detalles de las transacciones y solicitar reembolsos en Cuenta del editor, en la sección Support > Transaction search.
Crear el pedido y abrir la interfaz de pago
Para crear un pedido con los datos del usuario y del artículo en el lado de Xsolla, invoque el método createOrderByItemSku
del SDK, transmitiéndole los siguientes parámetros:
itemSku
— el código (SKU) del artículo que el usuario desea adquirir.onSuccess
— la devolución de llamada de compra realizada con éxito, que se desencadena cuando el pedido pasa al estadodone
.onError
— devolución de llamada de error de solicitud.onBrowseClosed
— la devolución de llamada de cierre del navegador (opcional). El evento solamente se rastrea al abrir la interfaz de pago del usuario en el navegador integrado. Los eventos de navegadores externos no se rastrean.purchaseParams
— parámetros de compra y configuración de la interfaz de pago del usuario, como configuración regional y divisa (opcional).customHeaders
— encabezados de solicitud web personalizados (opcional).
El método XsollaCatalog.Purchase
inicia el proceso de compra del artículo especificado, el cual incluye la creación del pedido, la apertura de la interfaz de pago y el seguimiento del estado del pedido. En el parámetro onSuccess transmita una función, que se invoca cuando el pedido pasa al estado done
.
Cuando usted crea un pedido, Xsolla genera un token de pago, necesario para abrir la interfaz de pago y hacer un pago.
Por defecto, el ciclo de vida del token es de 24 horas. Si quiere cambiar este valor, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com. El nuevo valor se habilitará para todos los proyectos de su empresa creados en Cuenta del editor.
Realizar pago de prueba
Para probar el proceso de pago, puede utilizar el modo de aislador de proceso (sandbox). El modo sandbox es un entorno independiente que admite todas las funciones de un entorno real, excepto los pagos reales y los rechazados. Para acceder al modo sandbox, debe haber marcado la casilla
Antes de firmar un contrato con Xsolla, probar el proceso de pago solo está disponible en modo sandbox.
El proceso de pruebas no requiere retirar dinero de cuentas bancarias reales.
- Ejecute su aplicación o escena en Unity Editor.
- Elija el método de pago Bank card (Tarjeta bancaria).
- Introduzca los datos de la tarjeta bancaria. En otros campos (p. ej., nombre o dirección), puede introducir cualquier dato. También puede especificar detalles incorrectos (número de tarjeta o fecha de caducidad) para comprobar si se genera un error.
- Haga clic en Pay.
Además de los datos de la tarjeta, debe especificar el código postal si se cumple al menos una de las siguientes condiciones:
- El país del usuario es EE. UU. o Canadá.
- El número de identificación bancaria (BIN) indica que la tarjeta se emitió en EE. UU.
Puede especificar cualquier código postal válido (p. ej., 12345). Esto determina el tipo impositivo sobre las ventas y no afecta al proceso del pago de prueba.
Los pagos con tarjeta bancaria sandbox (aislador de proceso) pueden realizarse en las siguientes divisas: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND y ZAR.
Para obtener más información sobre las transacciones, incluyendo las tasas, realizadas en modo aislador de proceso (Sandbox):
- Abra su Cuenta del editor.
- Vaya a Accounting > Transaction registry.
- Marque la casilla Show test transactions.
Asimismo, puede ver los detalles de las transacciones y solicitar reembolsos en Cuenta del editor, en la sección Support > Transaction search.
Crear el pedido y abrir la interfaz de pago
- Para crear un pedido con los datos del usuario y del artículo en el lado de Xsolla, invoque al método
createOrderByItemSku
de la biblioteca de Store, transmitiéndole los siguientes parámetros:
activity
— la devolución de llamada de creación de pedido realizada correctamente. Recibe el token de pago necesario para abrir la interfaz de pago y efectuar el pago.
itemSku
— el código de artículo (SKU) del artículo que el usuario desea adquirir.
callbackk
— parámetros de pago (opcional).
quantity
— el número de artículos que el usuario desea adquirir (opcional). Si no se especifica la cantidad, el valor por defecto se establecerá como1
.
- Implemente la lógica de apertura de la interfaz de pago:
- kotlin
val intent = XPayments.createIntentBuilder(activity)
.accessToken(AccessToken(<payment token>))
.isSandbox(<isSandbox>)
.build()
startActivityForResult(intent, RC_PAYSTATION)
- Implemente el control de resultados de pago:
- kotlin
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == RC_PAYSTATION) {
val (status, _) = XPayments.Result.fromResultIntent(data)
when (status) {
XPayments.Status.COMPLETED -> Log.d("MainActivity", "Payment completed")
XPayments.Status.CANCELLED -> Log.d("MainActivity", "Payment cancelled")
XPayments.Status.UNKNOWN -> Log.d("MainActivity", "Status unknown")
}
}
}
Realizar pago de prueba
Para probar el proceso de pago, puede utilizar el modo de aislador de proceso (sandbox). El modo sandbox es un entorno independiente que admite todas las funciones destinadas a un entorno real, excepto los pagos reales y los rechazados. Para acceder al modo sandbox, debe invocar el método isSandbox
y transmitir true
como un argumento, cuando cree un objeto IntentBuilder
.
Antes de firmar un contrato con Xsolla, probar el proceso de pago solo está disponible en modo sandbox.
El proceso de pruebas no requiere retirar dinero de cuentas bancarias reales.
- Ejecute su aplicación.
- Elija el método de pago Bank card (Tarjeta bancaria).
- Introduzca los datos de la tarjeta bancaria. En otros campos (p. ej., nombre o dirección), puede introducir cualquier dato. También puede especificar detalles incorrectos (número de tarjeta o fecha de caducidad) para comprobar si se genera un error.
- Haga clic en Pay.
Además de los datos de la tarjeta, debe especificar el código postal si se cumple al menos una de las siguientes condiciones:
- El país del usuario es EE. UU. o Canadá.
- El número de identificación bancaria (BIN) indica que la tarjeta se emitió en EE. UU.
Puede especificar cualquier código postal válido (p. ej., 12345). Esto determina el tipo impositivo sobre las ventas y no afecta al proceso del pago de prueba.
Los pagos con tarjeta bancaria sandbox (aislador de proceso) pueden realizarse en las siguientes divisas: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND y ZAR.
Para obtener más información sobre las transacciones, incluyendo las tasas, realizadas en modo aislador de proceso (Sandbox):
- Abra su Cuenta del editor.
- Vaya a Accounting > Transaction registry.
- Marque la casilla Show test transactions.
Asimismo, puede ver los detalles de las transacciones y solicitar reembolsos en Cuenta del editor, en la sección Support > Transaction search.
Crear el pedido y abrir la interfaz de pago
- Para crear un pedido con los datos del usuario y del artículo en el lado de Xsolla, invoque el método
FetchPaymentToken
del SDK, transmitiéndole los siguientes parámetros:
AuthToken
— el token de autenticación del usuario, obtenido durante la autenticación mediante Xsolla Login.
ItemSKU
— el código (SKU) del artículo que el usuario desea adquirir.
SuccessCallback
: la devolución de llamada del estado desencadenada cuando se recibe correctamente el token de pago.
ErrorCallback
— la devolución de llamada de error de la solicitud.
PurchaseParams
— parámetros de la interfaz de compra y pago del usuario, como configuración regional y divisa (opcional).
- Implemente la apertura de la interfaz de pago. Para ello, llame al método
LaunchPaymentConsole
del SDK, transmitiéndole los siguientes parámetros.
WorldContextObject
— el objeto de contexto mundial (para llamada C++).
OrderId
— el ID del pedido.
AccessToken
— el token de pago.
SuccessCallback
— la devolución de llamada desencadenada cuando se recibe correctamente el token de pago.
ErrorCallback
— la devolución de llamada de error de la solicitud.
BrowserClosedCallback
— la devolución de llamada de cierre del navegador. El evento solamente se rastrea al abrir la interfaz de pago del usuario en el navegador integrado. Los eventos del navegador externo no se rastrean.
PayStationVersion
— la versión de Pay Station. Por defecto se usa la versión 4.
Realizar pago de prueba
Para probar el proceso de pago, puede utilizar el modo de aislador de proceso (sandbox). El modo sandbox es un entorno independiente que admite todas las funciones de un entorno real, excepto los pagos reales y los rechazados. Para acceder al modo sandbox, debe haber marcado la casilla
Antes de firmar un contrato con Xsolla, probar el proceso de pago solo está disponible en modo sandbox.
El proceso de pruebas no requiere retirar dinero de cuentas bancarias reales.
- Ejecute su aplicación o mapa en Unreal Editor.
- Elija el método de pago Bank card (Tarjeta bancaria).
- Introduzca los datos de la tarjeta bancaria. En otros campos (p. ej., nombre o dirección), puede introducir cualquier dato. También puede especificar detalles incorrectos (número de tarjeta o fecha de caducidad) para comprobar si se genera un error.
- Haga clic en Pay.
Además de los datos de la tarjeta, debe especificar el código postal si se cumple al menos una de las siguientes condiciones:
- El país del usuario es EE. UU. o Canadá.
- El número de identificación bancaria (BIN) indica que la tarjeta se emitió en EE. UU.
Puede especificar cualquier código postal válido (p. ej., 12345). Esto determina el tipo impositivo sobre las ventas y no afecta al proceso del pago de prueba.
Los pagos con tarjeta bancaria sandbox (aislador de proceso) pueden realizarse en las siguientes divisas: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND y ZAR.
Para obtener más información sobre las transacciones, incluyendo las tasas, realizadas en modo aislador de proceso (Sandbox):
- Abra su Cuenta del editor.
- Vaya a Accounting > Transaction registry.
- Marque la casilla Show test transactions.
Asimismo, puede ver los detalles de las transacciones y solicitar reembolsos en Cuenta del editor, en la sección Support > Transaction search.
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.