Habilitar Buy Button con proceso de pago personalizado

¿Por qué es importante?

Tras las recientes actualizaciones de las políticas de Apple en algunas regiones, los desarrolladores ahora pueden dirigir a los usuarios desde sus aplicaciones a sitios web externos para aceptar pagos por artículos virtuales.

Puede añadir botones visibles, banners, mensajes y otras llamadas a la acción que lleven a los usuarios directamente desde su juego a la compra de artículos mediante un proceso de pago seguro basado en navegador (a su Web Shop o interfaz de pago) con un solo clic, sin infringir las normas de Apple ni correr el riesgo de recibir sanciones.

La integración de Buy Button a través de Headless checkout es ideal si quiere crear su propia interfaz de pago personalizada y ofrecer una experiencia de usuario única. Esta opción de integración permite a los usuarios pasar de forma impecable del juego a hacer una compra en un navegador utilizando una amplia gama de métodos de pago, como pagos con un clic mediante Apple Pay, para disfrutar de un proceso de pago móvil rápido e intuitivo.

Headless checkout es una solución para recibir pagos basada en la arquitectura de aplicaciones headless, en la que se puede acceder a la funcionalidad a través de una API. Este enfoque separa el back-end y la lógica de negocio de la interfaz de usuario.

Para usar el sistema de pago Headless checkout para aplicaciones de juegos en iOS:

1. Cree su propia tienda.
2. Integre el Headless checkout en su tienda.
3. Agregue un enlace a su juego que redirija a los usuarios a su tienda.

Si busca la opción de integración más rápida y con poco código, consulte la integración basada en Web Shop.

Si utiliza una Web Shop personalizada que no está creada con Xsolla Site Builder y quiere integrar una interfaz de pago lista para usar en su juego, consulte la integración mediante Xsolla Mobile SDK.

Cómo funciona

Flujo del usuario:

1. El usuario abre la aplicación de juegos en un dispositivo con iOS.
2. El usuario hace clic en el botón de compra situado junto al artículo deseado.
3. Su tienda se abre en un navegador web. Para garantizar una experiencia de usuario sin interrupciones, implemente una autorización de extremo a extremo.
4. El usuario selecciona un artículo y hace la compra sin salir de la tienda.
5. Al usuario se le redirige automáticamente a la aplicación del juego después de que la transacción sea aceptada.
6. La aplicación recibe la confirmación de compra mediante un webhook.

Flujo de integración

1. Crear un proyecto en Cuenta del editor y firmar un acuerdo de concesión de licencia con Xsolla.
2. Crear un catálogo de artículos.
3. Implementar las interacciones con el back-end: crear un token y configurar los webhooks.
4. Instalar el SDK.
5. Integrar el SDK en el lado de la aplicación.
6. Agregue un enlace a su juego que redirija a los usuarios a su tienda en la que esté integrado el sistema de pago Headless checkout.

Crear un proyecto y firmar el acuerdo de licencia

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

Para registrarse, vaya a Cuenta del editor y cree una cuenta. Para crear un proyecto, haga clic en Create project en el menú lateral y facilite la información necesaria. Puede modificar la configuración más adelante.

Para firmar el acuerdo de licencia, vaya a la sección Agreements & Taxes > Agreements y rellene el formulario del acuerdo.

Crear un catálogo de artículos

Los productos de compra desde la aplicación (IAP) se representan mediante artículos virtuales en el ecosistema de Xsolla. Tienen un nombre, una descripción, un código de artículo (SKU) y un precio. Para establecer tu catálogo de códigos SKU de productos IAP, puede:

1. Importar un archivo JSON para agregar rápidamente su catálogo a Cuenta del editor.
2. Crear un catálogo de artículos utilizando las llamadas a la API de la sección Virtual items & currency > Admin de la documentación.

Implementar la interacción en el back-end

Crear un token

Configurar los webhooks

Para habilitar los webhooks:

1. En su proyecto de dentro de Cuenta del editor, vaya a la sección Project setting > Webhooks.
2. En el campo Webhook server, especifique la URL del servidor donde desea recibir los webhooks en el formato https://example.com También puede especificar la URL que encuentre en una herramienta para probar webhooks.
3. Por defecto, se genera una clave secreta para firmar los webhooks del proyecto. Si desea generar una nueva clave secreta, haga clic en el icono de actualización.
4. Haga clic en Enable webhooks.

Para que la tienda en el juego y el sistema de gestión de pagos funcionen a pleno rendimiento, es necesario implementar el procesamiento de los principales webhooks:

Instalar el SDK

