Configure a compra de itens

Escolha o método mais adequado para o seu projeto para acessar os dados Xsolla:

Use aplicativos da web de teste como exemplo de implementação:

Criar um pedido no lado do cliente do aplicativo

Você pode vender tanto um item com um SKU em qualquer quantidade, ou um carrinho de itens com SKUs diferentes pré-preenchidos por um usuário. Para criar um pedido com dados sobre um usuário e itens no lado da Xsolla, use uma das seguintes chamadas API:

A chamada de API utilizada retornará um token de pagamento, que é necessário para abrir uma interface de pagamento e realizar um pagamento. Para usar o modo sandbox, passe o parâmetro “sandbox”: true no corpo da solicitação para obter um token.

Por padrão, o tempo de vida do token é de 24 horas. Se quiser alterar esse valor, contate seu Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com. O novo valor será habilitado para todos os projetos da empresa criados na Conta de Distribuidor.

Abertura da interface de pagamento

Essa maneira de abrir a interface de pagamento não oferece suporte à venda de chaves de jogo. Para vender chaves de jogo, siga a instrução.

EXEMPLO: CARREGAMENTO DE SCRIPT ASSÍNCRONO

Copy

Full screen

Small screen

<script>
   var options = {
       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
       sandbox: true //TODO please do not forget to remove this setting when going live
   };
   var s = document.createElement('script');
   s.type = "text/javascript";
   s.async = true;
   s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
   s.addEventListener('load', function (e) {
       XPayStationWidget.init(options);
   }, false);
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(s);
</script>

<button data-xpaystation-widget-open>Buy Credits</button>

A Pay Station Embed permite obter eventos da interface de pagamento via postMessage. Você pode enviar esses eventos para sistemas de análise. Para configurar o processamento de eventos em seu sistema de análise, entre em contato com seu Gerente de Sucesso da Conta ou envie um e-mail para csm@xsolla.com.

A equipe Xsolla criou um widget que simplifica a integração da interface de pagamento em seu site. O script do widget está disponível em nosso repositório GitHub.

Parâmetros de inicialização do script:

Parâmetro	Tipo	Descrição
access_token	string	Token, recebido via API. Obrigatório.
sandbox	boolean	Defina como `true` para testar o processo de pagamento: `sandbox-secure.xsolla.com` será usado em vez de `secure.xsolla.com`.
lightbox	object	Parâmetros da lightbox (objeto; somente versão desktop).
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.modal	boolean	Se `true`, o quadro lightbox não poderá ser fechado. O padrão é `false`.
lightbox.closeByClick	boolean	Se `true`, clicar na sobreposição fechará a lightbox. O padrão é `true`.
lightbox.closeByKeyboard	boolean	Se `true`, pressionar ESC fechará a lightbox. O padrão é `true`.
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.contentMargin	string	Margem do quadro. O padrão é `10px`.
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.
childWindow	object	Opções para a janela filho que contém a interface do Pay Station. Suportado na versão móvel.
childWindow.target	string	Onde abrir a janela do Pay Station. Pode ser `_blank`, `_self`, `_parent`. O padrão é `_blank`.

O script permite que você acompanhe eventos da interface de pagamento. Dependendo do tipo de evento, você pode executar várias ações na página da web.

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.

Se você quiser inicializar a abertura da interface de pagamento, use o seguinte link: https://secure.xsolla.com/paystation4/?token=TOKEN.

É necessário usar o link com o prefixo https:// apenas para a abertura da interface de pagamento.

Use o seguinte URL para fins de teste: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.

O parâmetro access_token contém dados privados do usuário. Certifique-se de usar a comunicação de servidor para servidor ao obter esse parâmetro.

Para abrir a interface de pagamento em um iframe:

Implemente o mecanismo postMessage para receber eventos da interface de pagamento.
Abra a interface de pagamento seguindo o link https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, onde TOKEN é o token recebido.

Problema em potencial: se um botão para copiar um código de confirmação de pagamento exigido por alguns sistemas de pagamento não for exibido ao abrir a interface de pagamento em um iframe, passe o atributo allow=“clipboard-read; clipboard-write; payment” ao iframe.

Exemplo:

Copy

Full screen

Small screen

<iframe
  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
  width="800"
  height="700"
  allow="clipboard-read; clipboard-write; payment"
></iframe>

Pagamentos de teste

