Habilitar Buy Button mediante enlaces externos a Web Shop

¿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.

• Un flujo sin interrupciones: al pulsar Buy Button, se abre la página de pago de la Web Shop para un artículo específico, lo cual permite que los usuarios vuelvan automáticamente al juego cuando hayan realizado el pago.
• Compatible con varios métodos de pago, incluidos los pagos de un solo clic de Apple Pay, para que la compra desde dispositivos móviles sea rápida y sencilla.
• Configuración rápida: si su Web Shop ya está configurada, solo tiene que añadir un enlace con los parámetros al juego.
• Incorporación instantánea: si aún no tiene Web Shop, puede ponerse en marcha rápido, creando al instante una Web Shop, agregando enlaces de pago a su juego, para activarla.

Este método de integración le da acceso no solo a la integración de Buy Button, sino también a la experiencia completa de Web Shop, incluyendo funciones como la personalización, el programa de recomendación, el sistema de fidelización, códigos promocionales y mucho más.

Compruebe la integración a través de Xsolla Mobile SDK si tiene una Web Shop personalizada no basada en Site Builder y pretende integrar Pay Station directamente en su juego.

Cómo funciona

1. El usuario abre la aplicación en un dispositivo con iOS.
2. El usuario pulsa el botón Buy Button situado junto al artículo deseado.
3. La aplicación inicia un navegador con un enlace a Web Shop que incluye los parámetros user-id, purchase-sku y redirect-url.
4. Web Shop autentifica automáticamente al usuario y muestra la interfaz de pago para el artículo seleccionado.
5. El usuario elige un método de pago y finaliza la compra.
6. Al usuario se le redirige automáticamente al juego mediante un enlace profundo.
7. La aplicación recibe la confirmación de compra mediante un webhook y entrega el artículo adquirido.

Cómo conseguirlo

1. Para crear un sitio de Web Shop:
   1. Cree un proyecto en Cuenta del editor.
   2. Establezca una plantilla.
   3. Cree un catálogo de artículos.
   4. Configure la autenticación de usuario.
   5. Configure webhooks para transferir compras al usuario.
   6. Haga pruebas al sitio web.
   7. Publique el sitio.
2. Agregue una lógica a su aplicación de iOS para mostrar el botón con el enlace de compra solamente a los usuarios de los Estados Unidos:
   1. Agregue el botón a su juego.
   2. Detecte el escaparate de iOS.

Inicio rápido

Regístrese para obtener su propia Cuenta del editor y cree un proyecto

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.

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

Establecer una plantilla de Web Shop

1. Abra su proyecto en Cuenta del editor.
2. En la página principal del proyecto, pulse en Change focus y seleccione Enable Buy Button via link-outs to Web Shop.
3. En el paso Create your Web Shop page, haga clic en Create template.

4. Seleccione el tipo de Web Shop:
   • Tienda de una página: un sitio web en el que todas las secciones están en una sola página.
   • Portal web multipágina: un sitio web con tres páginas independientes: una página principal, una página de catálogo de artículos y una página de noticias.

5. Haga clic en Continue.
6. En la pestaña Express, agregue un enlace a su juego en App Store. Esto le permite crear con rapidez un sitio web personalizado para su juego: la imagen, el título, el nombre del desarrollador y el esquema de colores de su juego se añaden de forma automática durante la creación del sitio web.
7. Haga clic en Create Web Shop.

Establecer un catálogo de artículos

En Xsolla, tiene que crear un catálogo de los artículos que vende en su juego. Puede escoger uno de los siguientes métodos para establecer su catálogo:

• Importar artículos: suba un archivo JSON para agregar rápidamente su catálogo a Cuenta del editor.
• Utilizar llamadas API: perfecto para actualizaciones automatizadas o a gran escala.
• Importar su catálogo desde App Store, Google Play o PlayFab: transfiera un catálogo existente directamente desde una plataforma externa.
• Establecer el catálogo de forma manual: agregue y edite artículos directamente en Cuenta del editor.

Establecer la autenticación de usuarios

