Configurar la venta de claves de juego

Puede vender claves del juego a través de un enlace directo, interfaz de usuario de tienda o de un widget.

Puede vender claves del juego a usuarios autorizados y no autorizados.

La autorización le permite:

• establecer límites a la venta de claves del juego para el usuario
• personalizar los catálogos de artículos y las ofertas promocionales
• utilizar el sistema de asignación de derechos
• almacenar los datos del usuario en la interfaz de pago de Xsolla

Puede autorizar usuarios mediante el producto Login o su propio sistema de autorización. Encontrará información detallada sobre la configuración en estas instrucciones.

Venta mediante enlace directo

Las claves de juego se pueden vender a través de un enlace directo que abre la interfaz de pago en el siguiente formato:

1https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}

Además de los parámetros de consulta principales, también puede transmitir parámetros para personalizar la interfaz de pago y vender a usuarios autenticados.

Parámetros requeridos

Añada los siguientes datos a este enlace:

• YOUR-ITEM-TYPE: tipo de artículo. Valores posibles:

  • game: paquete de claves de juego.
  • game_key: paquete de claves de juego en una plataforma específica.
  • bundle: lote con paquetes de claves de juego.

• YOUR-PROJECT-ID: ID de su proyecto, que se encuentra en su Cuenta del editor junto al nombre del proyecto.

• YOUR-ITEM-SKU: SKU del paquete de claves de juego. Por ejemplo:

  • order456: SKU sin una plataforma específica.
  • pre.order123_steam: SKU con una plataforma específica.

Recomendamos utilizar paquetes de claves de juego específicos para cada plataforma. De este modo se evitan problemas de compatibilidad al utilizar o activar las claves. En todos los casos, se debe añadir un sufijo específico al SKU para cada plataforma, ya sea de forma automática o manual, dependiendo de cómo se haya creado el paquete de claves:

• Cuando crea paquetes de claves en la Cuenta del editor, el sistema añade automáticamente un sufijo específico de la plataforma con un guion bajo (por ejemplo, _steam, _playstation) al SKU que introduzca.

• Cuando crea paquetes de claves específicos para una plataforma mediante llamadas API, puede especificar el sufijo para la plataforma en cualquier formato que incluya solo caracteres alfanuméricos latinos en minúscula y mayúscula, puntos, guiones y guiones bajos.

Lista de plataformas compatibles y sufijos de ejemplo:

Para asegurarse de que el enlace funciona correctamente, puede obtener el SKU exacto mediante la llamada API Obtener lista de juegos e incluirlo en el enlace de pago como valor SKU. El SKU del artículo se devuelve en el parámetro items.unit_items.sku (normalmente, este SKU sigue el formato game_key_sku_drm_sku).

Ejemplo de URL para vender un juego en Steam:

1https://purchase.xsolla.com/pages/buy?type=game_key&project;_id=123456&sku;=pre.order123_steam

Personalización de la interfaz de pago

Para que la interfaz de pago se adapte al estilo de su juego, configure el tema, el tamaño y otros parámetros de la interfaz, tal y como se describe en la guía sobre cómo personalizar Pay Station. Añada el parámetro ui_settings a la URL y transmita un objeto JSON settings.ui con codificación Base64 como valor.

URL de ejemplo para abrir la interfaz de pago con un tema personalizado:

1https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

Vender a usuarios autenticados

Para vender claves a usuarios autenticados, transmita un token de acceso de usuario en el parámetro xsolla_login_token. Este token depende del método de autenticación seleccionado.

URL de ejemplo para abrir la interfaz de pago con un token:

1https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

Pruebas de pagos

Para probar el flujo de pago en modo sandbox, añada el parámetro mode=sandbox a la URL. Puede utilizar tarjetas bancarias de prueba para completar las transacciones.

URL de ejemplo para abrir la interfaz de pago en modo sandbox:

1https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

Venta mediante la interfaz de usuario de la tienda

Puede vender claves del juego a través de la interfaz de la tienda. Para crear una tienda, puede:

• utilizar Site Builder
• crear su propia versión de la tienda e integrar la API Shop Builder API.

Para vender paquetes de claves del juego usando la API Shop Builder API:

1. Para visualizar un catálogo, utilice el método Obtener lista de juegos.

2. Implementar la compra de claves del juego:

   • Para la compra rápida de una clave, utilice el método Crear pedido con un artículo especificado. En respuesta a este método, recibirá un token que deberá utilizar para abrir la interfaz de pago.
   • Para comprar varias claves de juego, utilice los métodos de gestión de cestas:
     • Actualizar artículo de la cesta actual para añadir una clave del juego a la cesta.
     • Obtener la cesta del usuario actual para obtener una lista de las claves del juego de la cesta.
     • Crear pedido con todos los artículos de la cesta para pagar las claves del juego de la cesta. En respuesta a este método, recibirá un token que deberá utilizar para abrir la interfaz de pago.

Venta mediante widget

Puede agregar un widget a su página para vender claves del juego y personalizarlo. Para copiar el código del widget, vaya a la sección Widget customization después de crear el paquete de claves en su Cuenta del editor.

Si un juego se vende en una sola plataforma, el widget mostrará el precio del juego específico para esa plataforma.

