Configuração da venda de chaves de jogo

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

Chaves de jogo podem ser vendidas através de um link direto que abre a interface de pagamento no seguinte formato:

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

Além do parâmetro de pesquisa principal você também pode passar parâmetros para personalizar a interface de pagamento e vender a usuários autenticados.

Parâmetros necessários

Adicione os seguintes dados a este link:

• YOUR-ITEM-TYPE — tipo de item. Possíveis valores:

  • game — pacote de chave de jogo.
  • game_key — pacote de chave de jogo em uma plataforma específica.
  • bundle — conjunto com pacotes de chaves de jogo.

• YOUR-PROJECT-ID — ID do seu projeto, que pode ser encontrado na Conta de Distribuidor ao lado do nome do projeto.

• YOUR-ITEM-SKU — SKU do pacote de chaves de jogo, por exemplo:

  • order456 — SKU sem uma plataforma específica.
  • pre.order123_steam — SKU com uma plataforma específica.

Recomendamos usar pacotes de chaves de jogo de plataformas específicas. Isso ajuda a evitar problemas de compatibilidade ao usar ou ativar as chaves. Em todos os casos, um sufixo específico da plataforma deve ser adicionado ao SKU, automaticamente ou manualmente, dependendo de como o pacote de chaves é criado:

• Ao criar pacotes de chaves de jogo na Conta de Distribuidor, o sistema automaticamente adiciona um sufixo específico da plataforma com um sublinhado (ex.: _steam, _playstation) ao SKU inserido.

• Ao criar pacotes de chaves de jogo específicos de uma plataforma usando chamadas API, você pode especificar o sufixo da plataforma em qualquer formato que inclua apenas caracteres alfanuméricos latinos maiúsculos e minúsculos, pontos, traços e sublinhados.

Lista de plataformas suportadas pela Xsolla e os exemplos de sufixos delas:

Para garantir que o link funcione corretamente, você pode recuperar o SKU exato usando a chamada de API Get games list e incluí-la no link de pagamento como o valor do SKU. O SKU do item é retornado no parâmetro items.unit_items.sku (tipicamente, esse SKU segue o formato game_key_sku_drm_sku).

URL de exemplo para vender um jogo no Steam:

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

Personalização da interface de pagamento

Para fazer com que a interface de pagamento corresponda ao estilo do seu jogo, configure o tema, tamanho e outros parâmetros da interface conforme descrito no guia sobre como personalizar a estação de pagamentos. Adicione o parâmetro ui_settings ao URL e passe um objeto JSON settings.ui com a codificação Base64 como valor.

Exemplo de URL para abrir a interface de pagamento com um tema personalizado:

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

Vendendo a usuários autenticados

Para vender chaves aos usuários autenticados, passe um token de acesso de usuário no parâmetro xsolla_login_token. Esse token depende do método de autenticação selecionado.

Exemplo de URL para abrir a interface de pagamento com um 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}

Testes de pagamento

Para testar o fluxo de pagamento no modo sandbox, adicione o parâmetro mode=sandbox ao URL. Você pode usar cartões bancários de teste para concluir as transações.

Exemplo de URL para abrir a interface de pagamento no modo sandbox:

1https://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 API Store Builde

Para vender pacotes de chaves de jogo usando a API Store Builder:

1. Para exibir um catálogo, use o método Obter lista de jogos.

2. Implemente a compra de chaves de jogo:

   • Para uma compra rápida de uma chave, use o método Criar pedido com item especificado. 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:
     • Atualizar item do carrinho do carrinho atual para adicionar uma chave de jogo ao carrinho.
     • Obter o carrinho do usuário atual para obter uma lista de chaves de jogo no carrinho.
     • Criar pedido com todos os itens do carrinho atual 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:

 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>

Personalização de botões

1. Abra seu projeto na Conta de Distribuidor e acesse a seção Items catalog > Virtual items.
2. Selecione uma chave de jogo e acesse a aba Widget customization.

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

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

 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}

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:

 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>