Para transferir compras a la cuenta del usuario dentro del juego, configure la autenticación mediante ID de usuario desde el juego.

Además, tendrá que establecer el control de webhooks para verificar que el usuario existe. Este webhook aporta una validación adicional cuando se abre la Web Shop a través de un enlace directo desde el juego, y es obligatorio para la autenticación de usuarios cuando se accede a Web Shop desde fuera del cliente del juego.

Para configurar la autenticación:

1. En el lado de su aplicación, implemente el control del webhook de validación de usuarios.

Al recibir un webhook, la aplicación debe hacer lo siguiente:

• Buscar un usuario por su ID transmitido en el webhook.
• En función del resultado, enviar uno de los siguientes códigos de estado:
  • código HTTP 200 HTTP con una respuesta del webhook si se encuentra un usuario
  • código HTTP 404 si no se encuentra el ID de usuario
• Enviar atributos de usuario para la personalización.

2. Abra su proyecto en Cuenta del editor y vaya a la sección Storefronts > Websites.
3. En el panel del sitio web correspondiente, haga clic en Open Site Builder.
4. Vaya al bloque Login settings.

5. Seleccione la opción de User ID.

6. En la lista desplegable, seleccione New Login.

7. Introduzca la URL para recibir webhooks. Esta URL puede ser distinta de la especificada en Project settings > Webhooks.

Configurar los webhooks para transferir compras al usuario

Los webhooks son notificaciones sobre eventos que se producen en el sistema. Cuando se produce un evento específico, Xsolla envía una solicitud HTTP y transmite los datos del evento al servidor del juego. Estos webhooks son esenciales para que el cliente o el servidor del juego reciban notificaciones sobre los pagos y los intentos de autenticación de usuarios realizados correctamente e incorrectamente.

Habilitar 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.

Probar webhooks

En la pestaña Payments and Store, puede probar los siguientes webhooks:

Validación del usuario (“notification_type”:“user_validation”):

 1curl -v 'https://your.hostname/your/uri' \
 2-X POST \
 3-H 'Accept: application/json' \
 4-H 'Content-Type: application/json' \
 5-H 'Authorization: Signature 13342703ccaca5064ad33ba451d800c5e823db8f' \
 6-d '{
 7    "notification_type":"user_validation",
 8    "settings": {
 9      "project_id": 18404,
10      "merchant_id": 2340
11    },
12    "user": {
13        "ip": "127.0.0.1",
14        "phone": "18777976552",
15        "email": "email@example.com",
16        "id": "1234567",
17        "name": "John Smith",
18        "country": "US"
19    }
20}'