Para testar o processo de pagamento, você pode usar o modo sandbox. O modo sandbox é um ambiente autônomo que oferece suporte a todos os recursos de um ambiente de verdade, exceto pagamentos reais e recusados. Você pode acessar o modo sandbox enviando “sandbox”: true ao criar um pedido.

Antes de assinar um contrato com a Xsolla, o teste do processo de pagamento só fica disponível no modo sandbox.

O teste não requer o saque de dinheiro de contas bancárias reais.

Abra a interface de pagamento no modo sandbox.
Escolha o método de pagamento Cartão do banco.
Insira os dados do cartão bancário. Nos outros campos (ex.: nome ou endereço), você pode inserir qualquer dado. Você também pode especificar detalhes incorretos (número do cartão ou data de validade) para testar se um erro é gerado.
Clique em Pay.

Lista de cartões de teste

Veja a lista de cartões bancários de teste.

Além dos detalhes do cartão, você precisa especificar o CEP se pelo menos uma das seguintes condições for verdadeira:

O país do usuário for os EUA ou Canadá.
O Número de Identificação Bancária (BIN) indica que um cartão foi emitido nos EUA.

Você pode especificar qualquer CEP válido (por exemplo, 12345). Isso determina a taxa de imposto sobre vendas e não afeta o andamento do pagamento do teste.
Os pagamentos com cartão bancário no modo sandbox podem ser feitos nas seguintes moedas: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.

No modo sandbox, você pode testar um pagamento único e um pagamento com métodos de pagamento salvos usando cartões bancários e o PayPal.

Para ver informações detalhadas, incluindo taxas, sobre as transações feitas no modo sandbox:

Abra sua Conta de Distribuidor.
Vá para Accounting > Transaction registry.
Marque a caixa Show test transactions.

Adicionalmente, você pode ver os detalhes das transações e solicitar reembolsos na Conta de Distribuidor na seção Support > Transaction search.

Crie um pedido e abra a interface de pagamento

Você pode vender tanto um item com um SKU em qualquer quantidade, ou um carrinho de itens com SKUs diferentes pré-preenchidos por um usuário.

Para criar um pedido com dados sobre um usuário e um item com um SKU no lado da Xsolla, chame o método SDK XsollaCatalog.Purchase, passando os seguintes parâmetros a ele:

itemSku — o SKU do item que o usuário deseja comprar.
onSuccess — o retorno de chamada de compra bem-sucedida, acionado quando o pedido transita para o status done.
onError — o retorno de chamada de erro de solicitação.
onBrowseClosed — o retorno de chamada de fechamento do navegador (opcional). O evento é rastreado apenas ao abrir a interface de pagamento do usuário no navegador integrado. Eventos de navegadores externos não são rastreados.
purchaseParams — parâmetros de compra e configurações de interface de pagamento do usuário, tais como a localização e moeda (opcional).
customHeaders — cabeçalhos de solicitação da web personalizados (opcional).

O método XsollaCatalog.Purchase inicia o processo de compra para o item especificado, incluindo a criação de pedido, abrindo a interface de pagamento do usuário e rastreando o status do pedido. No parâmetro onSuccess, passe a função que é chamada quando o pedido transita para o status done.

Para criar um pedido com dados sobre um usuário e um carrinho de itens no lado da Xsolla, você precisa primeiro implementar a lógica de preenchimento e edição do carrinho, bem como a obtenção do conteúdo. Consulte as instruções para ver informações mais detalhadas sobre a compra pelo carrinho de compras.

Ao criar um pedido, a Xsolla gera um token de pagamento, necessário para abrir a interface de pagamento e realizar um pagamento.

Pagamentos de teste

Para testar o processo de pagamento, você pode usar o modo sandbox. O modo sandbox é um ambiente autônomo que suporta todos os recursos de um ambiente ativo, exceto pagamentos reais e recusados. Para ter acesso ao modo sandbox, você deve ter a caixa Test Payments Mode marcada no Unity Editor no painel Inspector (marcado por padrão).

Antes de assinar um contrato com a Xsolla, o teste do processo de pagamento só fica disponível no modo sandbox.

O teste não requer o saque de dinheiro de contas bancárias reais.

Execute seu aplicativo ou cena no Unity Editor.
Escolha o método de pagamento Cartão do banco.
Insira os dados do cartão bancário. Nos outros campos (ex.: nome ou endereço), você pode inserir qualquer dado. Você também pode especificar detalhes incorretos (número do cartão ou data de validade) para testar se um erro é gerado.
Clique em Pay.