1. Instale el SDK como un paquete npm (npm-package) ejecutando el comando:

1npm install --save @xsolla/pay-station-sdk

2. Inicialice el SDK transmitiendo los parámetros del entorno:

1import { headlessCheckout } from '@xsolla/pay-station-sdk';
2
3await headlessCheckout.init({
4  sandbox: true,
5});

3. Transmita el token de pago para el SDK inicializado:

1await headlessCheckout.setToken(accessToken);

Integrar el SDK en el lado de la aplicación

Después de instalar el SDK e inicializarlo:

1. Inicialice la interfaz de pago especificando el ID del método de pago. El método headlessCheckout.form.init devuelve un objeto que se utiliza para interactuar posteriormente con la interfaz de pago.

1await headlessCheckout.form.init({
2  paymentMethodId: 3175, // Apple Pay payment ID
3});

2. Agregue el control del evento show_fields para mostrar campos adicionales.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

3. Agregue al marcado HTML de la interfaz de pago los siguientes componentes:
   • Componentes obligatorios:
     • psdk-legal - para mostrar información sobre documentos legales.
     • psdk-total - para mostrar el importe total de la compra.
   • Componentes del formulario de pago. Puede utilizar el componente psdk-payment-form integrado o crear manualmente elementos de interfaz de pago usando los componentes predefinidos.
   • El componente de botón de pago: psdk-apple-pay. También puede usar el componente psdk-submit-button que ya incorpora psdk-apple-pay.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-apple-pay text="Apple Pay"></psdk-apple-pay>

4. Agregue el control del evento check_status para el cambio del estado de pago.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

5. Agregue el componente psdk-status al marcado HTML de la interfaz de pago para mostrar un estado de pago.

1@if (showStatus) {
2  <psdk-status></psdk-status>
3}

Cómo detectar el escaparate de iOS

Para determinar el escaparate de iOS actual y ajustar la funcionalidad del SDK en función de la región, emplee los siguientes fragmentos de código:

1[SKPaymentQueue loadCurrentStorefrontCountryCodeWithCompletion:^(NSString* _Nullable countryCode) {
2    settings.enablePayments = countryCode && [countryCode isEqualToString:@"USA"];
3
4    [[SKPaymentQueue defaultQueue] startWithSettings:settings];
5}];

1SKPaymentQueue.loadCurrentStorefrontCountryCode { countryCode in
2    settings.enablePayments = countryCode == "USA"
3
4    SKPaymentQueue.default().start(settings)
5}

El método loadCurrentStorefrontCountryCode recupera de forma asíncrona el código de tres letras del país para el escaparate actual. Puede usar esta información para habilitar o deshabilitar la funcionalidad del SDK para regiones específicas.

Otra posibilidad es utilizar directamente el Storefront nativo de Apple, como se muestra a continuación:

1let storefront = await Storefront.current   
2let countryCode = storefront?.countryCode
3
4settings.enablePayments = countryCode == "USA"
5
6SKPaymentQueue.default().start(settings)

Pago con un clic mediante Apple Pay

Los pagos con un clic permite a los usuarios pagar vía Apple Pay, un método de pago nativo, intuitivo y seguro, en los dispositivos compatibles. Para configurar el pago con un clic, haga lo siguiente:

1. Crea una solicitud para habilitar esta opción. Para ello:

   a. Abra su proyecto en Cuenta del editor y vaya a la sección Support Hub.

   b. Haga clic en Submit request.

   

   c. En la ventana que se abre, rellene los campos:

   • Summary. Por ejemplo, Configuración del pago con un clic de Apple Pay.
   • Description. Especifique el dominio empleado para abrir la interfaz de pago; p. ej., amazing.store.com.
   • Project ID. Seleccione un ID de proyecto de la lista desplegable. Si desea configurar la opción de pago con un solo clic para varios proyectos, especifique sus ID en el campo Description.

   d. Haga clic en Send.

2. Espere a su archivo de asociación de dominio. Xsolla se ocupa de este paso:
   1. Xsolla registra su dominio con Apple.
   2. Xsolla recibe el archivo de asociación de dominio de Apple.
   3. Xsolla le envía por correo electrónico el archivo de asociación de dominio y le ofrece instrucciones sobre dónde cargarlo.

3. Actualice el script de inicialización del SDK como se indica a continuación:

1const config: InitialOptions = {
2  isWebview: false,
3  theme: 'default',
4  language: parameters.language,
5  topLevelDomain: 'amazing.store.com',
6  isApplePayInstantFlowEnabled: true
7};
8
9await initHeadlessCheckoutLib(config);