Pago del pedido realizado correctamente (“notification_type”: “order_paid”):

  1curl -v 'https://your.hostname/your/uri' \
  2-X POST \
  3-H 'Accept: application/json' \
  4-H 'Content-Type: application/json' \
  5-H 'Authorization: Signature d09695066c52c1b8bdae92f2d6eb59f5b5f89843' \
  6-d '{
  7    "notification_type": "order_paid",
  8    "items": [
  9      {
 10        "sku": "com.xsolla.item_1",
 11        "type": "virtual_good",
 12        "is_pre_order": false,
 13        "quantity": 3,
 14        "amount": "1000",
 15        "promotions": [
 16          {
 17            "amount_without_discount": "6000",
 18            "amount_with_discount": "5000",
 19            "sequence": 1
 20          },
 21          {
 22            "amount_without_discount": "5000",
 23            "amount_with_discount": "4000",
 24            "sequence": 2
 25          }
 26        ],
 27        "custom_attributes":
 28          {
 29            "purchased": 0,
 30            "attr": "value"
 31          }
 32      },
 33      {
 34        "sku": "com.xsolla.item_new_1",
 35        "type": "bundle",
 36        "is_pre_order": false,
 37        "quantity": 1,
 38        "amount": "1000",
 39        "promotions": []
 40      },
 41      {
 42        "sku": "com.xsolla.gold_1",
 43        "type": "virtual_currency",
 44        "is_pre_order": false,
 45        "quantity": 1500,
 46        "amount": null,
 47        "promotions": []
 48      }
 49    ],
 50    "order": {
 51      "id": 1,
 52      "mode": "default",
 53      "currency_type": "virtual",
 54      "currency": "sku_currency",
 55      "amount": "2000",
 56      "status": "paid",
 57      "platform": "xsolla",
 58      "comment": null,
 59      "invoice_id": "1",
 60      "promotions": [
 61        {
 62          "amount_without_discount": "4000",
 63          "amount_with_discount": "2000",
 64          "sequence": 1
 65        }
 66      ],
 67      "promocodes": [
 68        {
 69          "code": "promocode_some_code",
 70          "external_id": "promocode_sku"
 71        }
 72      ],
 73      "coupons": [
 74        {
 75          "code": "WINTER2021",
 76          "external_id": "coupon_sku"
 77        }
 78      ]
 79    },
 80    "user": {
 81      "external_id": "id_xsolla_login_1",
 82      "email": "gc_user@xsolla.com"
 83    },
 84    "billing": {
 85      "notification_type": "payment",
 86      "settings": {
 87        "project_id": 18404,
 88        "merchant_id": 2340
 89      },
 90      "purchase": {
 91          "subscription": {
 92              "plan_id": "b5dac9c8",
 93              "subscription_id": "10",
 94              "product_id": "Demo Product",
 95              "date_create": "2014-09-22T19:25:25+04:00",
 96              "date_next_charge": "2014-10-22T19:25:25+04:00",
 97              "currency": "USD",
 98              "amount": 9.99
 99          },
100          "total": {
101              "currency": "USD",
102              "amount": 200
103          },
104          "promotions": [{
105              "technical_name": "Demo Promotion",
106              "id": 853
107          }],
108          "coupon": {
109              "coupon_code": "ICvj45S4FUOyy",
110              "campaign_code": "1507"
111          }
112        },
113      "transaction": {
114          "id": 1,
115          "external_id": 1,
116          "payment_date": "2014-09-24T20:38:16+04:00",
117          "payment_method": 1,
118          "payment_method_name": "PayPal",
119          "payment_method_order_id": 1234567890123456789,
120          "dry_run": 1,
121          "agreement": 1
122      },
123      "payment_details": {
124          "payment": {
125              "currency": "USD",
126              "amount": 230
127          },
128          "vat": {
129              "currency": "USD",
130              "amount": 0,
131              "percent": 20
132          },
133          "sales_tax": {
134              "currency": "USD",
135              "amount": 0,
136              "percent": 0
137          },
138          "direct_wht": {
139              "currency": "USD",
140              "amount": 0,
141              "percent": 0
142          },
143          "payout_currency_rate": "1",
144          "payout": {
145              "currency": "USD",
146              "amount": 200
147          },
148          "country_wht": {
149              "currency": "USD",
150              "amount": 2,
151              "percent": 10
152          },
153          "user_acquisition_fee": {
154              "currency": "USD",
155              "amount": 2,
156              "percent": 1
157          },
158          "xsolla_fee": {
159              "currency": "USD",
160              "amount": 10
161          },
162          "payment_method_fee": {
163              "currency": "USD",
164              "amount": 20
165          },
166          "repatriation_commission": {
167              "currency": "USD",
168              "amount": 10
169          }
170      }
171    }
172 ,
173  "custom_parameters": {
174    "parameter1": "value1",
175    "parameter2": "value2"
176  }
177}'

Probar el sitio web en modo aislador de proceso (sandbox)

Para probar el funcionamiento del sitio web en modo aislador de proceso (sandbox):

1. Abra su proyecto en Cuenta del editor y vaya a la sección Storefronts > Websites.
2. Haga clic en Open Site Builder en el panel del sitio web requerido.
3. Haga clic en Preview.

4. Seleccione un artículo y pulse en el botón de compra.
5. Elija el grupo de métodos de pago Card.
6. Introduzca los datos de la tarjeta bancaria de prueba. Introduzca cualquier valor en los campos restantes. También puede especificar datos incorrectos (número de tarjeta, fecha de caducidad o código CVV) para generar un error.