Lista de cartões de teste

Veja a lista de cartões bancários de teste.

Além dos detalhes do cartão, você precisa especificar o CEP se pelo menos uma das seguintes condições for verdadeira:

O país do usuário for os EUA ou Canadá.
O Número de Identificação Bancária (BIN) indica que um cartão foi emitido nos EUA.

No modo sandbox, você pode testar um pagamento único e um pagamento com métodos de pagamento salvos usando cartões bancários e o PayPal.

Para ver informações detalhadas, incluindo taxas, sobre as transações feitas no modo sandbox:

Abra sua Conta de Distribuidor.
Vá para Accounting > Transaction registry.
Marque a caixa Show test transactions.

Adicionalmente, você pode ver os detalhes das transações e solicitar reembolsos na Conta de Distribuidor na seção Support > Transaction search.

Crie um pedido e abra a interface de pagamento

Você pode vender tanto um item com um SKU em qualquer quantidade, ou um carrinho de itens com SKUs diferentes pré-preenchidos por um usuário.

Para criar um pedido com dados sobre um usuário e um item com um SKU no lado da Xsolla, chame o método createOrderByItemSku da biblioteca Store, passando os seguintes parâmetros a ele:

- callback — o retorno de chamada de criação de pedido bem-sucedido. Ele recebe o token de pagamento necessário para abrir a interface e fazer o pagamento.

- itemSku — o SKU do item que o usuário deseja comprar.

- options — parâmetros de pagamento (opcional).

- quantity — a quantidade de itens que o usuário deseja comprar (opcional). Se a quantidade não for especificada, o valor padrão será definido como 1.

Implemente a lógica de abertura da interface de pagamento:

Copy

Full screen

Small screen

val intent = XPayments.createIntentBuilder(activity)
    .accessToken(AccessToken(<payment token>))
    .isSandbox(<isSandbox>)
    .build()
startActivityForResult(intent, RC_PAYSTATION)

Implemente o tratamento de resultados de pagamento:

Copy

Full screen

Small screen

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == RC_PAYSTATION) {
        val (status, _) = XPayments.Result.fromResultIntent(data)
        when (status) {
            XPayments.Status.COMPLETED -> Log.d("MainActivity", "Payment completed")
            XPayments.Status.CANCELLED -> Log.d("MainActivity", "Payment cancelled")
            XPayments.Status.UNKNOWN -> Log.d("MainActivity", "Status unknown")
        }
    }
}

Revise o projeto de demonstração para obter um exemplo de implementação.

Pagamentos de teste

Para testar o processo de pagamento, você pode usar o modo sandbox. O modo sandbox é um ambiente autônomo que suporta todos os recursos de um ambiente ativo, exceto pagamentos reais e recusados. Para ter acesso ao modo sandbox, você deve chamar o método isSandbox e passar true como argumento, ao criar um objeto IntentBuilder.

Antes de assinar um contrato com a Xsolla, o teste do processo de pagamento só fica disponível no modo sandbox.

O teste não requer o saque de dinheiro de contas bancárias reais.

Execute seu aplicativo.
Escolha o método de pagamento Cartão do banco.
Insira os dados do cartão bancário. Nos outros campos (ex.: nome ou endereço), você pode inserir qualquer dado. Você também pode especificar detalhes incorretos (número do cartão ou data de validade) para testar se um erro é gerado.
Clique em Pay.

Lista de cartões de teste

Veja a lista de cartões bancários de teste.

Além dos detalhes do cartão, você precisa especificar o CEP se pelo menos uma das seguintes condições for verdadeira:

O país do usuário for os EUA ou Canadá.
O Número de Identificação Bancária (BIN) indica que um cartão foi emitido nos EUA.

No modo sandbox, você pode testar um pagamento único e um pagamento com métodos de pagamento salvos usando cartões bancários e o PayPal.

Para ver informações detalhadas, incluindo taxas, sobre as transações feitas no modo sandbox:

Abra sua Conta de Distribuidor.
Vá para Accounting > Transaction registry.
Marque a caixa Show test transactions.

Adicionalmente, você pode ver os detalhes das transações e solicitar reembolsos na Conta de Distribuidor na seção Support > Transaction search.

Crie um pedido e abra a interface de pagamento

Você pode vender tanto um item com um SKU em qualquer quantidade, ou um carrinho de itens com SKUs diferentes pré-preenchidos por um usuário.

