Configuração da venda de chaves de jogo

Buy Button permite que você monetize jogos através da venda de chaves de jogo no site de um jogo para moedas reais ou virtuais.

Você pode vender chaves de jogo por meio de um link direto, interface da loja ou widget.

Você pode vender chaves de jogo para usuários autorizados e não autorizados.

A autorização permite:

• defina limites na venda de chaves de jogo para o usuário
• para personalizar catálogos de itens e ofertas promocionais
• use o sistema de direitos
• armazene dados do usuário na interface de pagamento Xsolla

Você pode autorizar usuários usando o produto Login ou seu próprio sistema de autorização. Informações detalhadas de configuração são fornecidas nestas instruções.

Venda via link direto

O link a seguir abre a interface de pagamento:

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

Adicione os seguintes dados a este link:

• YOUR-ITEM-TYPE — tipo de item:
  • game — jogo; game_key — jogo em uma plataforma específica.
  • bundle — conjunto.
• YOUR-PROJECT-ID — ID do seu projeto na seção Project settings > General settings > Project ID na Conta de Distribuidor.
• YOUR-ITEM-SKU — pacote de chaves de jogo SKU. Para vender um jogo em uma plataforma específica, use Get games list (geralmente esse SKU se parece com unit_name_drm_sku) para obter o SKU.

• Estilo da interface de pagamento: tema (escuro ou o tema claro padrão), tamanho e outros parâmetros. Especifique os parâmetros ui_settings no URL e passe um objeto JSON settings.ui com codificação Base64 como o valor. Exemplo de URL com configurações de interface:

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

• Token para passar dados do usuário. Usado ao vender chaves de jogo apenas para usuários autenticados. Esse token depende do método de autenticação. Exemplo de URL com um 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}

• O parâmetro mode=sandbox para testes de pagamento. Você pode usar cartões bancários de teste para concluir pagamentos.

1. Exemplo de URL para teste:

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

Vendendo via interface da loja

Você pode vender chaves de jogo através da interface da loja. Para criar uma loja, você pode:

• usar o Site Builder
• criar sua própria versão da loja e integrar a In-Game Store API

Para vender pacotes de chaves de jogo usando a In-Game Store API:

1. Para exibir um catálogo, use o método Get games list.

2. Implemente a compra de chaves de jogo:

   • Para uma compra rápida de uma chave, use o método Create order with specified item. Em resposta a esse método, você receberá um token que deve ser usado para abrir a interface de pagamento.
   • Para comprar várias chaves de jogo, use os métodos de gerenciamento de carrinho:
     • Update cart item from current cart para adicionar uma chave de jogo ao carrinho.
     • Get the current user’s cart para obter uma lista de chaves de jogo no carrinho.
     • Create an order with all items from the current cart para pagar pelas chaves do jogo no carrinho. Em resposta a esse método, você receberá um token que deve ser usado para abrir a interface de pagamento.

Venda via widget

Você pode adicionar um widget à sua página para vender chaves de jogo e personalizá-lo. Para copiar o código do widget, vá para a seção Widget customization depois de criar o pacote de chaves em sua Conta de Distribuidor.

Se um jogo for vendido em uma única plataforma, o widget exibirá o preço do jogo específico para essa plataforma.

Exemplo: Compre agora por R$ 10.

Se um jogo for vendido em várias plataformas, o widget exibirá o menor preço entre as plataformas.

Exemplo: Receba a partir de $10.

Na janela de criação de pedidos, o usuário pode ver os preços de todas as plataformas e fazer uma escolha.

Você também pode exibir o preço de uma plataforma específica no widget especificando o SKU da plataforma no parâmetro drm.

Exemplo de código do 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>

Personalização de botões

1. Abra seu projeto na Conta de Distribuidor.
2. No menu lateral, clique em Store.
3. No painel Game Keys, clique em Configure.
4. Selecione uma chave de jogo e vá para a aba Widget customization.

5. No bloco Customize, selecione a cor do plano de fundo.

6. Quando você adiciona o código do widget à sua página, ele inclui estilos herdados. Adicione os estilos abaixo para substituir esses estilos.

/* 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;
}

Como criar vários botões ou SKUs

Você pode consultar os botões Xsolla Pay2Play Widget Simple Integration 4 para obter um exemplo de código sobre como isso é realizado usando o widget Pay2Play.

A estrutura é semelhante ao código do widget Buy Button. Um exemplo de migração:

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

Continuar lendo