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.

ItemMétodo de venda
Uma cópia de um jogo (chave do jogo).Link direto, widget ou interface de loja. Ao vender através da interface da loja, use o método de compra rápida sem criar um carrinho.
Várias cópias do jogo (chaves do jogo) ou vários jogos em um carrinho.Interface da loja. Use o Site Builder ou integre a In-Game Store & Buy Button API.

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

A autorização permite:

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.

Observação
Os usuários podem reembolsar as chaves. Após um reembolso bem-sucedido, você receberá a lista das chaves afetadas em um e-mail da Xsolla. Recomendamos bloquear o acesso a estas chaves em todas as plataformas de terceiros.

O link a seguir abre a interface de pagamento:

Copy
Full screen
Small screen
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}
Observação

Comprar chaves de jogo através de um link direto por moeda real só é possível após a assinatura de um contrato de licença com a Xsolla. Para fazer isso, na Conta de Distribuidor, vá para a seção Agreements & Taxes > Agreements, preencha o formulário de contrato e aguarde a confirmação. Pode levar até 3 dias úteis para revisar o contrato.

Para testar pagamentos, você pode usar o ambiente de teste adicionando o parâmetro mode=sandbox ao link.

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:
Copy
Full screen
Small screen
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:
Copy
Full screen
Small screen
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}
Observação
Ao fazer um pagamento, o servidor Xsolla envia uma solicitação para o URL do webhook para verificar se o usuário existe no jogo. Para evitar erros ao testar o pagamento, vá para Publisher Account > Project settings > Webhooks e defina a opção como OFF. Se você quiser usar webhooks, implemente o processamento bem-sucedido de um webhook User validation.
  1. Exemplo de URL para teste:
Copy
Full screen
Small screen
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:

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

  1. Para exibir um catálogo, use o método Get games list.
  2. Implemente a compra de chaves de jogo:

Escolha uma opção de autenticação adequada para que os métodos funcionem corretamente.
Observação
Ao vender um jogo através da In-Game Store & Buy Button API, você deve implementar um recurso que permita aos jogadores selecionar uma plataforma específica no cliente. Para obter o SKU, passe o valor do parâmetro items.unit_items.sku da solicitação para obter a lista de jogos.

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:

Copy
Full screen
Small screen
    <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>
    
    Observação
    Parâmetros do widget

    ParâmetroTipoDescrição
    project_id
    | integer | ID do projeto no qual chaves de jogo ou pacotes com chaves de jogo, itens de jogo ou conjuntos com itens, são carregados.
    item_type
    | matriz | Tipo de item. Pode assumir valores de virtual_good, virtual_currency, game_key, unit. O tipo unit é usado quando há várias plataformas para distribuir o jogo.
    sku
    | string | ID de item exclusivo.
    drm
    | string | SKU da plataforma de distribuição, por exemplo, steam. Permite exibir o preço de uma plataforma específica.
    api_settings
    | string | Definições de configuração do ambiente e do host:
    • host — host para executar solicitações. O valor padrão é — store.xsolla.com
    • api_host — host para executar solicitações de API. O valor padrão é — store.xsolla.com/api
    • sandbox — defina o valor true para testar o processo de pagamento. sandbox-secure.xsolla.com será usado em vez de secure.xsolla.com para processar pagamentos (consulte Testando o processo de pagamento)
    usuário
    | matriz | Uma matriz com dados do usuário.
    user.auth
    | string | Token de autorização do usuário: JSON Web Token ou token de acesso Pay Station.
    user.locale
    | string | Localidade do usuário. Determina o idioma do texto do botão e da interface de pagamento. É usado um código de idioma de duas letras baseado em ISO_639-1.
    widget_ui.theme
    | object | O tema de cores do widget, determinando sua aparência. Aceita valores {foreground:[‘blue’,‘red’,‘green’,‘gold’], background:[’light’,‘dark’]}
    widget_ui.template
    | string | Modelo. Valores possíveis:
    • standard (padrão) - inclui imagem do jogo, título e botão estilizado
    • simple — exibe apenas o botão sem nenhum estilo aplicado
    widget_ui.target_element
    | string | Elemento da página, onde o widget deve ser renderizado (o seletor jQuery deve ser usado, por exemplo #widget-example). Obrigatório.

    Parâmetros que determinam a aparência da interface de pagamento

    ParâmetroTipoDescrição
    payment_ui
    | object | Parâmetros de aparência da interface de pagamento.
    payment_widget_ui
    | object | Um objeto com parâmetros que determinam a aparência da interface de pagamento.
    payment_widget_ui.lightbox
    | object | Um objeto com opções para a janela modal na qual a interface de pagamento é aberta.
    lightbox.width
    | string | Largura do quadro da lightbox. Se null, depende da largura do Pay Station. O padrão é null.
    lightbox.height
    | string | Altura do quadro da lightbox. Se null, depende da altura do Pay Station. O padrão é 100%.
    lightbox.zIndex
    | integer | Define a ordem do arranjo. O padrão é 1000.
    lightbox.overlayOpacity
    | integer | Opacidade do plano de fundo do widget (0 — totalmente transparente, 1 — completamente opaco). O valor padrão é 60% (.6).
    lightbox.overlayBackground
    | string | Cor de fundo da sobreposição. O padrão é #000000.
    lightbox.contentBackground
    | string | Cor de fundo do quadro. O padrão é #ffffff. Observe que essas mudanças de cor não afetam o iframe do Pay Station em si, apenas as configurações da lightbox que o contém.
    lightbox.spinner
    | string | Tipo de indicador de carregamento animado. Pode ser xsolla ou round. O padrão é xsolla.
    lightbox.spinnerColor
    | string | Cor do cata-vento. Sem valor padrão.
    payment_widget_ui.childWindow
    | object | Configurações para a janela filho na qual a interface de pagamento é aberta. Funciona para a versão mobile.
    payment_widget_ui.childWindow.target
    | string | A propriedade que determina onde a janela filho deve ser aberta. Pode assumir valores de _blank, _self, _parent. O valor padrão é — _blank.

    Métodos de widget

    • var widgetInstance = XBuyButtonWidget.create(options) — crie a instância do widget e renderize-a na página.
    • widgetInstance.on(event, handler) — anexa uma função de manipulador de eventos para o evento ao widget.
      • event (string) — tipo de evento.
      • handler (function) — uma função a ser executada quando o evento é acionado.
    • widgetInstance.off(event, handler) — remove um manipulador de eventos.
      • event (string) — tipo de evento.
      • handler (function) — uma função de manipulador previamente anexada para o evento.

    Lista de eventos:

    ParâmetroDescrição
    initWidget inicializado.
    openWidget aberto.
    loadInterface de Payments (Pay Station) carregada.
    closeInterface de Pagamento (Pay Station) fechada.
    statusO usuário está na página de status.
    status-invoiceO usuário está na página de status; pagamento em andamento.
    status-deliveringEvento em que o usuário foi movido na página de status, o pagamento foi concluído e estamos enviando uma notificação de pagamento.
    status-doneO usuário está na página de status; pagamento creditado na conta do usuário.
    status-troubledEvento em que o usuário foi movido na página de status, mas o pagamento falhou.

    Você pode acessar a lista de eventos usando o objeto XBuyButtonWidget.eventTypes.

    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.
    Observação
    Se não houver chaves de jogo, crie uma nova.
    1. No bloco Customize, selecione a cor do plano de fundo.
    Observação
    Você também pode modificar o objeto theme no código para que o parâmetro background tenha uma cadeia de caracteres vazia como um valor.
    1. Quando você adiciona o código do widget à sua página, ele inclui estilos herdados. Adicione os estilos abaixo para substituir esses estilos.
    Aviso
    Adicionamos em uma tag style abaixo da tag scriptque você obteve da aba Widget customization por motivos de herança/prioridade CSS.
    Copy
    Full screen
    Small screen
    /* 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;
    }
    
    Aviso
    • Os nomes de id/classe acima e o trecho de código são usados em conjunto com o código do widget copiado (a imagem na etapa 5). Por esse motivo, é importante que você implemente o código do widget copiado.
    • Você pode usar o código acima como está ou modificar o código com base no seu cenário. Os comentários de código (linhas 1, 3, 5, 11, 16, 18, 22, 29) estão lá para ajudar a determinar o destino de cada regra CSS e ajudar no estilo futuro. Por exemplo, se você quiser apenas o botão (e não o widget inteiro), será preciso substituir a cor de fundo da sua página nos locais abaixo onde a cor está white — linhas 20 e 27.

    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:

    Copy
    Full screen
    Small screen
    <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>
    
    Aviso
    • Linhas 1 e 2 — um div por botão, cada um com um ID exclusivo.
    • A partir da linha 26 estão as opções para o segundo botão (disposto no objeto options2). Você precisará de um conjunto de options similares aos acima para cada botão Buy. Observe os diferentes sku (linha 28) e target_element (linha 34, visando a div na linha 2).
    Este artigo foi útil?
    Obrigado!
    Podemos melhorar alguma coisa? Mensagem
    Que pena ouvir isso
    Explique porque este artigo não foi útil para você. Mensagem
    Obrigado pelo seu feedback!
    Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

    Continuar lendo

    Última atualização: 3 de Outubro de 2024

    Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

    Relatar um problema
    Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
    Forneça um e-mail para que possamos responder
    Obrigado pelo seu feedback!