Checkout cripto no site versus redirecionamento: conversão e trade-offs
Checkout cripto incorporado versus redirecionamento: como cada modelo afeta conversão, controle e esforço. O widget Qvard já está ao vivo. Compare as abordagens e escolha a certa.
O checkout cripto incorporado mantém o pagamento dentro da sua página, enquanto o redirecionamento envia o cliente para uma página hospedada. Cada modelo tem trade-offs em conversão, controle e esforço. O widget Qvard já está disponível, então este guia compara as duas abordagens e mostra como escolher.
O que é um checkout incorporado
Um checkout incorporado é uma janela de pagamento que se abre diretamente na sua página através de um widget JavaScript. Pode ser uma janela modal (sobre o conteúdo) ou um formulário incorporado. O cliente permanece no contexto do seu site e paga sem sair. A lógica do pagamento é a mesma de uma página hospedada; apenas a apresentação muda.
Como funciona na Qvard
O widget carrega de https://qvard.com/checkout.js e abre uma janela de pagamento como modal (pop-up) ou incorporada em um elemento. A janela é a mesma página de pagamento Qvard: o cliente escolhe o ativo e a rede, e o valor é fixo pelo seu pedido. Uma instância do widget recebe sua chave pública (qvard_pk_...) para criar o pagamento no navegador, ou o id do pagamento para criar no servidor. Experimente ao vivo em https://qvard.com/en/embedded-checkout/playground/.
Duas formas de criar o pagamento
No navegador: passe a chave pública (qvard_pk_...) e o valor ao widget; ele cria o pagamento e abre a janela. No servidor: seu backend cria o pagamento via POST /api/v1/payment e passa o id do pagamento ao widget. Para pedidos com preço fixo ou limites de inventário, use a criação no servidor para que o preço não possa mudar no navegador. Ou pule o widget e redirecione o cliente para a página de pagamento hospedada.
<script src="https://qvard.com/checkout.js"></script>
new QvardCheckout({
mode: 'modal',
publishableKey: 'qvard_pk_…',
price: 10,
onSuccess: function (e) {
console.log('paid', e.paymentId);
}
}).open();No servidor: crie o pagamento primeiro
Seu servidor envia o id do pedido e o preço em USD com o cabeçalho x-api-key. A resposta retorna o id do pagamento e o redirectUrl. Passe o id ao widget no navegador, ou use o redirectUrl para um redirecionamento hospedado. Mantenha a chave no servidor, porque a solicitação não pode ser feita do navegador.
x-api-key: qvard_sk_…
{
"id": "order_1024",
"price": 149.99,
"paymentSystemId": 12
}
// 201 Created
{
"data": {
"id": "8f3k2a1c",
"redirectUrl": "https://my.qvard.com/pay/8f3k2a1c"
},
"code": 201,
"message": "success",
"status": true
}Verifique o pagamento pelo webhook
Quando o status é paid, seu webhook recebe o id e o status, assinados com o cabeçalho X-Qvard-Signature (HMAC-SHA256). Verifique a assinatura com sua chave secreta (qvard_sk_...) e confirme que o valor corresponde ao seu pedido. Marque o pedido como pago apenas após verificar a assinatura.
Quando usar a janela incorporada
Use a janela modal incorporada para manter o cliente na sua página. A página hospedada com redirecionamento funciona igualmente bem e é uma opção se você preferir não incorporar a janela de pagamento. Ambas as abordagens usam o mesmo fluxo de criação de pagamento e webhook.
FAQ
O checkout cripto incorporado está disponível na Qvard hoje?
Sim. Carregue o widget de https://qvard.com/checkout.js e passe sua chave pública (qvard_pk_...) para criar no navegador, ou crie o pagamento no servidor e passe o id.
Como adiciono o widget ao meu site?
Inclua a tag <script src="https://qvard.com/checkout.js"></script> e instancie QvardCheckout com sua chave, valor e modo (modal ou inline). Veja os exemplos de código neste artigo e a demonstração.
A assinatura do pagamento importa?
Sim. Sempre verifique o cabeçalho X-Qvard-Signature no seu webhook com sua chave secreta, e confirme que o valor no webhook corresponda ao seu pedido.
Posso usar o redirecionamento em vez da janela incorporada?
Sim. A página de pagamento hospedada em redirectUrl funciona igualmente bem e não requer widget. Ambas as abordagens usam a mesma API e webhook.
