@npmtapi/embed 1.0.0 → 1.1.0

package/README.md

@@ -44,8 +44,12 @@ Los tipos están incluidos — no necesitas `@types/tapipay`.
     identifier: "CLI-001"
   });
 
-  tapipay.on("paymentPending", function(data) {
-    console.log("Pago en proceso:", data);
+  tapipay.on("paymentWindowOpened", function() {
+    console.log("Ventana de pago abierta");
+  });
+
+  tapipay.on("paymentSubmitted", function(data) {
+    console.log("Pago enviado:", data);
   });
 </script>
 ```
@@ -74,7 +78,8 @@ export function PagoPage({ clienteId }: { clienteId: string }) {
     <TapipayWidget
       organization="acme"
       identifier={clienteId}
-      onPending={(data) => console.log("Pago en proceso:", data)}
+      onPaymentWindowOpened={() => console.log("Ventana de pago abierta")}
+      onPaymentSubmitted={(data) => console.log("Pago enviado:", data)}
       onCancelled={() => console.log("Pago cancelado por el usuario")}
     />
   );
@@ -83,17 +88,18 @@ export function PagoPage({ clienteId }: { clienteId: string }) {
 
 ### Props
 
-| Prop | Tipo | Requerido | Descripción |
-|------|------|-----------|-------------|
-| `organization` | `string` | Sí | Alias de la organización en TapiPay |
-| `identifier` | `string` | Sí | Identificador del cliente |
-| `externalRequestId` | `string` | No | ID de deuda a preseleccionar |
-| `selectionStrategy` | `"oldestCreated"` | No | Selecciona automáticamente la deuda pendiente más antigua |
-| `environment` | `'production' \| 'homo'` | No | Entorno del SDK. Por defecto `'production'` |
-| `onPending` | `(data) => void` | No | Callback cuando Yuno redirige al callback (pago en proceso) |
-| `onCancelled` | `() => void` | No | Callback cuando el usuario cierra el popup sin completar el pago |
-| `className` | `string` | No | Clases CSS del contenedor |
-| `style` | `CSSProperties` | No | Estilos inline del contenedor |
+| Prop | Tipo | Requerido | Por defecto | Descripción |
+|------|------|-----------|-------------|-------------|
+| `organization` | `string` | Sí | — | Alias de la organización en TapiPay |
+| `identifier` | `string` | Sí | — | Identificador del cliente |
+| `externalRequestId` | `string` | No | — | ID de deuda a preseleccionar. Tiene precedencia sobre `selectionStrategy` |
+| `selectionStrategy` | `"oldestCreated"` | No | más reciente | Estrategia de selección automática de deuda pendiente. `"oldestCreated"`: la más antigua. Por defecto (omitido): la más reciente |
+| `environment` | `'production' \| 'homo'` | No | `'production'` | Entorno del SDK |
+| `onPaymentWindowOpened` | `() => void` | No | — | Callback cuando el popup de Yuno se abre exitosamente |
+| `onPaymentSubmitted` | `(data) => void` | No | — | Callback cuando el usuario completó el formulario de Yuno y fue redirigido al callback |
+| `onCancelled` | `() => void` | No | — | Callback cuando el usuario cierra el popup sin completar el pago |
+| `className` | `string` | No | — | Clases CSS del contenedor |
+| `style` | `CSSProperties` | No | — | Estilos inline del contenedor |
 
 ### Next.js App Router
 
@@ -110,7 +116,7 @@ export default function PagarPage() {
     <TapipayWidget
       organization={process.env.NEXT_PUBLIC_TAPIPAY_ORGANIZATION!}
       identifier="CLI-001"
-      onPending={() => router.push("/procesando")}
+      onPaymentSubmitted={() => router.push("/procesando")}
     />
   );
 }
@@ -140,7 +146,7 @@ onMounted(async () => {
     organization: props.organization,
     identifier: props.identifier,
   });
-  tapipay.on("paymentPending", (data) => console.log("Pago en proceso:", data));
+  tapipay.on("paymentSubmitted", (data) => console.log("Pago enviado:", data));
 });
 
 onUnmounted(() => tapipay?.destroy(widgetRef.value));
@@ -187,28 +193,34 @@ export class TapipayWidgetComponent implements OnInit, OnDestroy {
 
 ### `loadTapipay(options?)`
 
-| Parámetro | Tipo | Requerido | Descripción |
-|-----------|------|-----------|-------------|
-| `environment` | `'production' \| 'homo'` | No | Entorno del SDK a cargar. Por defecto `'production'`. |
+| Parámetro | Tipo | Requerido | Por defecto | Descripción |
+|-----------|------|-----------|-------------|-------------|
+| `environment` | `'production' \| 'homo'` | No | `'production'` | Entorno del SDK a cargar |
 
 ### `initialize(options)`
 
-| Parámetro | Tipo | Requerido | Descripción |
-|-----------|------|-----------|-------------|
-| `container` | `string \| HTMLElement` | Sí | Selector CSS o referencia DOM. Solo para `initialize()`. |
-| `organization` | `string` | Sí | Alias de la organización en TapiPay. |
-| `identifier` | `string` | Sí | Identificador del cliente (DNI, número de cuenta, etc.). |
-| `externalRequestId` | `string` | No | ID externo de una deuda específica a preseleccionar. |
-| `selectionStrategy` | `"oldestCreated"` | No | Selección automática: `"oldestCreated"` elige la deuda pendiente más antigua. |
+| Parámetro | Tipo | Requerido | Por defecto | Descripción |
+|-----------|------|-----------|-------------|-------------|
+| `container` | `string \| HTMLElement` | Sí | — | Selector CSS o referencia DOM |
+| `organization` | `string` | Sí | — | Alias de la organización en TapiPay |
+| `identifier` | `string` | Sí | — | Identificador del cliente (DNI, número de cuenta, etc.) |
+| `externalRequestId` | `string` | No | — | ID externo de una deuda específica a preseleccionar. Tiene precedencia sobre `selectionStrategy` |
+| `selectionStrategy` | `"oldestCreated"` | No | más reciente | Estrategia de selección automática de deuda pendiente. `"oldestCreated"`: la más antigua. Por defecto (omitido): la más reciente |
 
 ---
 
 ## Eventos
 
 ```js
-// Yuno redirigió al callback (pago en proceso)
-tapipay.on("paymentPending", function(data) {
-  console.log("Pago en proceso:", data);
+// El popup de Yuno se abrió exitosamente (útil para mostrar un overlay mientras el usuario paga)
+tapipay.on("paymentWindowOpened", function() {
+  console.log("Ventana de pago abierta");
+  // Mostrar overlay/spinner mientras el usuario completa el formulario
+});
+
+// El usuario completó el formulario de Yuno y fue redirigido al callback
+tapipay.on("paymentSubmitted", function(data) {
+  console.log("Pago enviado:", data);
   // Mostrar pantalla de "procesando" y esperar webhook
 });
 
@@ -218,13 +230,21 @@ tapipay.on("paymentCancelled", function() {
 });
 
 // Remover un listener
-tapipay.off("paymentPending", handler);
+tapipay.off("paymentSubmitted", handler);
+```
+
+### `TapipayPaymentWindowOpenedEvent`
+
+```ts
+interface TapipayPaymentWindowOpenedEvent {
+  type: "paymentWindowOpened";
+}
 ```
 
-### `TapipayPaymentPendingEvent`
+### `TapipayPaymentSubmittedEvent`
 
 ```ts
-interface TapipayPaymentPendingEvent {
+interface TapipayPaymentSubmittedEvent {
   type: string;         // "TAPIPAY_CALLBACK"
   status: "pending";
   data: Record<string, string>; // Parámetros que Yuno haya enviado (pueden estar vacíos)

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/loader.ts"],"sourcesContent":["export { loadTapipay } from \"./loader\";\nexport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentPendingEvent,\n} from \"./types\";\n","import type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n} from \"./types\";\n\nconst SDK_URLS: Record<TapipayEnvironment, string> = {\n\tproduction: \"https://app.tapipay.la/embed.js\",\n\thomo: \"https://homo.tapipay.la/embed.js\",\n};\n\n// Idempotencia por entorno\nconst loadPromises = new Map<TapipayEnvironment, Promise<TapipayInstance>>();\n\n/**\n * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.\n *\n * - Idempotente por entorno: múltiples llamadas con el mismo `environment` retornan la misma Promise.\n * - Si window.tapipay ya existe (script cargado sync), resuelve inmediatamente.\n * - Compatible con React Strict Mode (doble mount/unmount).\n *\n * @example\n * // Producción (default)\n * const tapipay = await loadTapipay();\n *\n * // Homologación\n * const tapipay = await loadTapipay({ environment: 'homo' });\n *\n * tapipay.initialize({ container: \"#widget\", organization: \"acme\", identifier: \"CLI-001\" });\n */\nexport function loadTapipay(\n\toptions?: LoadTapipayOptions,\n): Promise<TapipayInstance> {\n\tconst env: TapipayEnvironment = options?.environment ?? \"production\";\n\tconst SDK_URL = SDK_URLS[env];\n\tconst SCRIPT_ID = `tapipay-embed-sdk-${env}`;\n\n\t// SSR guard\n\tif (typeof window === \"undefined\") {\n\t\treturn Promise.reject(\n\t\t\tnew Error(\"[TapiPay] loadTapipay() requires a browser environment.\"),\n\t\t);\n\t}\n\n\t// Ya cargado de forma síncrona (script tag directo)\n\tif (window.tapipay && !window.tapipay._q) {\n\t\treturn Promise.resolve(window.tapipay);\n\t}\n\n\t// Reutilizar promise existente (idempotencia por entorno)\n\tconst existing = loadPromises.get(env);\n\tif (existing) return existing;\n\n\tconst promise = new Promise<TapipayInstance>((resolve, reject) => {\n\t\t// Si ya hay un script inyectado, esperar a que cargue\n\t\tconst existingScript = document.getElementById(\n\t\t\tSCRIPT_ID,\n\t\t) as HTMLScriptElement | null;\n\n\t\tconst onLoad = () => {\n\t\t\tif (window.tapipay) {\n\t\t\t\tresolve(window.tapipay);\n\t\t\t} else {\n\t\t\t\treject(\n\t\t\t\t\tnew Error(\n\t\t\t\t\t\t\"[TapiPay] El script cargó pero window.tapipay no está definido.\",\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst onError = () => {\n\t\t\tloadPromises.delete(env);\n\t\t\treject(new Error(`[TapiPay] Error al cargar el SDK desde ${SDK_URL}`));\n\t\t};\n\n\t\tif (existingScript) {\n\t\t\texistingScript.addEventListener(\"load\", onLoad);\n\t\t\texistingScript.addEventListener(\"error\", onError);\n\t\t\treturn;\n\t\t}\n\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.id = SCRIPT_ID;\n\t\tscript.src = SDK_URL;\n\t\tscript.async = true;\n\t\tscript.addEventListener(\"load\", onLoad);\n\t\tscript.addEventListener(\"error\", onError);\n\t\tdocument.head.appendChild(script);\n\t});\n\n\tloadPromises.set(env, promise);\n\treturn promise;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,IAAM,WAA+C;AAAA,EACpD,YAAY;AAAA,EACZ,MAAM;AACP;AAGA,IAAM,eAAe,oBAAI,IAAkD;AAkBpE,SAAS,YACf,SAC2B;AAhC5B;AAiCC,QAAM,OAA0B,wCAAS,gBAAT,YAAwB;AACxD,QAAM,UAAU,SAAS,GAAG;AAC5B,QAAM,YAAY,qBAAqB,GAAG;AAG1C,MAAI,OAAO,WAAW,aAAa;AAClC,WAAO,QAAQ;AAAA,MACd,IAAI,MAAM,yDAAyD;AAAA,IACpE;AAAA,EACD;AAGA,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,IAAI;AACzC,WAAO,QAAQ,QAAQ,OAAO,OAAO;AAAA,EACtC;AAGA,QAAM,WAAW,aAAa,IAAI,GAAG;AACrC,MAAI,SAAU,QAAO;AAErB,QAAM,UAAU,IAAI,QAAyB,CAAC,SAAS,WAAW;AAEjE,UAAM,iBAAiB,SAAS;AAAA,MAC/B;AAAA,IACD;AAEA,UAAM,SAAS,MAAM;AACpB,UAAI,OAAO,SAAS;AACnB,gBAAQ,OAAO,OAAO;AAAA,MACvB,OAAO;AACN;AAAA,UACC,IAAI;AAAA,YACH;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,UAAM,UAAU,MAAM;AACrB,mBAAa,OAAO,GAAG;AACvB,aAAO,IAAI,MAAM,0CAA0C,OAAO,EAAE,CAAC;AAAA,IACtE;AAEA,QAAI,gBAAgB;AACnB,qBAAe,iBAAiB,QAAQ,MAAM;AAC9C,qBAAe,iBAAiB,SAAS,OAAO;AAChD;AAAA,IACD;AAEA,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,KAAK;AACZ,WAAO,MAAM;AACb,WAAO,QAAQ;AACf,WAAO,iBAAiB,QAAQ,MAAM;AACtC,WAAO,iBAAiB,SAAS,OAAO;AACxC,aAAS,KAAK,YAAY,MAAM;AAAA,EACjC,CAAC;AAED,eAAa,IAAI,KAAK,OAAO;AAC7B,SAAO;AACR;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/loader.ts"],"sourcesContent":["export { loadTapipay } from \"./loader\";\nexport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentSubmittedEvent,\n\tTapipayPaymentWindowOpenedEvent,\n} from \"./types\";\n","import type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n} from \"./types\";\n\nconst SDK_URLS: Record<TapipayEnvironment, string> = {\n\tproduction: \"https://app.tapipay.la/embed.js\",\n\thomo: \"https://homo.tapipay.la/embed.js\",\n};\n\n// Idempotencia por entorno\nconst loadPromises = new Map<TapipayEnvironment, Promise<TapipayInstance>>();\n\n/**\n * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.\n *\n * - Idempotente por entorno: múltiples llamadas con el mismo `environment` retornan la misma Promise.\n * - Si window.tapipay ya existe (script cargado sync), resuelve inmediatamente.\n * - Compatible con React Strict Mode (doble mount/unmount).\n *\n * @example\n * // Producción (default)\n * const tapipay = await loadTapipay();\n *\n * // Homologación\n * const tapipay = await loadTapipay({ environment: 'homo' });\n *\n * tapipay.initialize({ container: \"#widget\", organization: \"acme\", identifier: \"CLI-001\" });\n */\nexport function loadTapipay(\n\toptions?: LoadTapipayOptions,\n): Promise<TapipayInstance> {\n\tconst env: TapipayEnvironment = options?.environment ?? \"production\";\n\tconst SDK_URL = SDK_URLS[env];\n\tconst SCRIPT_ID = `tapipay-embed-sdk-${env}`;\n\n\t// SSR guard\n\tif (typeof window === \"undefined\") {\n\t\treturn Promise.reject(\n\t\t\tnew Error(\"[TapiPay] loadTapipay() requires a browser environment.\"),\n\t\t);\n\t}\n\n\t// Ya cargado de forma síncrona (script tag directo)\n\tif (window.tapipay && !window.tapipay._q) {\n\t\treturn Promise.resolve(window.tapipay);\n\t}\n\n\t// Reutilizar promise existente (idempotencia por entorno)\n\tconst existing = loadPromises.get(env);\n\tif (existing) return existing;\n\n\tconst promise = new Promise<TapipayInstance>((resolve, reject) => {\n\t\t// Si ya hay un script inyectado, esperar a que cargue\n\t\tconst existingScript = document.getElementById(\n\t\t\tSCRIPT_ID,\n\t\t) as HTMLScriptElement | null;\n\n\t\tconst onLoad = () => {\n\t\t\tif (window.tapipay) {\n\t\t\t\tresolve(window.tapipay);\n\t\t\t} else {\n\t\t\t\treject(\n\t\t\t\t\tnew Error(\n\t\t\t\t\t\t\"[TapiPay] El script cargó pero window.tapipay no está definido.\",\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst onError = () => {\n\t\t\tloadPromises.delete(env);\n\t\t\treject(new Error(`[TapiPay] Error al cargar el SDK desde ${SDK_URL}`));\n\t\t};\n\n\t\tif (existingScript) {\n\t\t\texistingScript.addEventListener(\"load\", onLoad);\n\t\t\texistingScript.addEventListener(\"error\", onError);\n\t\t\treturn;\n\t\t}\n\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.id = SCRIPT_ID;\n\t\tscript.src = SDK_URL;\n\t\tscript.async = true;\n\t\tscript.addEventListener(\"load\", onLoad);\n\t\tscript.addEventListener(\"error\", onError);\n\t\tdocument.head.appendChild(script);\n\t});\n\n\tloadPromises.set(env, promise);\n\treturn promise;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,IAAM,WAA+C;AAAA,EACpD,YAAY;AAAA,EACZ,MAAM;AACP;AAGA,IAAM,eAAe,oBAAI,IAAkD;AAkBpE,SAAS,YACf,SAC2B;AAhC5B;AAiCC,QAAM,OAA0B,wCAAS,gBAAT,YAAwB;AACxD,QAAM,UAAU,SAAS,GAAG;AAC5B,QAAM,YAAY,qBAAqB,GAAG;AAG1C,MAAI,OAAO,WAAW,aAAa;AAClC,WAAO,QAAQ;AAAA,MACd,IAAI,MAAM,yDAAyD;AAAA,IACpE;AAAA,EACD;AAGA,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,IAAI;AACzC,WAAO,QAAQ,QAAQ,OAAO,OAAO;AAAA,EACtC;AAGA,QAAM,WAAW,aAAa,IAAI,GAAG;AACrC,MAAI,SAAU,QAAO;AAErB,QAAM,UAAU,IAAI,QAAyB,CAAC,SAAS,WAAW;AAEjE,UAAM,iBAAiB,SAAS;AAAA,MAC/B;AAAA,IACD;AAEA,UAAM,SAAS,MAAM;AACpB,UAAI,OAAO,SAAS;AACnB,gBAAQ,OAAO,OAAO;AAAA,MACvB,OAAO;AACN;AAAA,UACC,IAAI;AAAA,YACH;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,UAAM,UAAU,MAAM;AACrB,mBAAa,OAAO,GAAG;AACvB,aAAO,IAAI,MAAM,0CAA0C,OAAO,EAAE,CAAC;AAAA,IACtE;AAEA,QAAI,gBAAgB;AACnB,qBAAe,iBAAiB,QAAQ,MAAM;AAC9C,qBAAe,iBAAiB,SAAS,OAAO;AAChD;AAAA,IACD;AAEA,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,KAAK;AACZ,WAAO,MAAM;AACb,WAAO,QAAQ;AACf,WAAO,iBAAiB,QAAQ,MAAM;AACtC,WAAO,iBAAiB,SAAS,OAAO;AACxC,aAAS,KAAK,YAAY,MAAM;AAAA,EACjC,CAAC;AAED,eAAa,IAAI,KAAK,OAAO;AAC7B,SAAO;AACR;","names":[]}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DmkYbkBI.cjs';
-export { a as TapipayEnvironment, b as TapipayOptions, c as TapipayPaymentCancelledEvent, d as TapipayPaymentPendingEvent } from './types-DmkYbkBI.cjs';
+import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DYcwsDwH.cjs';
+export { a as TapipayEnvironment, b as TapipayOptions, c as TapipayPaymentCancelledEvent, d as TapipayPaymentSubmittedEvent, e as TapipayPaymentWindowOpenedEvent } from './types-DYcwsDwH.cjs';
 
 /**
  * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DmkYbkBI.js';
-export { a as TapipayEnvironment, b as TapipayOptions, c as TapipayPaymentCancelledEvent, d as TapipayPaymentPendingEvent } from './types-DmkYbkBI.js';
+import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DYcwsDwH.js';
+export { a as TapipayEnvironment, b as TapipayOptions, c as TapipayPaymentCancelledEvent, d as TapipayPaymentSubmittedEvent, e as TapipayPaymentWindowOpenedEvent } from './types-DYcwsDwH.js';
 
 /**
  * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.

package/dist/react.cjs

@@ -108,17 +108,22 @@ function TapipayWidget({
   externalRequestId,
   selectionStrategy,
   environment,
-  onPending,
+  onPaymentWindowOpened,
+  onPaymentSubmitted,
   onCancelled,
   className,
   style
 }) {
   const containerRef = (0, import_react.useRef)(null);
-  const onPendingRef = (0, import_react.useRef)(onPending);
+  const onPaymentWindowOpenedRef = (0, import_react.useRef)(onPaymentWindowOpened);
+  const onPaymentSubmittedRef = (0, import_react.useRef)(onPaymentSubmitted);
   const onCancelledRef = (0, import_react.useRef)(onCancelled);
   (0, import_react.useEffect)(() => {
-    onPendingRef.current = onPending;
-  }, [onPending]);
+    onPaymentWindowOpenedRef.current = onPaymentWindowOpened;
+  }, [onPaymentWindowOpened]);
+  (0, import_react.useEffect)(() => {
+    onPaymentSubmittedRef.current = onPaymentSubmitted;
+  }, [onPaymentSubmitted]);
   (0, import_react.useEffect)(() => {
     onCancelledRef.current = onCancelled;
   }, [onCancelled]);
@@ -127,9 +132,13 @@ function TapipayWidget({
     const container = containerRef.current;
     let tapipayInstance = null;
     let cancelled = false;
-    const handlePending = (data) => {
+    const handlePaymentWindowOpened = (data) => {
+      var _a;
+      (_a = onPaymentWindowOpenedRef.current) == null ? void 0 : _a.call(onPaymentWindowOpenedRef, data);
+    };
+    const handlePaymentSubmitted = (data) => {
       var _a;
-      (_a = onPendingRef.current) == null ? void 0 : _a.call(onPendingRef, data);
+      (_a = onPaymentSubmittedRef.current) == null ? void 0 : _a.call(onPaymentSubmittedRef, data);
     };
     const handleCancelled = (data) => {
       var _a;
@@ -138,7 +147,8 @@ function TapipayWidget({
     loadTapipay({ environment }).then((instance) => {
       if (cancelled) return;
       tapipayInstance = instance;
-      instance.on("paymentPending", handlePending);
+      instance.on("paymentWindowOpened", handlePaymentWindowOpened);
+      instance.on("paymentSubmitted", handlePaymentSubmitted);
       instance.on("paymentCancelled", handleCancelled);
       instance.initialize({
         container,
@@ -151,7 +161,8 @@ function TapipayWidget({
     return () => {
       cancelled = true;
       if (tapipayInstance) {
-        tapipayInstance.off("paymentPending", handlePending);
+        tapipayInstance.off("paymentWindowOpened", handlePaymentWindowOpened);
+        tapipayInstance.off("paymentSubmitted", handlePaymentSubmitted);
         tapipayInstance.off("paymentCancelled", handleCancelled);
         tapipayInstance.destroy(container);
       }

package/dist/react.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.tsx","../src/loader.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { loadTapipay } from \"./loader\";\nimport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentPendingEvent,\n} from \"./types\";\n\n// ─── useTapipay hook ──────────────────────────────────────────────────────────\n\n/**\n * Hook de bajo nivel que carga el SDK y retorna la instancia.\n * Útil cuando necesitas control manual sobre initialize/destroy.\n *\n * @example\n * const { tapipay, error } = useTapipay();\n * const { tapipay, error } = useTapipay({ environment: 'homo' });\n */\nexport function useTapipay(options?: LoadTapipayOptions): {\n\ttapipay: TapipayInstance | null;\n\terror: Error | null;\n} {\n\tconst [tapipay, setTapipay] = useState<TapipayInstance | null>(null);\n\tconst [error, setError] = useState<Error | null>(null);\n\tconst environment = options?.environment;\n\n\tuseEffect(() => {\n\t\tlet cancelled = false;\n\t\tloadTapipay({ environment })\n\t\t\t.then((instance) => {\n\t\t\t\tif (!cancelled) setTapipay(instance);\n\t\t\t})\n\t\t\t.catch((err: Error) => {\n\t\t\t\tif (!cancelled) setError(err);\n\t\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [environment]);\n\n\treturn { tapipay, error };\n}\n\n// ─── TapipayWidget component ──────────────────────────────────────────────────\n\nexport interface TapipayWidgetProps extends Omit<TapipayOptions, \"container\"> {\n\t/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */\n\tenvironment?: TapipayEnvironment;\n\t/** Callback invocado cuando Yuno redirige al callback (pago en proceso). */\n\tonPending?: (data: TapipayPaymentPendingEvent) => void;\n\t/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */\n\tonCancelled?: (data: TapipayPaymentCancelledEvent) => void;\n\t/** Clases CSS adicionales para el contenedor del widget. */\n\tclassName?: string;\n\t/** Estilos inline adicionales para el contenedor del widget. */\n\tstyle?: React.CSSProperties;\n}\n\n/**\n * Componente React que encapsula el widget de pago TapiPay.\n *\n * Maneja internamente la carga del SDK, el ciclo de vida del widget\n * y el cleanup al desmontar. Compatible con React Strict Mode.\n *\n * @example\n * <TapipayWidget\n *   organization=\"acme\"\n *   identifier=\"CLI-001\"\n *   externalRequestId=\"FAC-2024-001\"\n *   onPending={(data) => console.log(\"Pago en proceso\", data)}\n *   onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tenvironment,\n\tonPending,\n\tonCancelled,\n\tclassName,\n\tstyle,\n}: TapipayWidgetProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Refs para evitar re-renders innecesarios y closures estáticos en useEffect\n\tconst onPendingRef = useRef(onPending);\n\tconst onCancelledRef = useRef(onCancelled);\n\n\tuseEffect(() => {\n\t\tonPendingRef.current = onPending;\n\t}, [onPending]);\n\n\tuseEffect(() => {\n\t\tonCancelledRef.current = onCancelled;\n\t}, [onCancelled]);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst container = containerRef.current;\n\n\t\tlet tapipayInstance: TapipayInstance | null = null;\n\t\tlet cancelled = false;\n\n\t\tconst handlePending = (data: TapipayPaymentPendingEvent) => {\n\t\t\tonPendingRef.current?.(data);\n\t\t};\n\t\tconst handleCancelled = (data: TapipayPaymentCancelledEvent) => {\n\t\t\tonCancelledRef.current?.(data);\n\t\t};\n\n\t\tloadTapipay({ environment }).then((instance) => {\n\t\t\tif (cancelled) return;\n\t\t\ttapipayInstance = instance;\n\n\t\t\tinstance.on(\"paymentPending\", handlePending);\n\t\t\tinstance.on(\"paymentCancelled\", handleCancelled);\n\n\t\t\tinstance.initialize({\n\t\t\t\tcontainer,\n\t\t\t\torganization,\n\t\t\t\tidentifier,\n\t\t\t\texternalRequestId,\n\t\t\t\tselectionStrategy,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tif (tapipayInstance) {\n\t\t\t\ttapipayInstance.off(\"paymentPending\", handlePending);\n\t\t\t\ttapipayInstance.off(\"paymentCancelled\", handleCancelled);\n\t\t\t\ttapipayInstance.destroy(container);\n\t\t\t}\n\t\t};\n\t\t// El widget se re-monta si cambian los parámetros de identificación o entorno\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\torganization,\n\t\tidentifier,\n\t\texternalRequestId,\n\t\tselectionStrategy,\n\t\tenvironment,\n\t]);\n\n\treturn <div ref={containerRef} className={className} style={style} />;\n}\n","import type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n} from \"./types\";\n\nconst SDK_URLS: Record<TapipayEnvironment, string> = {\n\tproduction: \"https://app.tapipay.la/embed.js\",\n\thomo: \"https://homo.tapipay.la/embed.js\",\n};\n\n// Idempotencia por entorno\nconst loadPromises = new Map<TapipayEnvironment, Promise<TapipayInstance>>();\n\n/**\n * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.\n *\n * - Idempotente por entorno: múltiples llamadas con el mismo `environment` retornan la misma Promise.\n * - Si window.tapipay ya existe (script cargado sync), resuelve inmediatamente.\n * - Compatible con React Strict Mode (doble mount/unmount).\n *\n * @example\n * // Producción (default)\n * const tapipay = await loadTapipay();\n *\n * // Homologación\n * const tapipay = await loadTapipay({ environment: 'homo' });\n *\n * tapipay.initialize({ container: \"#widget\", organization: \"acme\", identifier: \"CLI-001\" });\n */\nexport function loadTapipay(\n\toptions?: LoadTapipayOptions,\n): Promise<TapipayInstance> {\n\tconst env: TapipayEnvironment = options?.environment ?? \"production\";\n\tconst SDK_URL = SDK_URLS[env];\n\tconst SCRIPT_ID = `tapipay-embed-sdk-${env}`;\n\n\t// SSR guard\n\tif (typeof window === \"undefined\") {\n\t\treturn Promise.reject(\n\t\t\tnew Error(\"[TapiPay] loadTapipay() requires a browser environment.\"),\n\t\t);\n\t}\n\n\t// Ya cargado de forma síncrona (script tag directo)\n\tif (window.tapipay && !window.tapipay._q) {\n\t\treturn Promise.resolve(window.tapipay);\n\t}\n\n\t// Reutilizar promise existente (idempotencia por entorno)\n\tconst existing = loadPromises.get(env);\n\tif (existing) return existing;\n\n\tconst promise = new Promise<TapipayInstance>((resolve, reject) => {\n\t\t// Si ya hay un script inyectado, esperar a que cargue\n\t\tconst existingScript = document.getElementById(\n\t\t\tSCRIPT_ID,\n\t\t) as HTMLScriptElement | null;\n\n\t\tconst onLoad = () => {\n\t\t\tif (window.tapipay) {\n\t\t\t\tresolve(window.tapipay);\n\t\t\t} else {\n\t\t\t\treject(\n\t\t\t\t\tnew Error(\n\t\t\t\t\t\t\"[TapiPay] El script cargó pero window.tapipay no está definido.\",\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst onError = () => {\n\t\t\tloadPromises.delete(env);\n\t\t\treject(new Error(`[TapiPay] Error al cargar el SDK desde ${SDK_URL}`));\n\t\t};\n\n\t\tif (existingScript) {\n\t\t\texistingScript.addEventListener(\"load\", onLoad);\n\t\t\texistingScript.addEventListener(\"error\", onError);\n\t\t\treturn;\n\t\t}\n\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.id = SCRIPT_ID;\n\t\tscript.src = SDK_URL;\n\t\tscript.async = true;\n\t\tscript.addEventListener(\"load\", onLoad);\n\t\tscript.addEventListener(\"error\", onError);\n\t\tdocument.head.appendChild(script);\n\t});\n\n\tloadPromises.set(env, promise);\n\treturn promise;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/react.tsx","../src/loader.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { loadTapipay } from \"./loader\";\nimport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentSubmittedEvent,\n\tTapipayPaymentWindowOpenedEvent,\n} from \"./types\";\n\n// ─── useTapipay hook ──────────────────────────────────────────────────────────\n\n/**\n * Hook de bajo nivel que carga el SDK y retorna la instancia.\n * Útil cuando necesitas control manual sobre initialize/destroy.\n *\n * @example\n * const { tapipay, error } = useTapipay();\n * const { tapipay, error } = useTapipay({ environment: 'homo' });\n */\nexport function useTapipay(options?: LoadTapipayOptions): {\n\ttapipay: TapipayInstance | null;\n\terror: Error | null;\n} {\n\tconst [tapipay, setTapipay] = useState<TapipayInstance | null>(null);\n\tconst [error, setError] = useState<Error | null>(null);\n\tconst environment = options?.environment;\n\n\tuseEffect(() => {\n\t\tlet cancelled = false;\n\t\tloadTapipay({ environment })\n\t\t\t.then((instance) => {\n\t\t\t\tif (!cancelled) setTapipay(instance);\n\t\t\t})\n\t\t\t.catch((err: Error) => {\n\t\t\t\tif (!cancelled) setError(err);\n\t\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [environment]);\n\n\treturn { tapipay, error };\n}\n\n// ─── TapipayWidget component ──────────────────────────────────────────────────\n\nexport interface TapipayWidgetProps extends Omit<TapipayOptions, \"container\"> {\n\t/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */\n\tenvironment?: TapipayEnvironment;\n\t/** Callback invocado cuando el popup de Yuno se abre exitosamente. */\n\tonPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;\n\t/** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */\n\tonPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;\n\t/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */\n\tonCancelled?: (data: TapipayPaymentCancelledEvent) => void;\n\t/** Clases CSS adicionales para el contenedor del widget. */\n\tclassName?: string;\n\t/** Estilos inline adicionales para el contenedor del widget. */\n\tstyle?: React.CSSProperties;\n}\n\n/**\n * Componente React que encapsula el widget de pago TapiPay.\n *\n * Maneja internamente la carga del SDK, el ciclo de vida del widget\n * y el cleanup al desmontar. Compatible con React Strict Mode.\n *\n * @example\n * <TapipayWidget\n *   organization=\"acme\"\n *   identifier=\"CLI-001\"\n *   externalRequestId=\"FAC-2024-001\"\n *   onPending={(data) => console.log(\"Pago en proceso\", data)}\n *   onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tenvironment,\n\tonPaymentWindowOpened,\n\tonPaymentSubmitted,\n\tonCancelled,\n\tclassName,\n\tstyle,\n}: TapipayWidgetProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Refs para evitar re-renders innecesarios y closures estáticos en useEffect\n\tconst onPaymentWindowOpenedRef = useRef(onPaymentWindowOpened);\n\tconst onPaymentSubmittedRef = useRef(onPaymentSubmitted);\n\tconst onCancelledRef = useRef(onCancelled);\n\n\tuseEffect(() => {\n\t\tonPaymentWindowOpenedRef.current = onPaymentWindowOpened;\n\t}, [onPaymentWindowOpened]);\n\n\tuseEffect(() => {\n\t\tonPaymentSubmittedRef.current = onPaymentSubmitted;\n\t}, [onPaymentSubmitted]);\n\n\tuseEffect(() => {\n\t\tonCancelledRef.current = onCancelled;\n\t}, [onCancelled]);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst container = containerRef.current;\n\n\t\tlet tapipayInstance: TapipayInstance | null = null;\n\t\tlet cancelled = false;\n\n\t\tconst handlePaymentWindowOpened = (\n\t\t\tdata: TapipayPaymentWindowOpenedEvent,\n\t\t) => {\n\t\t\tonPaymentWindowOpenedRef.current?.(data);\n\t\t};\n\t\tconst handlePaymentSubmitted = (data: TapipayPaymentSubmittedEvent) => {\n\t\t\tonPaymentSubmittedRef.current?.(data);\n\t\t};\n\t\tconst handleCancelled = (data: TapipayPaymentCancelledEvent) => {\n\t\t\tonCancelledRef.current?.(data);\n\t\t};\n\n\t\tloadTapipay({ environment }).then((instance) => {\n\t\t\tif (cancelled) return;\n\t\t\ttapipayInstance = instance;\n\n\t\t\tinstance.on(\"paymentWindowOpened\", handlePaymentWindowOpened);\n\t\t\tinstance.on(\"paymentSubmitted\", handlePaymentSubmitted);\n\t\t\tinstance.on(\"paymentCancelled\", handleCancelled);\n\n\t\t\tinstance.initialize({\n\t\t\t\tcontainer,\n\t\t\t\torganization,\n\t\t\t\tidentifier,\n\t\t\t\texternalRequestId,\n\t\t\t\tselectionStrategy,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tif (tapipayInstance) {\n\t\t\t\ttapipayInstance.off(\"paymentWindowOpened\", handlePaymentWindowOpened);\n\t\t\t\ttapipayInstance.off(\"paymentSubmitted\", handlePaymentSubmitted);\n\t\t\t\ttapipayInstance.off(\"paymentCancelled\", handleCancelled);\n\t\t\t\ttapipayInstance.destroy(container);\n\t\t\t}\n\t\t};\n\t\t// El widget se re-monta si cambian los parámetros de identificación o entorno\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\torganization,\n\t\tidentifier,\n\t\texternalRequestId,\n\t\tselectionStrategy,\n\t\tenvironment,\n\t]);\n\n\treturn <div ref={containerRef} className={className} style={style} />;\n}\n","import type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n} from \"./types\";\n\nconst SDK_URLS: Record<TapipayEnvironment, string> = {\n\tproduction: \"https://app.tapipay.la/embed.js\",\n\thomo: \"https://homo.tapipay.la/embed.js\",\n};\n\n// Idempotencia por entorno\nconst loadPromises = new Map<TapipayEnvironment, Promise<TapipayInstance>>();\n\n/**\n * Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.\n *\n * - Idempotente por entorno: múltiples llamadas con el mismo `environment` retornan la misma Promise.\n * - Si window.tapipay ya existe (script cargado sync), resuelve inmediatamente.\n * - Compatible con React Strict Mode (doble mount/unmount).\n *\n * @example\n * // Producción (default)\n * const tapipay = await loadTapipay();\n *\n * // Homologación\n * const tapipay = await loadTapipay({ environment: 'homo' });\n *\n * tapipay.initialize({ container: \"#widget\", organization: \"acme\", identifier: \"CLI-001\" });\n */\nexport function loadTapipay(\n\toptions?: LoadTapipayOptions,\n): Promise<TapipayInstance> {\n\tconst env: TapipayEnvironment = options?.environment ?? \"production\";\n\tconst SDK_URL = SDK_URLS[env];\n\tconst SCRIPT_ID = `tapipay-embed-sdk-${env}`;\n\n\t// SSR guard\n\tif (typeof window === \"undefined\") {\n\t\treturn Promise.reject(\n\t\t\tnew Error(\"[TapiPay] loadTapipay() requires a browser environment.\"),\n\t\t);\n\t}\n\n\t// Ya cargado de forma síncrona (script tag directo)\n\tif (window.tapipay && !window.tapipay._q) {\n\t\treturn Promise.resolve(window.tapipay);\n\t}\n\n\t// Reutilizar promise existente (idempotencia por entorno)\n\tconst existing = loadPromises.get(env);\n\tif (existing) return existing;\n\n\tconst promise = new Promise<TapipayInstance>((resolve, reject) => {\n\t\t// Si ya hay un script inyectado, esperar a que cargue\n\t\tconst existingScript = document.getElementById(\n\t\t\tSCRIPT_ID,\n\t\t) as HTMLScriptElement | null;\n\n\t\tconst onLoad = () => {\n\t\t\tif (window.tapipay) {\n\t\t\t\tresolve(window.tapipay);\n\t\t\t} else {\n\t\t\t\treject(\n\t\t\t\t\tnew Error(\n\t\t\t\t\t\t\"[TapiPay] El script cargó pero window.tapipay no está definido.\",\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst onError = () => {\n\t\t\tloadPromises.delete(env);\n\t\t\treject(new Error(`[TapiPay] Error al cargar el SDK desde ${SDK_URL}`));\n\t\t};\n\n\t\tif (existingScript) {\n\t\t\texistingScript.addEventListener(\"load\", onLoad);\n\t\t\texistingScript.addEventListener(\"error\", onError);\n\t\t\treturn;\n\t\t}\n\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.id = SCRIPT_ID;\n\t\tscript.src = SDK_URL;\n\t\tscript.async = true;\n\t\tscript.addEventListener(\"load\", onLoad);\n\t\tscript.addEventListener(\"error\", onError);\n\t\tdocument.head.appendChild(script);\n\t});\n\n\tloadPromises.set(env, promise);\n\treturn promise;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;;;ACM5C,IAAM,WAA+C;AAAA,EACpD,YAAY;AAAA,EACZ,MAAM;AACP;AAGA,IAAM,eAAe,oBAAI,IAAkD;AAkBpE,SAAS,YACf,SAC2B;AAhC5B;AAiCC,QAAM,OAA0B,wCAAS,gBAAT,YAAwB;AACxD,QAAM,UAAU,SAAS,GAAG;AAC5B,QAAM,YAAY,qBAAqB,GAAG;AAG1C,MAAI,OAAO,WAAW,aAAa;AAClC,WAAO,QAAQ;AAAA,MACd,IAAI,MAAM,yDAAyD;AAAA,IACpE;AAAA,EACD;AAGA,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,IAAI;AACzC,WAAO,QAAQ,QAAQ,OAAO,OAAO;AAAA,EACtC;AAGA,QAAM,WAAW,aAAa,IAAI,GAAG;AACrC,MAAI,SAAU,QAAO;AAErB,QAAM,UAAU,IAAI,QAAyB,CAAC,SAAS,WAAW;AAEjE,UAAM,iBAAiB,SAAS;AAAA,MAC/B;AAAA,IACD;AAEA,UAAM,SAAS,MAAM;AACpB,UAAI,OAAO,SAAS;AACnB,gBAAQ,OAAO,OAAO;AAAA,MACvB,OAAO;AACN;AAAA,UACC,IAAI;AAAA,YACH;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,UAAM,UAAU,MAAM;AACrB,mBAAa,OAAO,GAAG;AACvB,aAAO,IAAI,MAAM,0CAA0C,OAAO,EAAE,CAAC;AAAA,IACtE;AAEA,QAAI,gBAAgB;AACnB,qBAAe,iBAAiB,QAAQ,MAAM;AAC9C,qBAAe,iBAAiB,SAAS,OAAO;AAChD;AAAA,IACD;AAEA,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,KAAK;AACZ,WAAO,MAAM;AACb,WAAO,QAAQ;AACf,WAAO,iBAAiB,QAAQ,MAAM;AACtC,WAAO,iBAAiB,SAAS,OAAO;AACxC,aAAS,KAAK,YAAY,MAAM;AAAA,EACjC,CAAC;AAED,eAAa,IAAI,KAAK,OAAO;AAC7B,SAAO;AACR;;;ADuEQ;AA9ID,SAAS,WAAW,SAGzB;AACD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAiC,IAAI;AACnE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAuB,IAAI;AACrD,QAAM,cAAc,mCAAS;AAE7B,8BAAU,MAAM;AACf,QAAI,YAAY;AAChB,gBAAY,EAAE,YAAY,CAAC,EACzB,KAAK,CAAC,aAAa;AACnB,UAAI,CAAC,UAAW,YAAW,QAAQ;AAAA,IACpC,CAAC,EACA,MAAM,CAAC,QAAe;AACtB,UAAI,CAAC,UAAW,UAAS,GAAG;AAAA,IAC7B,CAAC;AACF,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,EAAE,SAAS,MAAM;AACzB;AAkCO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,mBAAe,qBAAuB,IAAI;AAEhD,QAAM,+BAA2B,qBAAO,qBAAqB;AAC7D,QAAM,4BAAwB,qBAAO,kBAAkB;AACvD,QAAM,qBAAiB,qBAAO,WAAW;AAEzC,8BAAU,MAAM;AACf,6BAAyB,UAAU;AAAA,EACpC,GAAG,CAAC,qBAAqB,CAAC;AAE1B,8BAAU,MAAM;AACf,0BAAsB,UAAU;AAAA,EACjC,GAAG,CAAC,kBAAkB,CAAC;AAEvB,8BAAU,MAAM;AACf,mBAAe,UAAU;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,8BAAU,MAAM;AACf,QAAI,CAAC,aAAa,QAAS;AAC3B,UAAM,YAAY,aAAa;AAE/B,QAAI,kBAA0C;AAC9C,QAAI,YAAY;AAEhB,UAAM,4BAA4B,CACjC,SACI;AAtHP;AAuHG,qCAAyB,YAAzB,kDAAmC;AAAA,IACpC;AACA,UAAM,yBAAyB,CAAC,SAAuC;AAzHzE;AA0HG,kCAAsB,YAAtB,+CAAgC;AAAA,IACjC;AACA,UAAM,kBAAkB,CAAC,SAAuC;AA5HlE;AA6HG,2BAAe,YAAf,wCAAyB;AAAA,IAC1B;AAEA,gBAAY,EAAE,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa;AAC/C,UAAI,UAAW;AACf,wBAAkB;AAElB,eAAS,GAAG,uBAAuB,yBAAyB;AAC5D,eAAS,GAAG,oBAAoB,sBAAsB;AACtD,eAAS,GAAG,oBAAoB,eAAe;AAE/C,eAAS,WAAW;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAC;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACZ,kBAAY;AACZ,UAAI,iBAAiB;AACpB,wBAAgB,IAAI,uBAAuB,yBAAyB;AACpE,wBAAgB,IAAI,oBAAoB,sBAAsB;AAC9D,wBAAgB,IAAI,oBAAoB,eAAe;AACvD,wBAAgB,QAAQ,SAAS;AAAA,MAClC;AAAA,IACD;AAAA,EAGD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,4CAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AACpE;","names":[]}

package/dist/react.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as TapipayOptions, a as TapipayEnvironment, d as TapipayPaymentPendingEvent, c as TapipayPaymentCancelledEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DmkYbkBI.cjs';
+import { b as TapipayOptions, a as TapipayEnvironment, e as TapipayPaymentWindowOpenedEvent, d as TapipayPaymentSubmittedEvent, c as TapipayPaymentCancelledEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DYcwsDwH.cjs';
 
 /**
  * Hook de bajo nivel que carga el SDK y retorna la instancia.
@@ -16,8 +16,10 @@ declare function useTapipay(options?: LoadTapipayOptions): {
 interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
     /** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */
     environment?: TapipayEnvironment;
-    /** Callback invocado cuando Yuno redirige al callback (pago en proceso). */
-    onPending?: (data: TapipayPaymentPendingEvent) => void;
+    /** Callback invocado cuando el popup de Yuno se abre exitosamente. */
+    onPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;
+    /** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */
+    onPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;
     /** Callback invocado cuando el usuario cierra el popup sin completar el pago. */
     onCancelled?: (data: TapipayPaymentCancelledEvent) => void;
     /** Clases CSS adicionales para el contenedor del widget. */
@@ -40,6 +42,6 @@ interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
  *   onCancelled={() => console.log("Pago cancelado por el usuario")}
  * />
  */
-declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment, onPending, onCancelled, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
+declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment, onPaymentWindowOpened, onPaymentSubmitted, onCancelled, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
 
 export { TapipayWidget, type TapipayWidgetProps, useTapipay };

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as TapipayOptions, a as TapipayEnvironment, d as TapipayPaymentPendingEvent, c as TapipayPaymentCancelledEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DmkYbkBI.js';
+import { b as TapipayOptions, a as TapipayEnvironment, e as TapipayPaymentWindowOpenedEvent, d as TapipayPaymentSubmittedEvent, c as TapipayPaymentCancelledEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DYcwsDwH.js';
 
 /**
  * Hook de bajo nivel que carga el SDK y retorna la instancia.
@@ -16,8 +16,10 @@ declare function useTapipay(options?: LoadTapipayOptions): {
 interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
     /** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */
     environment?: TapipayEnvironment;
-    /** Callback invocado cuando Yuno redirige al callback (pago en proceso). */
-    onPending?: (data: TapipayPaymentPendingEvent) => void;
+    /** Callback invocado cuando el popup de Yuno se abre exitosamente. */
+    onPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;
+    /** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */
+    onPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;
     /** Callback invocado cuando el usuario cierra el popup sin completar el pago. */
     onCancelled?: (data: TapipayPaymentCancelledEvent) => void;
     /** Clases CSS adicionales para el contenedor del widget. */
@@ -40,6 +42,6 @@ interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
  *   onCancelled={() => console.log("Pago cancelado por el usuario")}
  * />
  */
-declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment, onPending, onCancelled, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
+declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment, onPaymentWindowOpened, onPaymentSubmitted, onCancelled, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
 
 export { TapipayWidget, type TapipayWidgetProps, useTapipay };

package/dist/react.js

@@ -28,17 +28,22 @@ function TapipayWidget({
   externalRequestId,
   selectionStrategy,
   environment,
-  onPending,
+  onPaymentWindowOpened,
+  onPaymentSubmitted,
   onCancelled,
   className,
   style
 }) {
   const containerRef = useRef(null);
-  const onPendingRef = useRef(onPending);
+  const onPaymentWindowOpenedRef = useRef(onPaymentWindowOpened);
+  const onPaymentSubmittedRef = useRef(onPaymentSubmitted);
   const onCancelledRef = useRef(onCancelled);
   useEffect(() => {
-    onPendingRef.current = onPending;
-  }, [onPending]);
+    onPaymentWindowOpenedRef.current = onPaymentWindowOpened;
+  }, [onPaymentWindowOpened]);
+  useEffect(() => {
+    onPaymentSubmittedRef.current = onPaymentSubmitted;
+  }, [onPaymentSubmitted]);
   useEffect(() => {
     onCancelledRef.current = onCancelled;
   }, [onCancelled]);
@@ -47,9 +52,13 @@ function TapipayWidget({
     const container = containerRef.current;
     let tapipayInstance = null;
     let cancelled = false;
-    const handlePending = (data) => {
+    const handlePaymentWindowOpened = (data) => {
+      var _a;
+      (_a = onPaymentWindowOpenedRef.current) == null ? void 0 : _a.call(onPaymentWindowOpenedRef, data);
+    };
+    const handlePaymentSubmitted = (data) => {
       var _a;
-      (_a = onPendingRef.current) == null ? void 0 : _a.call(onPendingRef, data);
+      (_a = onPaymentSubmittedRef.current) == null ? void 0 : _a.call(onPaymentSubmittedRef, data);
     };
     const handleCancelled = (data) => {
       var _a;
@@ -58,7 +67,8 @@ function TapipayWidget({
     loadTapipay({ environment }).then((instance) => {
       if (cancelled) return;
       tapipayInstance = instance;
-      instance.on("paymentPending", handlePending);
+      instance.on("paymentWindowOpened", handlePaymentWindowOpened);
+      instance.on("paymentSubmitted", handlePaymentSubmitted);
       instance.on("paymentCancelled", handleCancelled);
       instance.initialize({
         container,
@@ -71,7 +81,8 @@ function TapipayWidget({
     return () => {
       cancelled = true;
       if (tapipayInstance) {
-        tapipayInstance.off("paymentPending", handlePending);
+        tapipayInstance.off("paymentWindowOpened", handlePaymentWindowOpened);
+        tapipayInstance.off("paymentSubmitted", handlePaymentSubmitted);
         tapipayInstance.off("paymentCancelled", handleCancelled);
         tapipayInstance.destroy(container);
       }

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { loadTapipay } from \"./loader\";\nimport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentPendingEvent,\n} from \"./types\";\n\n// ─── useTapipay hook ──────────────────────────────────────────────────────────\n\n/**\n * Hook de bajo nivel que carga el SDK y retorna la instancia.\n * Útil cuando necesitas control manual sobre initialize/destroy.\n *\n * @example\n * const { tapipay, error } = useTapipay();\n * const { tapipay, error } = useTapipay({ environment: 'homo' });\n */\nexport function useTapipay(options?: LoadTapipayOptions): {\n\ttapipay: TapipayInstance | null;\n\terror: Error | null;\n} {\n\tconst [tapipay, setTapipay] = useState<TapipayInstance | null>(null);\n\tconst [error, setError] = useState<Error | null>(null);\n\tconst environment = options?.environment;\n\n\tuseEffect(() => {\n\t\tlet cancelled = false;\n\t\tloadTapipay({ environment })\n\t\t\t.then((instance) => {\n\t\t\t\tif (!cancelled) setTapipay(instance);\n\t\t\t})\n\t\t\t.catch((err: Error) => {\n\t\t\t\tif (!cancelled) setError(err);\n\t\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [environment]);\n\n\treturn { tapipay, error };\n}\n\n// ─── TapipayWidget component ──────────────────────────────────────────────────\n\nexport interface TapipayWidgetProps extends Omit<TapipayOptions, \"container\"> {\n\t/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */\n\tenvironment?: TapipayEnvironment;\n\t/** Callback invocado cuando Yuno redirige al callback (pago en proceso). */\n\tonPending?: (data: TapipayPaymentPendingEvent) => void;\n\t/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */\n\tonCancelled?: (data: TapipayPaymentCancelledEvent) => void;\n\t/** Clases CSS adicionales para el contenedor del widget. */\n\tclassName?: string;\n\t/** Estilos inline adicionales para el contenedor del widget. */\n\tstyle?: React.CSSProperties;\n}\n\n/**\n * Componente React que encapsula el widget de pago TapiPay.\n *\n * Maneja internamente la carga del SDK, el ciclo de vida del widget\n * y el cleanup al desmontar. Compatible con React Strict Mode.\n *\n * @example\n * <TapipayWidget\n *   organization=\"acme\"\n *   identifier=\"CLI-001\"\n *   externalRequestId=\"FAC-2024-001\"\n *   onPending={(data) => console.log(\"Pago en proceso\", data)}\n *   onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tenvironment,\n\tonPending,\n\tonCancelled,\n\tclassName,\n\tstyle,\n}: TapipayWidgetProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Refs para evitar re-renders innecesarios y closures estáticos en useEffect\n\tconst onPendingRef = useRef(onPending);\n\tconst onCancelledRef = useRef(onCancelled);\n\n\tuseEffect(() => {\n\t\tonPendingRef.current = onPending;\n\t}, [onPending]);\n\n\tuseEffect(() => {\n\t\tonCancelledRef.current = onCancelled;\n\t}, [onCancelled]);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst container = containerRef.current;\n\n\t\tlet tapipayInstance: TapipayInstance | null = null;\n\t\tlet cancelled = false;\n\n\t\tconst handlePending = (data: TapipayPaymentPendingEvent) => {\n\t\t\tonPendingRef.current?.(data);\n\t\t};\n\t\tconst handleCancelled = (data: TapipayPaymentCancelledEvent) => {\n\t\t\tonCancelledRef.current?.(data);\n\t\t};\n\n\t\tloadTapipay({ environment }).then((instance) => {\n\t\t\tif (cancelled) return;\n\t\t\ttapipayInstance = instance;\n\n\t\t\tinstance.on(\"paymentPending\", handlePending);\n\t\t\tinstance.on(\"paymentCancelled\", handleCancelled);\n\n\t\t\tinstance.initialize({\n\t\t\t\tcontainer,\n\t\t\t\torganization,\n\t\t\t\tidentifier,\n\t\t\t\texternalRequestId,\n\t\t\t\tselectionStrategy,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tif (tapipayInstance) {\n\t\t\t\ttapipayInstance.off(\"paymentPending\", handlePending);\n\t\t\t\ttapipayInstance.off(\"paymentCancelled\", handleCancelled);\n\t\t\t\ttapipayInstance.destroy(container);\n\t\t\t}\n\t\t};\n\t\t// El widget se re-monta si cambian los parámetros de identificación o entorno\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\torganization,\n\t\tidentifier,\n\t\texternalRequestId,\n\t\tselectionStrategy,\n\t\tenvironment,\n\t]);\n\n\treturn <div ref={containerRef} className={className} style={style} />;\n}\n"],"mappings":";;;;;AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAoJpC;AA/HD,SAAS,WAAW,SAGzB;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiC,IAAI;AACnE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,cAAc,mCAAS;AAE7B,YAAU,MAAM;AACf,QAAI,YAAY;AAChB,gBAAY,EAAE,YAAY,CAAC,EACzB,KAAK,CAAC,aAAa;AACnB,UAAI,CAAC,UAAW,YAAW,QAAQ;AAAA,IACpC,CAAC,EACA,MAAM,CAAC,QAAe;AACtB,UAAI,CAAC,UAAW,UAAS,GAAG;AAAA,IAC7B,CAAC;AACF,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,EAAE,SAAS,MAAM;AACzB;AAgCO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,iBAAiB,OAAO,WAAW;AAEzC,YAAU,MAAM;AACf,iBAAa,UAAU;AAAA,EACxB,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACf,mBAAe,UAAU;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACf,QAAI,CAAC,aAAa,QAAS;AAC3B,UAAM,YAAY,aAAa;AAE/B,QAAI,kBAA0C;AAC9C,QAAI,YAAY;AAEhB,UAAM,gBAAgB,CAAC,SAAqC;AA3G9D;AA4GG,yBAAa,YAAb,sCAAuB;AAAA,IACxB;AACA,UAAM,kBAAkB,CAAC,SAAuC;AA9GlE;AA+GG,2BAAe,YAAf,wCAAyB;AAAA,IAC1B;AAEA,gBAAY,EAAE,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa;AAC/C,UAAI,UAAW;AACf,wBAAkB;AAElB,eAAS,GAAG,kBAAkB,aAAa;AAC3C,eAAS,GAAG,oBAAoB,eAAe;AAE/C,eAAS,WAAW;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAC;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACZ,kBAAY;AACZ,UAAI,iBAAiB;AACpB,wBAAgB,IAAI,kBAAkB,aAAa;AACnD,wBAAgB,IAAI,oBAAoB,eAAe;AACvD,wBAAgB,QAAQ,SAAS;AAAA,MAClC;AAAA,IACD;AAAA,EAGD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,oBAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AACpE;","names":[]}
+{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { loadTapipay } from \"./loader\";\nimport type {\n\tLoadTapipayOptions,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentSubmittedEvent,\n\tTapipayPaymentWindowOpenedEvent,\n} from \"./types\";\n\n// ─── useTapipay hook ──────────────────────────────────────────────────────────\n\n/**\n * Hook de bajo nivel que carga el SDK y retorna la instancia.\n * Útil cuando necesitas control manual sobre initialize/destroy.\n *\n * @example\n * const { tapipay, error } = useTapipay();\n * const { tapipay, error } = useTapipay({ environment: 'homo' });\n */\nexport function useTapipay(options?: LoadTapipayOptions): {\n\ttapipay: TapipayInstance | null;\n\terror: Error | null;\n} {\n\tconst [tapipay, setTapipay] = useState<TapipayInstance | null>(null);\n\tconst [error, setError] = useState<Error | null>(null);\n\tconst environment = options?.environment;\n\n\tuseEffect(() => {\n\t\tlet cancelled = false;\n\t\tloadTapipay({ environment })\n\t\t\t.then((instance) => {\n\t\t\t\tif (!cancelled) setTapipay(instance);\n\t\t\t})\n\t\t\t.catch((err: Error) => {\n\t\t\t\tif (!cancelled) setError(err);\n\t\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [environment]);\n\n\treturn { tapipay, error };\n}\n\n// ─── TapipayWidget component ──────────────────────────────────────────────────\n\nexport interface TapipayWidgetProps extends Omit<TapipayOptions, \"container\"> {\n\t/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */\n\tenvironment?: TapipayEnvironment;\n\t/** Callback invocado cuando el popup de Yuno se abre exitosamente. */\n\tonPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;\n\t/** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */\n\tonPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;\n\t/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */\n\tonCancelled?: (data: TapipayPaymentCancelledEvent) => void;\n\t/** Clases CSS adicionales para el contenedor del widget. */\n\tclassName?: string;\n\t/** Estilos inline adicionales para el contenedor del widget. */\n\tstyle?: React.CSSProperties;\n}\n\n/**\n * Componente React que encapsula el widget de pago TapiPay.\n *\n * Maneja internamente la carga del SDK, el ciclo de vida del widget\n * y el cleanup al desmontar. Compatible con React Strict Mode.\n *\n * @example\n * <TapipayWidget\n *   organization=\"acme\"\n *   identifier=\"CLI-001\"\n *   externalRequestId=\"FAC-2024-001\"\n *   onPending={(data) => console.log(\"Pago en proceso\", data)}\n *   onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tenvironment,\n\tonPaymentWindowOpened,\n\tonPaymentSubmitted,\n\tonCancelled,\n\tclassName,\n\tstyle,\n}: TapipayWidgetProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Refs para evitar re-renders innecesarios y closures estáticos en useEffect\n\tconst onPaymentWindowOpenedRef = useRef(onPaymentWindowOpened);\n\tconst onPaymentSubmittedRef = useRef(onPaymentSubmitted);\n\tconst onCancelledRef = useRef(onCancelled);\n\n\tuseEffect(() => {\n\t\tonPaymentWindowOpenedRef.current = onPaymentWindowOpened;\n\t}, [onPaymentWindowOpened]);\n\n\tuseEffect(() => {\n\t\tonPaymentSubmittedRef.current = onPaymentSubmitted;\n\t}, [onPaymentSubmitted]);\n\n\tuseEffect(() => {\n\t\tonCancelledRef.current = onCancelled;\n\t}, [onCancelled]);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst container = containerRef.current;\n\n\t\tlet tapipayInstance: TapipayInstance | null = null;\n\t\tlet cancelled = false;\n\n\t\tconst handlePaymentWindowOpened = (\n\t\t\tdata: TapipayPaymentWindowOpenedEvent,\n\t\t) => {\n\t\t\tonPaymentWindowOpenedRef.current?.(data);\n\t\t};\n\t\tconst handlePaymentSubmitted = (data: TapipayPaymentSubmittedEvent) => {\n\t\t\tonPaymentSubmittedRef.current?.(data);\n\t\t};\n\t\tconst handleCancelled = (data: TapipayPaymentCancelledEvent) => {\n\t\t\tonCancelledRef.current?.(data);\n\t\t};\n\n\t\tloadTapipay({ environment }).then((instance) => {\n\t\t\tif (cancelled) return;\n\t\t\ttapipayInstance = instance;\n\n\t\t\tinstance.on(\"paymentWindowOpened\", handlePaymentWindowOpened);\n\t\t\tinstance.on(\"paymentSubmitted\", handlePaymentSubmitted);\n\t\t\tinstance.on(\"paymentCancelled\", handleCancelled);\n\n\t\t\tinstance.initialize({\n\t\t\t\tcontainer,\n\t\t\t\torganization,\n\t\t\t\tidentifier,\n\t\t\t\texternalRequestId,\n\t\t\t\tselectionStrategy,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tif (tapipayInstance) {\n\t\t\t\ttapipayInstance.off(\"paymentWindowOpened\", handlePaymentWindowOpened);\n\t\t\t\ttapipayInstance.off(\"paymentSubmitted\", handlePaymentSubmitted);\n\t\t\t\ttapipayInstance.off(\"paymentCancelled\", handleCancelled);\n\t\t\t\ttapipayInstance.destroy(container);\n\t\t\t}\n\t\t};\n\t\t// El widget se re-monta si cambian los parámetros de identificación o entorno\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\torganization,\n\t\tidentifier,\n\t\texternalRequestId,\n\t\tselectionStrategy,\n\t\tenvironment,\n\t]);\n\n\treturn <div ref={containerRef} className={className} style={style} />;\n}\n"],"mappings":";;;;;AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAoKpC;AA9ID,SAAS,WAAW,SAGzB;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiC,IAAI;AACnE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,cAAc,mCAAS;AAE7B,YAAU,MAAM;AACf,QAAI,YAAY;AAChB,gBAAY,EAAE,YAAY,CAAC,EACzB,KAAK,CAAC,aAAa;AACnB,UAAI,CAAC,UAAW,YAAW,QAAQ;AAAA,IACpC,CAAC,EACA,MAAM,CAAC,QAAe;AACtB,UAAI,CAAC,UAAW,UAAS,GAAG;AAAA,IAC7B,CAAC;AACF,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,EAAE,SAAS,MAAM;AACzB;AAkCO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,2BAA2B,OAAO,qBAAqB;AAC7D,QAAM,wBAAwB,OAAO,kBAAkB;AACvD,QAAM,iBAAiB,OAAO,WAAW;AAEzC,YAAU,MAAM;AACf,6BAAyB,UAAU;AAAA,EACpC,GAAG,CAAC,qBAAqB,CAAC;AAE1B,YAAU,MAAM;AACf,0BAAsB,UAAU;AAAA,EACjC,GAAG,CAAC,kBAAkB,CAAC;AAEvB,YAAU,MAAM;AACf,mBAAe,UAAU;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACf,QAAI,CAAC,aAAa,QAAS;AAC3B,UAAM,YAAY,aAAa;AAE/B,QAAI,kBAA0C;AAC9C,QAAI,YAAY;AAEhB,UAAM,4BAA4B,CACjC,SACI;AAtHP;AAuHG,qCAAyB,YAAzB,kDAAmC;AAAA,IACpC;AACA,UAAM,yBAAyB,CAAC,SAAuC;AAzHzE;AA0HG,kCAAsB,YAAtB,+CAAgC;AAAA,IACjC;AACA,UAAM,kBAAkB,CAAC,SAAuC;AA5HlE;AA6HG,2BAAe,YAAf,wCAAyB;AAAA,IAC1B;AAEA,gBAAY,EAAE,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa;AAC/C,UAAI,UAAW;AACf,wBAAkB;AAElB,eAAS,GAAG,uBAAuB,yBAAyB;AAC5D,eAAS,GAAG,oBAAoB,sBAAsB;AACtD,eAAS,GAAG,oBAAoB,eAAe;AAE/C,eAAS,WAAW;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAC;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACZ,kBAAY;AACZ,UAAI,iBAAiB;AACpB,wBAAgB,IAAI,uBAAuB,yBAAyB;AACpE,wBAAgB,IAAI,oBAAoB,sBAAsB;AAC9D,wBAAgB,IAAI,oBAAoB,eAAe;AACvD,wBAAgB,QAAQ,SAAS;AAAA,MAClC;AAAA,IACD;AAAA,EAGD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,oBAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AACpE;","names":[]}

package/dist/{types-DmkYbkBI.d.cts → types-DYcwsDwH.d.cts}

@@ -30,11 +30,18 @@ interface TapipayOptions {
     selectionStrategy?: "oldestCreated";
 }
 /**
- * Payload del evento paymentPending.
- * El usuario completó el flujo de Yuno; el pago está en proceso.
+ * Payload del evento paymentWindowOpened.
+ * El popup de Yuno fue abierto exitosamente.
+ */
+interface TapipayPaymentWindowOpenedEvent {
+    type: "paymentWindowOpened";
+}
+/**
+ * Payload del evento paymentSubmitted.
+ * El usuario completó el formulario de Yuno y fue redirigido al callback.
  * El estado real del pago se confirma vía webhooks en el backend.
  */
-interface TapipayPaymentPendingEvent {
+interface TapipayPaymentSubmittedEvent {
     /** Siempre "TAPIPAY_CALLBACK" */
     type: string;
     /** Estado del pago: siempre "pending" */
@@ -53,9 +60,11 @@ type TapipayPaymentCancelledEvent = {};
 interface TapipayInstance {
     initialize(options: TapipayOptions): void;
     destroy(container: string | HTMLElement): void;
-    on(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
+    on(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
+    on(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
     on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
-    off(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
+    off(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
+    off(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
     off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
     off(event: string, handler: (...args: unknown[]) => unknown): void;
     /** Cola interna usada por el stub antes de que cargue el SDK real. */
@@ -67,4 +76,4 @@ declare global {
     }
 }
 
-export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentPendingEvent as d };
+export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentSubmittedEvent as d, TapipayPaymentWindowOpenedEvent as e };

package/dist/{types-DmkYbkBI.d.ts → types-DYcwsDwH.d.ts}

@@ -30,11 +30,18 @@ interface TapipayOptions {
     selectionStrategy?: "oldestCreated";
 }
 /**
- * Payload del evento paymentPending.
- * El usuario completó el flujo de Yuno; el pago está en proceso.
+ * Payload del evento paymentWindowOpened.
+ * El popup de Yuno fue abierto exitosamente.
+ */
+interface TapipayPaymentWindowOpenedEvent {
+    type: "paymentWindowOpened";
+}
+/**
+ * Payload del evento paymentSubmitted.
+ * El usuario completó el formulario de Yuno y fue redirigido al callback.
  * El estado real del pago se confirma vía webhooks en el backend.
  */
-interface TapipayPaymentPendingEvent {
+interface TapipayPaymentSubmittedEvent {
     /** Siempre "TAPIPAY_CALLBACK" */
     type: string;
     /** Estado del pago: siempre "pending" */
@@ -53,9 +60,11 @@ type TapipayPaymentCancelledEvent = {};
 interface TapipayInstance {
     initialize(options: TapipayOptions): void;
     destroy(container: string | HTMLElement): void;
-    on(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
+    on(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
+    on(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
     on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
-    off(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
+    off(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
+    off(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
     off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
     off(event: string, handler: (...args: unknown[]) => unknown): void;
     /** Cola interna usada por el stub antes de que cargue el SDK real. */
@@ -67,4 +76,4 @@ declare global {
     }
 }
 
-export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentPendingEvent as d };
+export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentSubmittedEvent as d, TapipayPaymentWindowOpenedEvent as e };

package/package.json

@@ -1,44 +1,43 @@
 {
-	"name": "@npmtapi/embed",
-	"version": "1.0.0",
-	"description": "TapiPay Embed SDK — carga y controla el widget de pago embebido",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js",
-			"require": "./dist/index.cjs"
-		},
-		"./react": {
-			"types": "./dist/react.d.ts",
-			"import": "./dist/react.js",
-			"require": "./dist/react.cjs"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"scripts": {
-		"build": "tsup",
-		"dev": "tsup --watch",
-		"prepublishOnly": "pnpm build"
-	},
-	"author": "tapipay",
-	"publishConfig": {
-		"access": "public"
-	},
-	"peerDependencies": {
-		"react": ">=18"
-	},
-	"peerDependenciesMeta": {
-		"react": {
-			"optional": true
-		}
-	},
-	"devDependencies": {
-		"@types/react": "^18.0.0",
-		"react": "^18.0.0",
-		"tsup": "^8.0.0",
-		"typescript": "^5.0.0"
-	}
-}
+  "name": "@npmtapi/embed",
+  "version": "1.1.0",
+  "description": "TapiPay Embed SDK — carga y controla el widget de pago embebido",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "author": "tapipay",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}