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

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

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

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

• 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, vá para a seção Pay Station > Payment methods ou solicite-a ao seu Gerente de Sucesso do Cliente.

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "payment_method": 1380,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

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:

curl -X 'POST' \
'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

  {
    "plan_external_id": "PlanExternalId",
    "settings": {
      "ui": {
        "size": "large",
        "theme": "string",
        "version": "desktop",
        "desktop": {
          "header": {
            "is_visible": true,
            "visible_logo": true,
            "visible_name": true,
            "type": "compact",
            "close_button": true
          }
        },
        "mobile": {
          "mode": "saved_accounts",
          "footer": {
            "is_visible": true
          },
          "header": {
            "close_button": true
          }
        },
        "mode": "user_account"
        }
      },
      "currency": "string",
      "locale": "string",
      "external_id": "string",
      "payment_method": 1,
      "return_url": "string",
      "redirect_policy": {
        "redirect_conditions": "none",
        "delay": 0,
        "status_for_manual_redirection": "none",
        "redirect_button_caption": "string"
      }
    }

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

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

<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.

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.