Quick start

API v0.1.0

En esta página

Integración del widget en 5 minutos. Necesitas un pk_test_ (publishable key) en el frontend y un sk_test_ en tu backend para generar el client_secret.

Instalación

Vía CDN (más rápido):

bash

<script src="https://cdn.jsdelivr.net/npm/@rutiva/widget@0.1/dist/rutiva.iife.js"></script>

Vía npm / pnpm / yarn:

bash

npm install @rutiva/widget
# o
pnpm add @rutiva/widget
# o
yarn add @rutiva/widget

HTML vanilla

bash

<!doctype html>
<html>
  <body>
    <div id="rutiva-pago"></div>

    <script src="https://cdn.jsdelivr.net/npm/@rutiva/widget@0.1/dist/rutiva.iife.js"></script>
    <script>
      const rutiva = Rutiva.Rutiva({ publishableKey: "pk_test_xxx" });

      const widget = rutiva.elements({
        clientSecret: "pi_abc_secret_xxx",   // viene de tu backend
        appearance: { theme: "auto", primaryColor: "#1A56DB" },
      });

      widget.mount("#rutiva-pago");

      widget.on("success", (intent) => {
        window.location = "/gracias?ref=" + intent.bank_reference;
      });
      widget.on("error", (err) => console.error(err));
    </script>
  </body>
</html>

React / TypeScript

typescript

import { Rutiva } from "@rutiva/widget";
import { useEffect, useRef } from "react";

export function Checkout({ clientSecret }: { clientSecret: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const rutiva = Rutiva({ publishableKey: import.meta.env.VITE_RUTIVA_PUBLISHABLE_KEY });
    const widget = rutiva.elements({ clientSecret });

    widget.on("success", (intent) => {
      window.location.href = "/gracias?ref=" + intent.bank_reference;
    });
    widget.mount(ref.current);

    return () => widget.destroy();
  }, [clientSecret]);

  return <div ref={ref} />;
}

Backend (crear client_secret)

Paso server-side. Una vez por intento de pago. Detalle completo en Crear pago.

javascript

const resp = await fetch("https://rutiva-api.onrender.com/v1/payments", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.RUTIVA_SECRET_KEY}`,
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID(),
  },
  body: JSON.stringify({
    amount: 50000,             // céntimos: Bs. 500,00
    currency: "VES",
    customer_phone: "04141234567",
    customer_id_document: "V12345678",
    customer_bank_code: "0114",
  }),
});
const { id, client_secret } = await resp.json();
// Enviar SOLO { id, client_secret } al navegador. Nunca sk_.