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.
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 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 API
Para vender pacotes de chaves de jogo usando a In-Game Store 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 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.
- 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 | string | 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 | object | Definições de configuração do ambiente e do host:
|
usuário | object | Um objeto 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:
|
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. |
payment_widget_ui.lightbox.width | string | Largura do quadro da lightbox. Se null , depende da largura do Pay Station. O padrão é null . |
payment_widget_ui.lightbox.height | string | Altura do quadro da lightbox. Se null , depende da altura do Pay Station. O padrão é 100% . |
payment_widget_ui.lightbox.zIndex | integer | Define a ordem do arranjo. O padrão é 1000 . |
payment_widget_ui.lightbox.overlayOpacity | integer | Opacidade do plano de fundo do widget (0 — totalmente transparente, 1 — completamente opaco). O valor padrão é 60% (.6 ). |
payment_widget_ui.lightbox.overlayBackground | string | Cor de fundo da sobreposição. O padrão é #000000 . |
payment_widget_ui.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. |
payment_widget_ui.lightbox.spinner | string | Tipo de indicador de carregamento animado. Pode ser xsolla ou round . O padrão é xsolla . |
payment_widget_ui.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).
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.