Incruste el pago en su sitio web

De factura a pago#

Crea una factura en /account#links y recibe inmediatamente checkoutUrl. Abre /account#widget, pega el enlace y elige un modal, bloque en línea o redirección. Las claves y los webhooks están disponibles en las secciones de cuenta adyacentes.

La vista previa del constructor siempre usa un pedido de demostración sin cobrar. El código del widget generado conserva tu enlace de producción, cuyos términos provienen de la factura guardada en el servidor.

Para una factura nueva en la interfaz, USD ofrece tarjetas y Alipay; RUB ofrece SBP; USDT ofrece criptomonedas. La API también puede guardar USD + criptomonedas por compatibilidad, pero su pago cripto en vivo está bloqueado con crypto_requires_usdt. USD y USDT son distintos, sin conversión automática ni supuesta tasa 1:1. Un pago cripto requiere una factura USDT separada.

Un botón con respaldo de enlace normal#

Este ejemplo abre una demostración sin cobrar dinero. Reemplaza ambos valores de URL con checkoutUrl de tu respuesta de factura. Carga el script desde el mismo origen Kevmi que la URL de pago.

El href abre el pago cuando JavaScript no está disponible. data-kevmi-label le da al iframe un nombre accesible. Incluye el script una vez por página.

<script src="https://kevmi.maxeevmax1.chatgpt.site/widgets/kevmi.js" defer></script>
<a href="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
   data-kevmi-checkout="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
   data-kevmi-mode="modal"
   data-kevmi-label="Order checkout">Pay securely</a>

Tres formas de abrir el pago#

Usa un contenedor como div para el modo en línea y reemplaza CHECKOUT_URL_FROM_API con una URL real. El marco se adapta al ancho de su contenedor; los mensajes de pago pueden ajustar su altura dentro de un rango limitado.

El modal se cierra con su botón, Escape o un clic en el fondo. El enfoque regresa al disparador original después de cerrar. La configuración de movimiento reducido acorta la transición.

<div data-kevmi-checkout="CHECKOUT_URL_FROM_API"
     data-kevmi-mode="inline"
     data-kevmi-label="Order checkout"></div>

Abre el pago desde tu interfaz#

Los eventos de documento kevmi:opened y kevmi:closed permiten que tu interfaz reaccione al abrir y cerrar. Un evento kevmi:error en el disparador informa una URL de pago no válida. Ninguno prueba el pago. Llama a la API de JavaScript después de que el script del widget se haya cargado.

window.Kevmi.open(checkoutUrl, {
  mode: 'modal',
  label: 'Order checkout',
  closeLabel: 'Close checkout'
});

// Inline blocks added after page load are detected automatically.
// You may also request mounting explicitly:
window.Kevmi.mount(document);

Qué prueba un pago exitoso#

No pongas claves de API ni secretos de firma en HTML. El widget recibe solo un enlace público a una factura. El pago cifra los datos de la tarjeta y los códigos bancarios con la clave de la pasarela; el servidor de Kevmi no los acepta en texto plano.

postMessage actualiza el estado de la interfaz, no el cumplimiento del pedido. Verifica el origen del mensaje y la ventana de origen antes de procesarlo. Usa un evento verificado payment.succeeded o un estado de éxito en el resumen GET link.payment del servidor para el resultado final.

Antes de añadir el widget a producción#

• Permite el origen de Kevmi en las directivas script-src y frame-src de tu Política de Seguridad de Contenido sin ampliar políticas no relacionadas.
• Verifica pantallas estrechas, acceso con teclado y temas claros y oscuros.
• Confirma que la factura esté activa, sin vencer y con el precio y las participaciones de costo correctos.
• Mantén un enlace de pago normal como respaldo.
• Prueba entregas fallidas y eventos de webhook duplicados sin emitir un pedido dos veces.