Demo interactiva

Acepta un pago en vivo con @rutiva/widget

Esta página monta el widget oficial publicado en npm. Llena el formulario, crea un payment_intent y observa eventos en tiempo real. Todo dentro de un Shadow DOM aislado.

npm i @rutiva/widget~6 KB gzippedZero dependenciasVer docs de integración →

Esto es una demo con credenciales de prueba.

Configura VITE_RUTIVA_PUBLISHABLE_KEY y VITE_RUTIVA_API_BASE_URL en tu .env para apuntar a tu ambiente real. El OTP de prueba que devuelve el sandbox es 123456.

1. Crea el pago

Simulamos el POST /v1/payments de tu backend. En producción tu servidor llama a la API con sk_.

Eventos del widget

Sin iniciar

Aún sin eventos. Envía el formulario para empezar.

2. Widget montado

UI dentro de Shadow DOM. Cero CSS leak al host.

El widget aparecerá aquí tras crear el pago.

widget.mount("#rutiva-pago")

¿Cómo se ve esto en tu código?

import { Rutiva } from "@rutiva/widget";

const rutiva = Rutiva({ publishableKey: "pk_test_..." });
const widget = rutiva.elements({ clientSecret });

widget.on("success", (intent) => navigate("/gracias"));
widget.mount("#rutiva-pago");