Publicar sitio web

1. Para mejorar el rendimiento de su sitio web:

   a. En el bloque SEO Settings, establezca los parámetros que usarán los motores de búsqueda y para la vista previa de la página en redes sociales: suba un favicon, especifique el título y la descripción de la tienda, añada una imagen de vista previa.

   b. Configurar la localización del sitio web.

   c. Haga los cambios necesarios en el dominio (opcional). Para ello, vaya a la sección Storefronts > Websites y haga clic en Configure en el panel de su sitio web. En la sección Domain, edite el valor Xsolla domain o configure su propio dominio.

2. Cuando haya hecho todos los cambios necesarios y su tienda web esté lista para el lanzamiento, pulse en Publish.

Agregar un botón con un enlace de compra a su juego

Agregue un botón a su juego que redirija al usuario a Web Shop para pagar el artículo seleccionado. El botón debe contener un enlace con el siguiente formato: https://yourwebshop.xsolla.site/?user-id=<USER_ID>&purchase-sku=<ITEM_SKU>&redirect-url=<RETURN_TO_GAME_URL>, en el cual:

• yourwebshop.xsolla.site es un enlace a su sitio de Web Shop.
• user-id es el ID de usuario de su sistema.
• purchase-sku es el código de artículo (SKU) del artículo deseado del catálogo de Web Shop.
• redirect-url es la dirección URL de una página web (por ejemplo, https://example.com/success) o un enlace profundo (por ejemplo, mygame://open) al que se redirige al usuario después de realizar un pago. Al utilizar un enlace profundo, asegúrese de que:
  • utiliza el formato correcto, incluyendo tanto el esquema como la ruta (por ejemplo, mygame://open), y no solo el esquema (mygame://)
  • el enlace profundo se gestiona dentro de la aplicación móvil del juego.

Para encontrar el código (SKU) del artículo (utilizando un artículo virtual como ejemplo):

1. Abra su proyecto en Cuenta del editor y vaya a Items catalog > Virtual Items.
2. Navegue hasta el grupo de artículos donde se encuentra el artículo.
3. Copie el código de artículo (SKU) de la línea del artículo concreto que se encuentra debajo de su nombre.

Detectar el escaparate de iOS

Para determinar si puede mostrar Buy Button, recupere la información del storefront en el primer inicio de la app tras la instalación o en los inicios posteriores si es necesario. Es posible que el escaparate ya esté disponible en el marco de su implementación existente del StoreKit o que se la proporcione su socio de medición móvil (MMP). Si el código de país del escaparate es “USA”, habilite la función para mostrar el Buy Button.

Asegúrese de que su implementación sea lo bastante flexible como para admitir otros países en el futuro, ya que las condiciones normativas y las políticas de la plataforma pueden cambiar.

Recuerde que el valor que aparece en el escaparate visualizado en el dispositivo no cambia, salvo que el usuario actualice expresamente la región de su ID de Apple en la configuración del sistema.

1let countryCode = await Storefront.current?.countryCode
2let showBuyButton = countryCode == "USA"

Funciones adicionales

Puede facilitar a los usuarios un acceso rápido a las funciones de Web Shop mediante el uso de parámetros de consulta en la URL del sitio web. Para obtener más información, remítase a las instrucciones sobre el uso de parámetros de consulta.

Análisis avanzados en AppsFlyer

Cuando utiliza enlaces externos para que los usuarios puedan hacer compras en la interfaz de pago web directamente desde el juego, puede seguir rastreando sus compras y midiendo el valor del ciclo de vida (LTV) con un socio de medición móvil (MMP), como AppsFlyer. Xsolla admite dos tipos de integración para habilitar el seguimiento sin interrupciones de la adquisición de usuarios, el retargeting (resegmentación de mercado) y la actividad de compra en plataformas móviles y web.

Escoja el tipo que se adapte mejor a su configuración para mantener una visibilidad completa de sus campañas e ingresos: