Checkout cripto en el sitio frente a redirección: conversión y compromisos
Checkout cripto integrado frente a redirección: cómo cada modelo afecta a la conversión, control y esfuerzo. El widget de Qvard ya está en vivo. Compara los enfoques y elige el correcto.
El checkout cripto integrado mantiene el pago dentro de tu página, mientras que la redirección envía al cliente a una página alojada. Cada modelo tiene compromisos en conversión, control y esfuerzo. El widget de Qvard ya está disponible, así que esta guía compara ambos enfoques y muestra cómo elegir.
Qué es un checkout integrado
Un checkout integrado es una ventana de pago que se abre directamente en tu página a través de un widget JavaScript. Puede ser una ventana modal (encima del contenido) o un formulario integrado. El cliente se queda en el contexto de tu sitio y paga sin irse. La lógica del pago es la misma que en una página alojada; solo cambia la presentación.
Cómo funciona en Qvard
El widget se carga desde https://qvard.com/checkout.js y abre una ventana de pago como modal (emergente) o integrada en un elemento. La ventana es la misma página de pago de Qvard: el cliente elige el activo y la red, y el importe está fijo por tu pedido. Una instancia del widget recibe tu clave pública (qvard_pk_...) para crear el pago en el navegador, o el id del pago para crearlo en el servidor. Pruébalo en vivo en https://qvard.com/en/embedded-checkout/playground/.
Dos formas de crear el pago
En el navegador: pasa la clave pública (qvard_pk_...) y el importe al widget; él crea el pago y abre la ventana. En el servidor: tu backend crea el pago vía POST /api/v1/payment y pasa el id del pago al widget. Para pedidos con precio fijo o límites de inventario, usa la creación en servidor para que el precio no pueda cambiar en el navegador. O salta el widget y redirige al cliente a la página de pago alojada.
<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();En el servidor: crea el pago primero
Tu servidor envía el id del pedido y el precio en USD con la cabecera x-api-key. La respuesta devuelve el id del pago y el redirectUrl. Pasa el id al widget en el navegador, o usa el redirectUrl para un redireccionamiento alojado. Mantén la clave en el servidor, porque la solicitud no puede hacerse desde el 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
}Verifica el pago desde el webhook
Cuando el estado es paid, tu webhook recibe el id y el estado, firmado con la cabecera X-Qvard-Signature (HMAC-SHA256). Verifica la firma con tu clave secreta (qvard_sk_...) y comprueba que el importe coincida con tu pedido. Marca el pedido como pagado solo después de verificar la firma.
Cuándo usar la ventana integrada
Usa la ventana modal integrada para mantener al cliente en tu página. La página alojada con redireccionamiento funciona igual de bien y es una opción si prefieres no integrar la ventana de pago. Ambos enfoques usan el mismo flujo de creación de pago y webhook.
FAQ
¿Está disponible el checkout cripto integrado en Qvard hoy?
Sí. Carga el widget desde https://qvard.com/checkout.js y pasa tu clave pública (qvard_pk_...) para crear en el navegador, o crea el pago en el servidor y pasa el id.
¿Cómo agrego el widget a mi sitio?
Incluye la etiqueta <script src="https://qvard.com/checkout.js"></script> e instancia QvardCheckout con tu clave, importe y modo (modal o inline). Mira los ejemplos de código en este artículo y la demostración.
¿Importa la firma del pago?
Sí. Siempre verifica la cabecera X-Qvard-Signature en tu webhook con tu clave secreta, y comprueba que el importe en el webhook coincida con tu pedido.
¿Puedo usar el redireccionamiento en lugar de la ventana integrada?
Sí. La página de pago alojada en el redirectUrl funciona igual de bien y no requiere widget. Ambos enfoques usan la misma API y webhook.
