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

El siguiente enlace abre la interfaz de pago:

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

Agregue los siguientes datos a este enlace:

• YOUR-ITEM-TYPE - tipo de artículo:
  • game - juego; game_key - juego en una plataforma específica.
  • bundle - lote.
• YOUR-PROJECT-ID - ID de su proyecto desde la sección Project settings > General settings > Project ID en Cuenta del editor.
• YOUR-ITEM-SKU - código (SKU) del paquete de claves del juego. Para vender un juego en una plataforma específica, utilice Get games list (normalmente este SKU se parece a unit_name_drm_sku) para obtener el SKU.

• Estilo de la interfaz de pago: tema (oscuro o el claro por defecto), tamaño y otros parámetros. Especifique los parámetros ui_settings en la URL y transmita un objeto JSON settings.ui con codificación Base64 como valor. Ejemplo de URL con parámetros de interfaz de usuario:

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

• Token para transmitir datos de usuario. Se utiliza cuando se venden claves del juego solo a usuarios autenticados. Este token depende del método de autenticación. Ejemplo de URL con un token:

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

• El parámetro mode=sandbox para pruebas de pago. Puede utilizar tarjetas bancarias de prueba para realizar pagos.

1. Ejemplo de URL para las pruebas:

https://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

Puedes 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 In-Game Store API.

Para vender paquetes de claves del juego usando la API In-Game Store API:

1. Para visualizar un catálogo, utilice el método Get games list.

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.
     • Get the current user’s cart para obtener una lista de las claves del juego de la cesta.
     • Create an order with all items from the current cart 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:

<div id="xsolla-buy-button-widget"></div>
      <script>
          var options = {
              project_id: "101010",
              sku: "my_key",
              user: {
                  auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
              },
              drm: "steam",
              item_type: "unit",
              api_settings: {
                  sandbox: true,
              },
              widget_ui: {
                  target_element: "#xsolla-buy-button-widget",
                  theme: {
                      foreground: "green",
                      background: "light"
                  },
              },

             payment_widget_ui: {
                  lightbox: {
                      height: '700px',
                      spinner: 'round'
                  }
            }
          };
          var s = document.createElement('script');
          s.type = "text/javascript";
          s.async = true;
          s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
          s.addEventListener('load', function (e) {
              var widgetInstance = XBuyButtonWidget.create(options);
          }, false);
          var head = document.getElementsByTagName('head')[0];
          head.appendChild(s);
      </script>
      <style>
          #xsolla-buy-button-widget {

          /* place code for button positioning here */
            margin: 10px  
          }

          /* Styles the button itself */
          .x-buy-button-widget.x-buy-button-widget__tiny
            .x-buy-button-widget-payment-button {
            background-color: #ff005b;
            color: black;
          }     
      </style>

Personalización del botón

1. Abra su proyecto en Cuenta del editor.
2. En el menú lateral, haga clic en Store.
3. En el panel Game Keys, haga clic en Configure.
4. Seleccione una clave del juego y vaya a la pestaña Widget customization.

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

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

/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

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:

<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>