Configure a abertura da interface de pagamento

Dependendo das configurações de autenticação do projeto, você pode usar uma das seguintes opções para abrir a interface de pagamento:

• Chamada de API Create token do lado do servidor se:
  • você usar seu próprio sistema de autorização em seu aplicativo.
  • os planos de assinatura estão configurados com uma taxa de assinatura associada ao primeiro pagamento em seu projeto.
• método do lado do cliente para obter um link para abrir uma interface de pagamento se você usar o Xsolla Login em seu projeto.

Via chamada de API Criar token de servidor

1. Implemente a obtenção de um token para abrir a interface de pagamento de uma das seguintes maneiras:
   • na página de seleção do método de pagamento
   • ao entrar na página de dados de pagamento
2. Implemente como a abertura da interface de pagamento é feita:
   • Script Pay Station Embed
   • Iframe
   • Nova janela

Com a exibição da página de seleção de método de pagamento

Para fazer com que a interface de pagamento exiba a página de seleção de método de pagamento quando aberta, passe o parâmetro purchase.subscription.plan_id com o ID do plano selecionado para a chamada de API Criar token. Passe parâmetros de personalização adicionais, se necessário.

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "currency": "USD"
24  },
25  "purchase": {
26    "subscription": {
27      "plan_id": "54321"
28    }
29  }
30}'

Exemplo de página de seleção de forma de pagamento:

Com a exibição da página de entrada de dados de pagamento

Para fazer com que a interface de pagamento exiba a página de entrada de dados de pagamento quando aberta, passe os seguintes parâmetros na chamada de API Criar token:

• purchase.subscription.plan_id com o ID do plano selecionado.
• settings.payment_methodcom o ID do método de pagamento. Para encontrar a lista de identificadores, em seu projeto na Conta de Distribuidor, acesse a seção Pay Station > Payment methods ou solicite-a ao seu Gerente de Sucesso do Cliente.

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "payment_method": 1380,
24    "currency": "USD"
25  },
26  "purchase": {
27    "subscription": {
28      "plan_id": "54321"
29    }
30  }
31}'

Exemplo de página de entrada de dados de pagamento:

Via método de API do cliente

1. Implemente a obtenção de um link para abrir a interface de pagamento usando o método de API do cliente.
2. Implemente a abertura da interface de pagamento de uma das seguintes maneiras:
   • Script Pay Station Embed
   • Iframe
   • Nova janela

Método do cliente para obter um link para abrir uma interface de pagamento

No lado do cliente do seu aplicativo, use uma solicitação HTTP POST para implementar a abertura da interface de pagamento: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy.

A solicitação deve conter um cabeçalho Authorization: Bearer <client_user_jwt>, onde <client_user_jwt> é o JSON Web Token (JWT) do usuário — um token exclusivo codificado em Base64. Para obter o token:

• Use Register new user e Auth by username, e as chamadas de API de senha se seu aplicativo usar autorização de login e senha.

• Use a chamada de API Auth via social network se seu aplicativo usar autorização por meio de redes sociais.

Especifique country como parâmetro de consulta — a designação de duas letras do país do usuário de acordo com o padrão ISO 3166-1 alfa-2. Afeta a escolha de localidade e moeda. Se esse parâmetro não for passado, o país será determinado pelo endereço IP do usuário.

Passe os seguintes parâmetros na solicitação:

• plan_external_id para abrir a interface de pagamento na página de seleção de forma de pagamento.

• plan_external_id e settings.payment_method abrir a interface de pagamento na página para inserir dados de pagamento.

Parâmetros do corpo da solicitação:

 1curl -X 'POST' \
 2'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
 3  -H 'accept: application/json' \
 4  -H 'Authorization: Bearer client_user_jwt'
 5
 6  {
 7    "plan_external_id": "PlanExternalId",
 8    "settings": {
 9      "ui": {
10        "size": "large",
11        "theme": "string",
12        "version": "desktop",
13        "desktop": {
14          "header": {
15            "is_visible": true,
16            "visible_logo": true,
17            "visible_name": true,
18            "type": "compact",
19            "close_button": true
20          }
21        },
22        "mobile": {
23          "mode": "saved_accounts",
24          "footer": {
25            "is_visible": true
26          },
27          "header": {
28            "close_button": true
29          }
30        },
31        "mode": "user_account"
32        }
33      },
34      "currency": "string",
35      "locale": "string",
36      "external_id": "string",
37      "payment_method": 1,
38      "return_url": "string",
39      "redirect_policy": {
40        "redirect_conditions": "none",
41        "delay": 0,
42        "status_for_manual_redirection": "none",
43        "redirect_button_caption": "string"
44      }
45    }

1{
2  "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
3}

Maneiras de abrir a interface de pagamento

Com Pay Station Embed

Adicione um script à página do seu site para abrir o widget da interface de pagamento. Uma descrição completa do script está disponível no repositório GitHub.

EXEMPLO: CARREGAMENTO DE SCRIPT ASSÍNCRONO

 1<script>
 2   var options = {
 3       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
 4       sandbox: true //TODO please do not forget to remove this setting when going live
 5   };
 6   var s = document.createElement('script');
 7   s.type = "text/javascript";
 8   s.async = true;
 9   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10   s.addEventListener('load', function (e) {
11       XPayStationWidget.init(options);
12   }, false);
13   var head = document.getElementsByTagName('head')[0];
14   head.appendChild(s);
15</script>
16
17<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.

Parâmetros de inicialização do script:

Em um Iframe

Você precisa implementar os seguintes mecanismos do seu lado:

• Verifique o tipo de dispositivo (desktop vs. dispositivo móvel) e envie-o dentro do parâmetro settings.ui.version do token.
• Obtenha os 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 o Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com.

Para abrir a interface de pagamento em um iframe, use o seguinte link: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, onde ACCESS_TOKEN é o token obtido com o método Create token. Você também pode obter um link pronto com um token ao implementar o método do cliente para abrir a interface de pagamento.

Para fins de teste, use este URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

Em uma nova janela

Para abrir a interface de pagamento em uma nova janela, use o seguinte link: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, onde ACCESS_TOKEN é o token obtido com o método Criar token. Você também pode obter um link pronto com um token ao implementar o método do cliente para abrir a interface de pagamento.

Para fins de teste, use este URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.