Para criar um pedido com dados sobre um usuário e um item com um SKU no lado da Xsolla, chame o método SDK FetchPaymentToken, passando os seguintes parâmetros a ele:

- AuthToken — o token de autenticação do usuário, obtido durante a autenticação usando o Xsolla Login.

- ItemSKU — o SKU do item que o usuário quer comprar.

- SuccessCallback - o retorno de chamada acionado ao receber o token de pagamento com sucesso.

- ErrorCallback — o retorno de chamada de erro de solicitação.

- PurchaseParams — parâmetros de compra e da interface de pagamento do usuário, tal como a localização e a moeda (opcional).

Implemente a abertura da interface de pagamento. Para fazer isso, chame o método SDK LaunchPaymentConsole, passando os seguintes parâmetros a ele:

- WorldContextObject — o objeto de contexto global (para chamadas C++).

- OrderId — o ID do pedido.

- AccessToken — o token de pagamento.

- SuccessCallback — o retorno de chamada acionado ao receber o token de pagamento com sucesso.

- ErrorCallback — o retorno de chamada de erro de solicitação.

- BrowserClosedCallback — o retorno de chamada de fechamento do navegador. O evento é rastreado apenas ao abrir a interface de pagamento do usuário no navegador integrado. Os eventos de navegadores externos não são rastreados.

- PayStationVersion — a versão Pay Station. Por padrão, a versão 4 é usada.

Pagamentos de teste

Para testar o processo de pagamento, você pode usar o modo sandbox. O modo sandbox é um ambiente autônomo que suporta todos os recursos de um ambiente ativo, exceto pagamentos reais e recusados. Para ter acesso ao modo sandbox, você deve ter a caixa Enable Sandbox marcada no Unreal Editor na seção Settings > Project Settings > Plugins > Xsolla Settings > Purchases (marcado por padrão).

Antes de assinar um contrato com a Xsolla, o teste do processo de pagamento só fica disponível no modo sandbox.

O teste não requer o saque de dinheiro de contas bancárias reais.

Execute seu aplicativo ou mapa no Unreal Editor.
Escolha o método de pagamento Cartão bancário.
Insira os dados do cartão bancário. Nos outros campos (ex.: nome ou endereço), você pode inserir qualquer dado. Você também pode especificar detalhes incorretos (número do cartão ou data de validade) para testar se um erro é gerado.
Clique em Pay.

Lista de cartões de teste

Veja a lista de cartões bancários de teste.

Além dos detalhes do cartão, você precisa especificar o CEP se pelo menos uma das seguintes condições for verdadeira:

O país do usuário for os EUA ou Canadá.
O Número de Identificação Bancária (BIN) indica que um cartão foi emitido nos EUA.

No modo sandbox, você pode testar um pagamento único e um pagamento com métodos de pagamento salvos usando cartões bancários e o PayPal.

Para ver informações detalhadas, incluindo taxas, sobre as transações feitas no modo sandbox:

Abra sua Conta de Distribuidor.
Vá para Accounting > Transaction registry.
Marque a caixa Show test transactions.

Adicionalmente, você pode ver os detalhes das transações e solicitar reembolsos na Conta de Distribuidor na seção Support > Transaction search.

Obrigado pelo seu feedback!

Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Última atualização: 28 de Novembro de 2024

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

Your browser is not supported. Please try a different browser

Artigos populares

Ou escolha as mais frequentes:

Resposta com base nas seguintes fontes:

Nos dê seu feedback (opcional)

Nos dê seu feedback (opcional)

Payments

Configure a compra de itens

Criar um pedido no lado do cliente do aplicativo

Abertura da interface de pagamento

access_token

sandbox

lightbox

payment_widget_ui.lightbox.width

payment_widget_ui.lightbox.height

payment_widget_ui.lightbox.zIndex

payment_widget_ui.lightbox.overlayOpacity

payment_widget_ui.lightbox.overlayBackground

payment_widget_ui.lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

payment_widget_ui.lightbox.contentBackground

payment_widget_ui.lightbox.contentMargin

payment_widget_ui.lightbox.spinner

payment_widget_ui.lightbox.spinnerColor

childWindow

childWindow.target

Pagamentos de teste

Crie um pedido e abra a interface de pagamento

Pagamentos de teste

Crie um pedido e abra a interface de pagamento

Pagamentos de teste

Crie um pedido e abra a interface de pagamento

Pagamentos de teste