Como abrir a interface de pagamento
Antes de assinar um contrato com a Xsolla, teste do seu processo de pagamento só está disponível no modo sandbox. Em caso de erros, consulte suas descrições.
Para abrir a interface de pagamento no modo sandbox, use o seguinte URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, onde ACCESS_TOKEN é o token obtido na etapa anterior.
Nova janela
Para abrir a interface de pagamento em uma nova janela, use o seguinte URL: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, onde TOKEN é o token obtido.
https://secure.xsolla.com/paystation4/?token=TOKEN.- Com a Pay Station Embed. Limitação: podem haver problemas ao abrir no navegador do jogo (WebView).
- No iframe. Limitação: podem haver problemas ao abrir no navegador do jogo (WebView) e na versão móvel do seu aplicativo.
Pay Station Embed
- html
<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. |
https://secure.xsolla.com/paystation4/?token=TOKEN.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.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.Iframe
Para abrir a interface de pagamento em um iframe:
- Implemente o mecanismo
postMessagepara receber eventos da interface de pagamento. - Abra a interface de pagamento seguindo o link
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, ondeTOKENé 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:
- html
<iframe
src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
width="800"
height="700"
allow="clipboard-read; clipboard-write; payment"
></iframe>
Continuar lendo
Última atualização: 22 de Janeiro de 2024Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
