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.
Item | Mé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:
- 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:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}
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 comunit_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 JSONsettings.ui
com codificação Base64 como o valor. Exemplo de URL com configurações de interface:
- curl
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:
- curl
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.
- Exemplo de URL para teste:
- curl
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 & Buy Button API
Para vender pacotes de chaves de jogo usando a In-Game Store & Buy Button API:
- Para exibir um catálogo, use o método Get games list.
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.
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:
<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>
Parâmetros do widget
Parâmetro | Tipo | Descriçã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 devirtual_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 valortrue
para testar o processo de pagamento.sandbox-secure.xsolla.com
será usado em vez desecure.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 estilizadosimple
— 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âmetro | Tipo | Descriçã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. Senull
, depende da largura do Pay Station. O padrão é null
.lightbox.height
| string | Altura do quadro da lightbox. Senull
, 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 serxsolla
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âmetro | Descrição |
---|---|
init | Widget inicializado. |
open | Widget aberto. |
load | Interface de Payments (Pay Station) carregada. |
close | Interface de Pagamento (Pay Station) fechada. |
status | O usuário está na página de status. |
status-invoice | O usuário está na página de status; pagamento em andamento. |
status-delivering | Evento 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-done | O usuário está na página de status; pagamento creditado na conta do usuário. |
status-troubled | Evento 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
- Abra seu projeto na Conta de Distribuidor.
- No menu lateral, clique em Store.
- No painel Game Keys, clique em Configure.
- Selecione uma chave de jogo e vá para a aba Widget customization.
- No bloco Customize, selecione a cor do plano de fundo.
theme
no código para que o parâmetro background
tenha uma cadeia de caracteres vazia como um valor.- Quando você adiciona o código do widget à sua página, ele inclui estilos herdados. Adicione os estilos abaixo para substituir esses estilos.
style
abaixo da tag script
que você obteve da aba Widget customization por motivos de herança/prioridade CSS.- css
/* 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;
}
- 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:
- javascript
<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>
- 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 deoptions
similares aos acima para cada botão Buy. Observe os diferentessku
(linha 28) etarget_element
(linha 34, visando adiv
na linha 2).
Continuar lendo
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.