Ejemplo: Cómpralo ahora por 10 $.

Si un juego se vende en varias plataformas, el widget mostrará el precio más bajo de todas ellas.

Ejemplo: Consíguelo desde 10 $.

En la ventana de creación de pedidos, el usuario puede ver los precios para todas las plataformas y elegir entre ellos.

También puede mostrar el precio para una plataforma específica en el widget especificando el código de artículo (SKU) de la plataforma en el parámetro drm.

Ejemplo de código del widget:

 1<div id="xsolla-buy-button-widget"></div>
 2
 3<script>
 4  var options = {
 5    project_id: "101010",
 6    sku: "my_key",
 7    user: {
 8      auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
 9    },
10    drm: "steam",
11    item_type: "unit",
12    api_settings: {
13      sandbox: true
14    },
15    widget_ui: {
16      target_element: "#xsolla-buy-button-widget",
17      theme: {
18        foreground: "green",
19        background: "light"
20      }
21    },
22    payment_widget_ui: {
23      lightbox: {
24        height: "700px",
25        spinner: "round"
26      }
27    }
28  };
29
30  var s = document.createElement("script");
31  s.type = "text/javascript";
32  s.async = true;
33  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
34  s.addEventListener("load", function () {
35    var widgetInstance = XBuyButtonWidget.create(options);
36  });
37  document.getElementsByTagName("head")[0].appendChild(s);
38</script>
39
40<style>
41  #xsolla-buy-button-widget {
42    /* place code for button positioning here */
43    margin: 10px;
44  }
45
46  /* Styles the button itself */
47  .x-buy-button-widget.x-buy-button-widget__tiny .x-buy-button-widget-payment-button {
48    background-color: #ff005b;
49    color: black;
50  }
51</style>

Personalización del botón

1. Abra su proyecto en Cuenta del editor y vaya a Items catalog > Game keys.
2. Seleccione una clave de juego y vaya a la pestaña Widget customization.

3. En el bloque Customize, seleccione el color de fondo.

4. Cuando agregue el código del widget a su página, este incluye estilos heredados. Añada los estilos siguientes para anularlos.

 1/* This should be used for button positioning but note this technically repositions the entire widget */
 2#xsolla-buy-button-widget {
 3  /* place code for button positioning here */
 4}
 5
 6/* Styles the button itself */
 7.x-buy-button-widget.x-buy-button-widget__tiny
 8  .x-buy-button-widget-payment-button {
 9  background-color: #ff005b;
10  color: black;
11}
12
13/* Button on hover */
14.x-buy-button-widget.x-buy-button-widget__tiny
15  .x-buy-button-widget-payment-button:hover {
16  background-color: #ff005b;
17}
18
19/* The following are style overrides to leave you with just the button */
20
21/* space immediately surrounding button */
22.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
23  background-color: white;
24}
25
26/* space above button (including game title area) */
27.x-buy-button-widget.x-buy-button-widget__tiny
28  .x-buy-button-widget-game-logo {
29  height: 200px;
30  background-image: none !important;
31  background-color: white;
32}
33
34 /* Game title (located right above button) */
35.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
36  display: none !important;
37}

Cómo crear múltiples botones o códigos de artículo (SKU)

Puede consultar Xsolla Pay2Play Widget Simple Integration 4 buttons (4 botones de integración sencilla del widget Xsolla Pay2Play) para ver un ejemplo de código sobre cómo se logra esto usando el widget Pay2Play.

La estructura es similar al código del widget de Buy Button. Un ejemplo de migración:

 1<div id="xsolla-buy-button-widget"></div>
 2<div id="xsolla-buy-button-widget-2"></div>
 3
 4<script>
 5  var options = {
 6    project_id: "191204",
 7    sku: "789",
 8    item_type: "unit",
 9    api_settings: {
10      sandbox: false
11    },
12    widget_ui: {
13      target_element: "#xsolla-buy-button-widget",
14      theme: {
15        foreground: "gold",
16        background: ""
17      }
18    },
19    payment_widget_ui: {
20      lightbox: {
21        height: "700px",
22        spinner: "round"
23      }
24    }
25  };
26
27  // options for second buy button - note the different SKU and target_element
28  var options2 = {
29    project_id: "191204",
30    sku: "123",
31    item_type: "unit",
32    api_settings: {
33      sandbox: false
34    },
35    widget_ui: {
36      target_element: "#xsolla-buy-button-widget-2",
37      theme: {
38        foreground: "gold",
39        background: ""
40      }
41    },
42    payment_widget_ui: {
43      lightbox: {
44        height: "700px",
45        spinner: "round"
46      }
47    }
48  };
49
50  var s = document.createElement("script");
51  s.type = "text/javascript";
52  s.async = true;
53  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";
54
55  // one event listener per widget instance. repeat for more buttons, passing in different SKUs
56  s.addEventListener("load", function () {
57    var widgetInstance = XBuyButtonWidget.create(options);
58  });
59  s.addEventListener("load", function () {
60    var widgetInstance2 = XBuyButtonWidget.create(options2);
61  });
62
63  document.getElementsByTagName("head")[0].appendChild(s);
64</script>