Widget de pago

El Widget embebe el checkout de Chytapay directamente en tu sitio: tu comprador paga por transferencia sin salir de tu página. Lo integrás con unas pocas líneas de JavaScript.

• El SDK corre en el navegador y se autentica con tu clave pública (pk).
• El pago lo creás en tu servidor con la API de integración; el Widget solo lo muestra.
• La UI del checkout vive en un iframe de Chytapay: no manejás datos sensibles.

Cómo funciona

El Widget se apoya en un par de claves a nivel de tu integración (mismo modelo que Stripe o Mercado Pago): una mitad pública para el navegador y una mitad secreta para tu servidor.

Qué ve el pagador

El checkout se maneja solo: pasás el paymentId y no volvés a intervenir hasta el callback. Estas son las pantallas que ve tu comprador.

1. Ingresa su documento. CUIL, CUIT o DNI. El pago se concilia por ese documento, no por el CVU.
2. Recibe la cuenta. El CVU al que transferir, con botón para copiar y una cuenta regresiva hasta el vencimiento del cobro.
3. Ve a nombre de quién. En esa misma pantalla le mostramos el nombre que ARCA tiene registrado para su documento, porque la transferencia tiene que salir de una cuenta a ese nombre.
4. Transfiere. Desde su propia cuenta. Si sale de otra, puede no acreditarse.
5. Ve el resultado. Si entró todo, se dispara onSuccess. Si entró de menos, ve cuánto falta y el mismo CVU para completar.

Paso 1: Obtener tus claves

Generás el par pk/sk desde el Portal de integración, en My Integration → Credenciales → Claves del Widget.

1. Entrá al Portal y abrí la sección Credenciales.
2. Generá las claves del Widget. La pk queda visible siempre; la sk se muestra una única vez.
3. Guardá la sk en un lugar seguro (un secret manager, variables de entorno). Si la perdés, rotála desde el mismo lugar.

Paso 2: Crear el pago en tu servidor

El Widget no crea pagos: muestra uno que ya existe. Desde tu servidor creás el cobro con type: "checkout" y te quedás con el paymentRequestId. Ese id es lo único que le pasás al Widget.

Para crear el cobro, seguí la guía de Crear cobros. El paymentId del Widget es el id del payment request que te devuelve la API.

Paso 3: Instalar el SDK

Sumás el SDK de dos maneras: por CDN con una etiqueta script, o instalándolo desde npm si usás un bundler.

<script src="https://unpkg.com/@chytapay/integration-widget@1"></script>

npm i @chytapay/integration-widget

import { ChytaPay } from '@chytapay/integration-widget';

Paso 4: Mostrar el checkout

Inicializás el SDK con tu pk una sola vez, y después abrís el checkout pasándole el paymentId. El SDK monta el iframe, maneja el flujo de pago y te devuelve un handle para cerrarlo desde tu código.

// 1. Inicializá el SDK una vez, con tu clave pública.
// Las URLs por defecto ya son las de producción.
ChytaPay.init({ pk: 'pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' });

// 2. Abrí el checkout para un pago creado en tu servidor.
const handle = ChytaPay.checkout({
  paymentId: 'PAYMENT_ID_DE_TU_SERVIDOR',
  onSuccess: (paymentId) => {
    // El pago se acreditó: confirmá la compra en tu UI.
    showConfirmation(paymentId);
  },
  onError: (error) => {
    // Falló o venció: mostrale el error a tu comprador.
    showError(error);
  },
  onCancel: () => {
    // El comprador cerró el checkout sin pagar.
  },
});

// 3. Opcional: cerralo desde tu código si navegás a otra pantalla.
handle.close();

Cómo probarlo

El checkout se prueba contra la API de test, con cobros que no mueven plata real. Como el iframe es una vista pura y el SDK es el único que habla con la API, alcanza con apuntar apiBaseUrl a test y dejar iframeUrl en su valor por defecto.

ChytaPay.init({
  pk: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  apiBaseUrl: 'https://integration-api.test.chytapay.com.ar',
});

Los cobros de prueba los creás con el token de test que genera el Portal. Está en la guía de Usar el Portal, en la sección de testing.

Cuando algo falla

El checkout le muestra al pagador el mensaje que corresponde y decide solo si lo deja reintentar.

Referencia rápida