@npmtapi/embed 1.0.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/react.cjs +56 -9
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +24 -5
- package/dist/react.d.ts +24 -5
- package/dist/react.js +56 -9
- package/dist/react.js.map +1 -1
- package/dist/types-DHQb-NNM.d.cts +148 -0
- package/dist/types-DHQb-NNM.d.ts +148 -0
- package/package.json +1 -1
- package/dist/types-DmkYbkBI.d.cts +0 -70
- package/dist/types-DmkYbkBI.d.ts +0 -70
package/README.md
CHANGED
|
@@ -44,8 +44,12 @@ Los tipos están incluidos — no necesitas `@types/tapipay`.
|
|
|
44
44
|
identifier: "CLI-001"
|
|
45
45
|
});
|
|
46
46
|
|
|
47
|
-
tapipay.on("
|
|
48
|
-
console.log("
|
|
47
|
+
tapipay.on("paymentWindowOpened", function() {
|
|
48
|
+
console.log("Ventana de pago abierta");
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
tapipay.on("paymentSubmitted", function(data) {
|
|
52
|
+
console.log("Pago enviado:", data);
|
|
49
53
|
});
|
|
50
54
|
</script>
|
|
51
55
|
```
|
|
@@ -74,7 +78,8 @@ export function PagoPage({ clienteId }: { clienteId: string }) {
|
|
|
74
78
|
<TapipayWidget
|
|
75
79
|
organization="acme"
|
|
76
80
|
identifier={clienteId}
|
|
77
|
-
|
|
81
|
+
onPaymentWindowOpened={() => console.log("Ventana de pago abierta")}
|
|
82
|
+
onPaymentSubmitted={(data) => console.log("Pago enviado:", data)}
|
|
78
83
|
onCancelled={() => console.log("Pago cancelado por el usuario")}
|
|
79
84
|
/>
|
|
80
85
|
);
|
|
@@ -89,9 +94,14 @@ export function PagoPage({ clienteId }: { clienteId: string }) {
|
|
|
89
94
|
| `identifier` | `string` | Sí | — | Identificador del cliente |
|
|
90
95
|
| `externalRequestId` | `string` | No | — | ID de deuda a preseleccionar. Tiene precedencia sobre `selectionStrategy` |
|
|
91
96
|
| `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 |
|
|
97
|
+
| `view` | `'payments' \| 'autopay'` | No | `'payments'` | Vista a montar. `'autopay'` muestra la gestión de adhesiones (ver domiciliación + desadherirse) |
|
|
92
98
|
| `environment` | `'production' \| 'homo'` | No | `'production'` | Entorno del SDK |
|
|
93
|
-
| `
|
|
99
|
+
| `onPaymentWindowOpened` | `() => void` | No | — | Callback cuando el popup de Yuno se abre exitosamente |
|
|
100
|
+
| `onPaymentSubmitted` | `(data) => void` | No | — | Callback cuando el usuario completó el formulario de Yuno y fue redirigido al callback |
|
|
94
101
|
| `onCancelled` | `() => void` | No | — | Callback cuando el usuario cierra el popup sin completar el pago |
|
|
102
|
+
| `onAutopayLoaded` | `(data) => void` | No | — | (Vista autopay) Callback con las adhesiones activas; se reinvoca cuando la lista cambia |
|
|
103
|
+
| `onAutopayRemoved` | `(data) => void` | No | — | (Vista autopay) Callback cuando el usuario desadhiere un medio con éxito |
|
|
104
|
+
| `onAutopayError` | `(data) => void` | No | — | (Vista autopay) Callback ante un error de carga o de desadhesión |
|
|
95
105
|
| `className` | `string` | No | — | Clases CSS del contenedor |
|
|
96
106
|
| `style` | `CSSProperties` | No | — | Estilos inline del contenedor |
|
|
97
107
|
|
|
@@ -110,7 +120,7 @@ export default function PagarPage() {
|
|
|
110
120
|
<TapipayWidget
|
|
111
121
|
organization={process.env.NEXT_PUBLIC_TAPIPAY_ORGANIZATION!}
|
|
112
122
|
identifier="CLI-001"
|
|
113
|
-
|
|
123
|
+
onPaymentSubmitted={() => router.push("/procesando")}
|
|
114
124
|
/>
|
|
115
125
|
);
|
|
116
126
|
}
|
|
@@ -140,7 +150,7 @@ onMounted(async () => {
|
|
|
140
150
|
organization: props.organization,
|
|
141
151
|
identifier: props.identifier,
|
|
142
152
|
});
|
|
143
|
-
tapipay.on("
|
|
153
|
+
tapipay.on("paymentSubmitted", (data) => console.log("Pago enviado:", data));
|
|
144
154
|
});
|
|
145
155
|
|
|
146
156
|
onUnmounted(() => tapipay?.destroy(widgetRef.value));
|
|
@@ -200,15 +210,22 @@ export class TapipayWidgetComponent implements OnInit, OnDestroy {
|
|
|
200
210
|
| `identifier` | `string` | Sí | — | Identificador del cliente (DNI, número de cuenta, etc.) |
|
|
201
211
|
| `externalRequestId` | `string` | No | — | ID externo de una deuda específica a preseleccionar. Tiene precedencia sobre `selectionStrategy` |
|
|
202
212
|
| `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 |
|
|
213
|
+
| `view` | `'payments' \| 'autopay'` | No | `'payments'` | Vista a montar. `'autopay'` muestra la gestión de adhesiones |
|
|
203
214
|
|
|
204
215
|
---
|
|
205
216
|
|
|
206
217
|
## Eventos
|
|
207
218
|
|
|
208
219
|
```js
|
|
209
|
-
// Yuno
|
|
210
|
-
tapipay.on("
|
|
211
|
-
console.log("
|
|
220
|
+
// El popup de Yuno se abrió exitosamente (útil para mostrar un overlay mientras el usuario paga)
|
|
221
|
+
tapipay.on("paymentWindowOpened", function() {
|
|
222
|
+
console.log("Ventana de pago abierta");
|
|
223
|
+
// Mostrar overlay/spinner mientras el usuario completa el formulario
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
// El usuario completó el formulario de Yuno y fue redirigido al callback
|
|
227
|
+
tapipay.on("paymentSubmitted", function(data) {
|
|
228
|
+
console.log("Pago enviado:", data);
|
|
212
229
|
// Mostrar pantalla de "procesando" y esperar webhook
|
|
213
230
|
});
|
|
214
231
|
|
|
@@ -218,13 +235,21 @@ tapipay.on("paymentCancelled", function() {
|
|
|
218
235
|
});
|
|
219
236
|
|
|
220
237
|
// Remover un listener
|
|
221
|
-
tapipay.off("
|
|
238
|
+
tapipay.off("paymentSubmitted", handler);
|
|
222
239
|
```
|
|
223
240
|
|
|
224
|
-
### `
|
|
241
|
+
### `TapipayPaymentWindowOpenedEvent`
|
|
225
242
|
|
|
226
243
|
```ts
|
|
227
|
-
interface
|
|
244
|
+
interface TapipayPaymentWindowOpenedEvent {
|
|
245
|
+
type: "paymentWindowOpened";
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### `TapipayPaymentSubmittedEvent`
|
|
250
|
+
|
|
251
|
+
```ts
|
|
252
|
+
interface TapipayPaymentSubmittedEvent {
|
|
228
253
|
type: string; // "TAPIPAY_CALLBACK"
|
|
229
254
|
status: "pending";
|
|
230
255
|
data: Record<string, string>; // Parámetros que Yuno haya enviado (pueden estar vacíos)
|
|
@@ -241,6 +266,85 @@ interface TapipayPaymentCancelledEvent {
|
|
|
241
266
|
|
|
242
267
|
---
|
|
243
268
|
|
|
269
|
+
## Vista de gestión de adhesiones (autopay)
|
|
270
|
+
|
|
271
|
+
Pasando `view: "autopay"` el widget monta la **gestión de adhesiones**: el usuario final ve su domiciliación (tarjeta o cuenta CLABE/bancaria) y puede desadherirse, sin entrar al portal completo.
|
|
272
|
+
|
|
273
|
+
> **Privacidad.** Los eventos de autopay exponen **solo lo mínimo**: el tipo de medio (`mediaType`) y los últimos 4 dígitos (`lastFour`). El `id` es un hash opaco del identificador interno. **Nunca** se exponen titular, número/CLABE completos, marca, banco ni tokens.
|
|
274
|
+
|
|
275
|
+
### Script tag
|
|
276
|
+
|
|
277
|
+
```html
|
|
278
|
+
<script src="https://app.tapipay.la/embed.js"></script>
|
|
279
|
+
<div id="autopay"></div>
|
|
280
|
+
<script>
|
|
281
|
+
tapipay.initialize({
|
|
282
|
+
container: "#autopay",
|
|
283
|
+
organization: "acme",
|
|
284
|
+
identifier: "CLI-001",
|
|
285
|
+
view: "autopay"
|
|
286
|
+
});
|
|
287
|
+
|
|
288
|
+
tapipay.on("autopayLoaded", function(data) {
|
|
289
|
+
console.log("Adhesiones activas:", data.count);
|
|
290
|
+
});
|
|
291
|
+
tapipay.on("autopayRemoved", function(data) {
|
|
292
|
+
console.log("Medio desadherido:", data.mediaType, data.lastFour);
|
|
293
|
+
});
|
|
294
|
+
tapipay.on("autopayError", function(data) {
|
|
295
|
+
console.log("Error de autopay:", data.stage, data.message);
|
|
296
|
+
});
|
|
297
|
+
</script>
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
### React
|
|
301
|
+
|
|
302
|
+
```tsx
|
|
303
|
+
import { TapipayWidget } from "@npmtapi/embed/react";
|
|
304
|
+
|
|
305
|
+
export function AdhesionesPage({ clienteId }: { clienteId: string }) {
|
|
306
|
+
return (
|
|
307
|
+
<TapipayWidget
|
|
308
|
+
view="autopay"
|
|
309
|
+
organization="acme"
|
|
310
|
+
identifier={clienteId}
|
|
311
|
+
onAutopayLoaded={(data) => console.log("Adhesiones activas:", data.count)}
|
|
312
|
+
onAutopayRemoved={(data) => console.log("Desadherido:", data.mediaType)}
|
|
313
|
+
onAutopayError={(data) => console.log("Error:", data.stage)}
|
|
314
|
+
/>
|
|
315
|
+
);
|
|
316
|
+
}
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
### Eventos de autopay
|
|
320
|
+
|
|
321
|
+
```ts
|
|
322
|
+
interface TapipayAutopayLoadedEvent {
|
|
323
|
+
count: number; // adhesiones activas
|
|
324
|
+
mediaTypes: Array<"card" | "bank_account">; // tipos presentes (sin duplicados)
|
|
325
|
+
adhesions: Array<{
|
|
326
|
+
id: string; // hash opaco
|
|
327
|
+
mediaType: "card" | "bank_account";
|
|
328
|
+
lastFour: string | null; // últimos 4 dígitos
|
|
329
|
+
}>;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
interface TapipayAutopayRemovedEvent {
|
|
333
|
+
id: string;
|
|
334
|
+
mediaType: "card" | "bank_account";
|
|
335
|
+
lastFour: string | null;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
interface TapipayAutopayErrorEvent {
|
|
339
|
+
stage: "load" | "remove";
|
|
340
|
+
message: string; // neutral, sin PII
|
|
341
|
+
}
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
> `autopayLoaded` se dispara al cargar y **cada vez que la lista de adhesiones cambia** (tras una desadhesión, refetch o polling), así que el host puede mantener su conteo consumiendo siempre el último `payload`.
|
|
345
|
+
|
|
346
|
+
---
|
|
347
|
+
|
|
244
348
|
## Entorno de homologación
|
|
245
349
|
|
|
246
350
|
Para apuntar al entorno de homologación en lugar de producción:
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +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\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/loader.ts"],"sourcesContent":["export { loadTapipay } from \"./loader\";\nexport type {\n\tLoadTapipayOptions,\n\tTapipayAutopayAdhesionSummary,\n\tTapipayAutopayErrorEvent,\n\tTapipayAutopayLoadedEvent,\n\tTapipayAutopayMediaType,\n\tTapipayAutopayRemovedEvent,\n\tTapipayEnvironment,\n\tTapipayInstance,\n\tTapipayOptions,\n\tTapipayPaymentCancelledEvent,\n\tTapipayPaymentSubmittedEvent,\n\tTapipayPaymentWindowOpenedEvent,\n\tTapipayView,\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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { L as LoadTapipayOptions, T as TapipayInstance } from './types-
|
|
2
|
-
export { a as
|
|
1
|
+
import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DHQb-NNM.cjs';
|
|
2
|
+
export { a as TapipayAutopayAdhesionSummary, b as TapipayAutopayErrorEvent, c as TapipayAutopayLoadedEvent, d as TapipayAutopayMediaType, e as TapipayAutopayRemovedEvent, f as TapipayEnvironment, g as TapipayOptions, h as TapipayPaymentCancelledEvent, i as TapipayPaymentSubmittedEvent, j as TapipayPaymentWindowOpenedEvent, k as TapipayView } from './types-DHQb-NNM.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { L as LoadTapipayOptions, T as TapipayInstance } from './types-
|
|
2
|
-
export { a as
|
|
1
|
+
import { L as LoadTapipayOptions, T as TapipayInstance } from './types-DHQb-NNM.js';
|
|
2
|
+
export { a as TapipayAutopayAdhesionSummary, b as TapipayAutopayErrorEvent, c as TapipayAutopayLoadedEvent, d as TapipayAutopayMediaType, e as TapipayAutopayRemovedEvent, f as TapipayEnvironment, g as TapipayOptions, h as TapipayPaymentCancelledEvent, i as TapipayPaymentSubmittedEvent, j as TapipayPaymentWindowOpenedEvent, k as TapipayView } from './types-DHQb-NNM.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Carga el SDK de TapiPay de forma asíncrona inyectando el script en el DOM.
|
package/dist/react.cjs
CHANGED
|
@@ -107,52 +107,98 @@ function TapipayWidget({
|
|
|
107
107
|
identifier,
|
|
108
108
|
externalRequestId,
|
|
109
109
|
selectionStrategy,
|
|
110
|
+
view,
|
|
110
111
|
environment,
|
|
111
|
-
|
|
112
|
+
onPaymentWindowOpened,
|
|
113
|
+
onPaymentSubmitted,
|
|
112
114
|
onCancelled,
|
|
115
|
+
onAutopayLoaded,
|
|
116
|
+
onAutopayRemoved,
|
|
117
|
+
onAutopayError,
|
|
113
118
|
className,
|
|
114
119
|
style
|
|
115
120
|
}) {
|
|
116
121
|
const containerRef = (0, import_react.useRef)(null);
|
|
117
|
-
const
|
|
122
|
+
const onPaymentWindowOpenedRef = (0, import_react.useRef)(onPaymentWindowOpened);
|
|
123
|
+
const onPaymentSubmittedRef = (0, import_react.useRef)(onPaymentSubmitted);
|
|
118
124
|
const onCancelledRef = (0, import_react.useRef)(onCancelled);
|
|
125
|
+
const onAutopayLoadedRef = (0, import_react.useRef)(onAutopayLoaded);
|
|
126
|
+
const onAutopayRemovedRef = (0, import_react.useRef)(onAutopayRemoved);
|
|
127
|
+
const onAutopayErrorRef = (0, import_react.useRef)(onAutopayError);
|
|
119
128
|
(0, import_react.useEffect)(() => {
|
|
120
|
-
|
|
121
|
-
}, [
|
|
129
|
+
onPaymentWindowOpenedRef.current = onPaymentWindowOpened;
|
|
130
|
+
}, [onPaymentWindowOpened]);
|
|
131
|
+
(0, import_react.useEffect)(() => {
|
|
132
|
+
onPaymentSubmittedRef.current = onPaymentSubmitted;
|
|
133
|
+
}, [onPaymentSubmitted]);
|
|
122
134
|
(0, import_react.useEffect)(() => {
|
|
123
135
|
onCancelledRef.current = onCancelled;
|
|
124
136
|
}, [onCancelled]);
|
|
137
|
+
(0, import_react.useEffect)(() => {
|
|
138
|
+
onAutopayLoadedRef.current = onAutopayLoaded;
|
|
139
|
+
}, [onAutopayLoaded]);
|
|
140
|
+
(0, import_react.useEffect)(() => {
|
|
141
|
+
onAutopayRemovedRef.current = onAutopayRemoved;
|
|
142
|
+
}, [onAutopayRemoved]);
|
|
143
|
+
(0, import_react.useEffect)(() => {
|
|
144
|
+
onAutopayErrorRef.current = onAutopayError;
|
|
145
|
+
}, [onAutopayError]);
|
|
125
146
|
(0, import_react.useEffect)(() => {
|
|
126
147
|
if (!containerRef.current) return;
|
|
127
148
|
const container = containerRef.current;
|
|
128
149
|
let tapipayInstance = null;
|
|
129
150
|
let cancelled = false;
|
|
130
|
-
const
|
|
151
|
+
const handlePaymentWindowOpened = (data) => {
|
|
152
|
+
var _a;
|
|
153
|
+
(_a = onPaymentWindowOpenedRef.current) == null ? void 0 : _a.call(onPaymentWindowOpenedRef, data);
|
|
154
|
+
};
|
|
155
|
+
const handlePaymentSubmitted = (data) => {
|
|
131
156
|
var _a;
|
|
132
|
-
(_a =
|
|
157
|
+
(_a = onPaymentSubmittedRef.current) == null ? void 0 : _a.call(onPaymentSubmittedRef, data);
|
|
133
158
|
};
|
|
134
159
|
const handleCancelled = (data) => {
|
|
135
160
|
var _a;
|
|
136
161
|
(_a = onCancelledRef.current) == null ? void 0 : _a.call(onCancelledRef, data);
|
|
137
162
|
};
|
|
163
|
+
const handleAutopayLoaded = (data) => {
|
|
164
|
+
var _a;
|
|
165
|
+
(_a = onAutopayLoadedRef.current) == null ? void 0 : _a.call(onAutopayLoadedRef, data);
|
|
166
|
+
};
|
|
167
|
+
const handleAutopayRemoved = (data) => {
|
|
168
|
+
var _a;
|
|
169
|
+
(_a = onAutopayRemovedRef.current) == null ? void 0 : _a.call(onAutopayRemovedRef, data);
|
|
170
|
+
};
|
|
171
|
+
const handleAutopayError = (data) => {
|
|
172
|
+
var _a;
|
|
173
|
+
(_a = onAutopayErrorRef.current) == null ? void 0 : _a.call(onAutopayErrorRef, data);
|
|
174
|
+
};
|
|
138
175
|
loadTapipay({ environment }).then((instance) => {
|
|
139
176
|
if (cancelled) return;
|
|
140
177
|
tapipayInstance = instance;
|
|
141
|
-
instance.on("
|
|
178
|
+
instance.on("paymentWindowOpened", handlePaymentWindowOpened);
|
|
179
|
+
instance.on("paymentSubmitted", handlePaymentSubmitted);
|
|
142
180
|
instance.on("paymentCancelled", handleCancelled);
|
|
181
|
+
instance.on("autopayLoaded", handleAutopayLoaded);
|
|
182
|
+
instance.on("autopayRemoved", handleAutopayRemoved);
|
|
183
|
+
instance.on("autopayError", handleAutopayError);
|
|
143
184
|
instance.initialize({
|
|
144
185
|
container,
|
|
145
186
|
organization,
|
|
146
187
|
identifier,
|
|
147
188
|
externalRequestId,
|
|
148
|
-
selectionStrategy
|
|
189
|
+
selectionStrategy,
|
|
190
|
+
view
|
|
149
191
|
});
|
|
150
192
|
});
|
|
151
193
|
return () => {
|
|
152
194
|
cancelled = true;
|
|
153
195
|
if (tapipayInstance) {
|
|
154
|
-
tapipayInstance.off("
|
|
196
|
+
tapipayInstance.off("paymentWindowOpened", handlePaymentWindowOpened);
|
|
197
|
+
tapipayInstance.off("paymentSubmitted", handlePaymentSubmitted);
|
|
155
198
|
tapipayInstance.off("paymentCancelled", handleCancelled);
|
|
199
|
+
tapipayInstance.off("autopayLoaded", handleAutopayLoaded);
|
|
200
|
+
tapipayInstance.off("autopayRemoved", handleAutopayRemoved);
|
|
201
|
+
tapipayInstance.off("autopayError", handleAutopayError);
|
|
156
202
|
tapipayInstance.destroy(container);
|
|
157
203
|
}
|
|
158
204
|
};
|
|
@@ -161,6 +207,7 @@ function TapipayWidget({
|
|
|
161
207
|
identifier,
|
|
162
208
|
externalRequestId,
|
|
163
209
|
selectionStrategy,
|
|
210
|
+
view,
|
|
164
211
|
environment
|
|
165
212
|
]);
|
|
166
213
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, style });
|
package/dist/react.cjs.map
CHANGED
|
@@ -1 +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":[]}
|
|
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\tTapipayAutopayErrorEvent,\n\tTapipayAutopayLoadedEvent,\n\tTapipayAutopayRemovedEvent,\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/** (Vista autopay) Callback con el conjunto de adhesiones activas; se reinvoca cuando la lista cambia. */\n\tonAutopayLoaded?: (data: TapipayAutopayLoadedEvent) => void;\n\t/** (Vista autopay) Callback cuando el usuario desadhiere un medio con éxito. */\n\tonAutopayRemoved?: (data: TapipayAutopayRemovedEvent) => void;\n\t/** (Vista autopay) Callback ante un error de carga de adhesiones o de desadhesión. */\n\tonAutopayError?: (data: TapipayAutopayErrorEvent) => 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 * // Vista de pagos (default)\n * <TapipayWidget\n * organization=\"acme\"\n * identifier=\"CLI-001\"\n * externalRequestId=\"FAC-2024-001\"\n * onPaymentSubmitted={(data) => console.log(\"Pago enviado\", data)}\n * onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n *\n * @example\n * // Vista de gestión de adhesiones de autopay\n * <TapipayWidget\n * organization=\"acme\"\n * identifier=\"CLI-001\"\n * view=\"autopay\"\n * onAutopayLoaded={(data) => console.log(\"Adhesiones\", data.count)}\n * onAutopayRemoved={(data) => console.log(\"Adhesión eliminada\", data.id)}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tview,\n\tenvironment,\n\tonPaymentWindowOpened,\n\tonPaymentSubmitted,\n\tonCancelled,\n\tonAutopayLoaded,\n\tonAutopayRemoved,\n\tonAutopayError,\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\tconst onAutopayLoadedRef = useRef(onAutopayLoaded);\n\tconst onAutopayRemovedRef = useRef(onAutopayRemoved);\n\tconst onAutopayErrorRef = useRef(onAutopayError);\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\tonAutopayLoadedRef.current = onAutopayLoaded;\n\t}, [onAutopayLoaded]);\n\n\tuseEffect(() => {\n\t\tonAutopayRemovedRef.current = onAutopayRemoved;\n\t}, [onAutopayRemoved]);\n\n\tuseEffect(() => {\n\t\tonAutopayErrorRef.current = onAutopayError;\n\t}, [onAutopayError]);\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\t\tconst handleAutopayLoaded = (data: TapipayAutopayLoadedEvent) => {\n\t\t\tonAutopayLoadedRef.current?.(data);\n\t\t};\n\t\tconst handleAutopayRemoved = (data: TapipayAutopayRemovedEvent) => {\n\t\t\tonAutopayRemovedRef.current?.(data);\n\t\t};\n\t\tconst handleAutopayError = (data: TapipayAutopayErrorEvent) => {\n\t\t\tonAutopayErrorRef.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\t\t\tinstance.on(\"autopayLoaded\", handleAutopayLoaded);\n\t\t\tinstance.on(\"autopayRemoved\", handleAutopayRemoved);\n\t\t\tinstance.on(\"autopayError\", handleAutopayError);\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\tview,\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.off(\"autopayLoaded\", handleAutopayLoaded);\n\t\t\t\ttapipayInstance.off(\"autopayRemoved\", handleAutopayRemoved);\n\t\t\t\ttapipayInstance.off(\"autopayError\", handleAutopayError);\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\tview,\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":[]}
|
package/dist/react.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { g as TapipayOptions, f as TapipayEnvironment, j as TapipayPaymentWindowOpenedEvent, i as TapipayPaymentSubmittedEvent, h as TapipayPaymentCancelledEvent, c as TapipayAutopayLoadedEvent, e as TapipayAutopayRemovedEvent, b as TapipayAutopayErrorEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DHQb-NNM.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Hook de bajo nivel que carga el SDK y retorna la instancia.
|
|
@@ -16,10 +16,18 @@ declare function useTapipay(options?: LoadTapipayOptions): {
|
|
|
16
16
|
interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
|
|
17
17
|
/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */
|
|
18
18
|
environment?: TapipayEnvironment;
|
|
19
|
-
/** Callback invocado cuando
|
|
20
|
-
|
|
19
|
+
/** Callback invocado cuando el popup de Yuno se abre exitosamente. */
|
|
20
|
+
onPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;
|
|
21
|
+
/** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */
|
|
22
|
+
onPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;
|
|
21
23
|
/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */
|
|
22
24
|
onCancelled?: (data: TapipayPaymentCancelledEvent) => void;
|
|
25
|
+
/** (Vista autopay) Callback con el conjunto de adhesiones activas; se reinvoca cuando la lista cambia. */
|
|
26
|
+
onAutopayLoaded?: (data: TapipayAutopayLoadedEvent) => void;
|
|
27
|
+
/** (Vista autopay) Callback cuando el usuario desadhiere un medio con éxito. */
|
|
28
|
+
onAutopayRemoved?: (data: TapipayAutopayRemovedEvent) => void;
|
|
29
|
+
/** (Vista autopay) Callback ante un error de carga de adhesiones o de desadhesión. */
|
|
30
|
+
onAutopayError?: (data: TapipayAutopayErrorEvent) => void;
|
|
23
31
|
/** Clases CSS adicionales para el contenedor del widget. */
|
|
24
32
|
className?: string;
|
|
25
33
|
/** Estilos inline adicionales para el contenedor del widget. */
|
|
@@ -32,14 +40,25 @@ interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
|
|
|
32
40
|
* y el cleanup al desmontar. Compatible con React Strict Mode.
|
|
33
41
|
*
|
|
34
42
|
* @example
|
|
43
|
+
* // Vista de pagos (default)
|
|
35
44
|
* <TapipayWidget
|
|
36
45
|
* organization="acme"
|
|
37
46
|
* identifier="CLI-001"
|
|
38
47
|
* externalRequestId="FAC-2024-001"
|
|
39
|
-
*
|
|
48
|
+
* onPaymentSubmitted={(data) => console.log("Pago enviado", data)}
|
|
40
49
|
* onCancelled={() => console.log("Pago cancelado por el usuario")}
|
|
41
50
|
* />
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* // Vista de gestión de adhesiones de autopay
|
|
54
|
+
* <TapipayWidget
|
|
55
|
+
* organization="acme"
|
|
56
|
+
* identifier="CLI-001"
|
|
57
|
+
* view="autopay"
|
|
58
|
+
* onAutopayLoaded={(data) => console.log("Adhesiones", data.count)}
|
|
59
|
+
* onAutopayRemoved={(data) => console.log("Adhesión eliminada", data.id)}
|
|
60
|
+
* />
|
|
42
61
|
*/
|
|
43
|
-
declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment,
|
|
62
|
+
declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, view, environment, onPaymentWindowOpened, onPaymentSubmitted, onCancelled, onAutopayLoaded, onAutopayRemoved, onAutopayError, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
|
|
44
63
|
|
|
45
64
|
export { TapipayWidget, type TapipayWidgetProps, useTapipay };
|
package/dist/react.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { g as TapipayOptions, f as TapipayEnvironment, j as TapipayPaymentWindowOpenedEvent, i as TapipayPaymentSubmittedEvent, h as TapipayPaymentCancelledEvent, c as TapipayAutopayLoadedEvent, e as TapipayAutopayRemovedEvent, b as TapipayAutopayErrorEvent, L as LoadTapipayOptions, T as TapipayInstance } from './types-DHQb-NNM.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Hook de bajo nivel que carga el SDK y retorna la instancia.
|
|
@@ -16,10 +16,18 @@ declare function useTapipay(options?: LoadTapipayOptions): {
|
|
|
16
16
|
interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
|
|
17
17
|
/** Entorno del SDK a cargar. Por defecto `'production'`. Usar `'homo'` para homologación. */
|
|
18
18
|
environment?: TapipayEnvironment;
|
|
19
|
-
/** Callback invocado cuando
|
|
20
|
-
|
|
19
|
+
/** Callback invocado cuando el popup de Yuno se abre exitosamente. */
|
|
20
|
+
onPaymentWindowOpened?: (data: TapipayPaymentWindowOpenedEvent) => void;
|
|
21
|
+
/** Callback invocado cuando el usuario completó el formulario de Yuno y fue redirigido al callback. */
|
|
22
|
+
onPaymentSubmitted?: (data: TapipayPaymentSubmittedEvent) => void;
|
|
21
23
|
/** Callback invocado cuando el usuario cierra el popup sin completar el pago. */
|
|
22
24
|
onCancelled?: (data: TapipayPaymentCancelledEvent) => void;
|
|
25
|
+
/** (Vista autopay) Callback con el conjunto de adhesiones activas; se reinvoca cuando la lista cambia. */
|
|
26
|
+
onAutopayLoaded?: (data: TapipayAutopayLoadedEvent) => void;
|
|
27
|
+
/** (Vista autopay) Callback cuando el usuario desadhiere un medio con éxito. */
|
|
28
|
+
onAutopayRemoved?: (data: TapipayAutopayRemovedEvent) => void;
|
|
29
|
+
/** (Vista autopay) Callback ante un error de carga de adhesiones o de desadhesión. */
|
|
30
|
+
onAutopayError?: (data: TapipayAutopayErrorEvent) => void;
|
|
23
31
|
/** Clases CSS adicionales para el contenedor del widget. */
|
|
24
32
|
className?: string;
|
|
25
33
|
/** Estilos inline adicionales para el contenedor del widget. */
|
|
@@ -32,14 +40,25 @@ interface TapipayWidgetProps extends Omit<TapipayOptions, "container"> {
|
|
|
32
40
|
* y el cleanup al desmontar. Compatible con React Strict Mode.
|
|
33
41
|
*
|
|
34
42
|
* @example
|
|
43
|
+
* // Vista de pagos (default)
|
|
35
44
|
* <TapipayWidget
|
|
36
45
|
* organization="acme"
|
|
37
46
|
* identifier="CLI-001"
|
|
38
47
|
* externalRequestId="FAC-2024-001"
|
|
39
|
-
*
|
|
48
|
+
* onPaymentSubmitted={(data) => console.log("Pago enviado", data)}
|
|
40
49
|
* onCancelled={() => console.log("Pago cancelado por el usuario")}
|
|
41
50
|
* />
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* // Vista de gestión de adhesiones de autopay
|
|
54
|
+
* <TapipayWidget
|
|
55
|
+
* organization="acme"
|
|
56
|
+
* identifier="CLI-001"
|
|
57
|
+
* view="autopay"
|
|
58
|
+
* onAutopayLoaded={(data) => console.log("Adhesiones", data.count)}
|
|
59
|
+
* onAutopayRemoved={(data) => console.log("Adhesión eliminada", data.id)}
|
|
60
|
+
* />
|
|
42
61
|
*/
|
|
43
|
-
declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, environment,
|
|
62
|
+
declare function TapipayWidget({ organization, identifier, externalRequestId, selectionStrategy, view, environment, onPaymentWindowOpened, onPaymentSubmitted, onCancelled, onAutopayLoaded, onAutopayRemoved, onAutopayError, className, style, }: TapipayWidgetProps): react_jsx_runtime.JSX.Element;
|
|
44
63
|
|
|
45
64
|
export { TapipayWidget, type TapipayWidgetProps, useTapipay };
|
package/dist/react.js
CHANGED
|
@@ -27,52 +27,98 @@ function TapipayWidget({
|
|
|
27
27
|
identifier,
|
|
28
28
|
externalRequestId,
|
|
29
29
|
selectionStrategy,
|
|
30
|
+
view,
|
|
30
31
|
environment,
|
|
31
|
-
|
|
32
|
+
onPaymentWindowOpened,
|
|
33
|
+
onPaymentSubmitted,
|
|
32
34
|
onCancelled,
|
|
35
|
+
onAutopayLoaded,
|
|
36
|
+
onAutopayRemoved,
|
|
37
|
+
onAutopayError,
|
|
33
38
|
className,
|
|
34
39
|
style
|
|
35
40
|
}) {
|
|
36
41
|
const containerRef = useRef(null);
|
|
37
|
-
const
|
|
42
|
+
const onPaymentWindowOpenedRef = useRef(onPaymentWindowOpened);
|
|
43
|
+
const onPaymentSubmittedRef = useRef(onPaymentSubmitted);
|
|
38
44
|
const onCancelledRef = useRef(onCancelled);
|
|
45
|
+
const onAutopayLoadedRef = useRef(onAutopayLoaded);
|
|
46
|
+
const onAutopayRemovedRef = useRef(onAutopayRemoved);
|
|
47
|
+
const onAutopayErrorRef = useRef(onAutopayError);
|
|
39
48
|
useEffect(() => {
|
|
40
|
-
|
|
41
|
-
}, [
|
|
49
|
+
onPaymentWindowOpenedRef.current = onPaymentWindowOpened;
|
|
50
|
+
}, [onPaymentWindowOpened]);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
onPaymentSubmittedRef.current = onPaymentSubmitted;
|
|
53
|
+
}, [onPaymentSubmitted]);
|
|
42
54
|
useEffect(() => {
|
|
43
55
|
onCancelledRef.current = onCancelled;
|
|
44
56
|
}, [onCancelled]);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
onAutopayLoadedRef.current = onAutopayLoaded;
|
|
59
|
+
}, [onAutopayLoaded]);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
onAutopayRemovedRef.current = onAutopayRemoved;
|
|
62
|
+
}, [onAutopayRemoved]);
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
onAutopayErrorRef.current = onAutopayError;
|
|
65
|
+
}, [onAutopayError]);
|
|
45
66
|
useEffect(() => {
|
|
46
67
|
if (!containerRef.current) return;
|
|
47
68
|
const container = containerRef.current;
|
|
48
69
|
let tapipayInstance = null;
|
|
49
70
|
let cancelled = false;
|
|
50
|
-
const
|
|
71
|
+
const handlePaymentWindowOpened = (data) => {
|
|
72
|
+
var _a;
|
|
73
|
+
(_a = onPaymentWindowOpenedRef.current) == null ? void 0 : _a.call(onPaymentWindowOpenedRef, data);
|
|
74
|
+
};
|
|
75
|
+
const handlePaymentSubmitted = (data) => {
|
|
51
76
|
var _a;
|
|
52
|
-
(_a =
|
|
77
|
+
(_a = onPaymentSubmittedRef.current) == null ? void 0 : _a.call(onPaymentSubmittedRef, data);
|
|
53
78
|
};
|
|
54
79
|
const handleCancelled = (data) => {
|
|
55
80
|
var _a;
|
|
56
81
|
(_a = onCancelledRef.current) == null ? void 0 : _a.call(onCancelledRef, data);
|
|
57
82
|
};
|
|
83
|
+
const handleAutopayLoaded = (data) => {
|
|
84
|
+
var _a;
|
|
85
|
+
(_a = onAutopayLoadedRef.current) == null ? void 0 : _a.call(onAutopayLoadedRef, data);
|
|
86
|
+
};
|
|
87
|
+
const handleAutopayRemoved = (data) => {
|
|
88
|
+
var _a;
|
|
89
|
+
(_a = onAutopayRemovedRef.current) == null ? void 0 : _a.call(onAutopayRemovedRef, data);
|
|
90
|
+
};
|
|
91
|
+
const handleAutopayError = (data) => {
|
|
92
|
+
var _a;
|
|
93
|
+
(_a = onAutopayErrorRef.current) == null ? void 0 : _a.call(onAutopayErrorRef, data);
|
|
94
|
+
};
|
|
58
95
|
loadTapipay({ environment }).then((instance) => {
|
|
59
96
|
if (cancelled) return;
|
|
60
97
|
tapipayInstance = instance;
|
|
61
|
-
instance.on("
|
|
98
|
+
instance.on("paymentWindowOpened", handlePaymentWindowOpened);
|
|
99
|
+
instance.on("paymentSubmitted", handlePaymentSubmitted);
|
|
62
100
|
instance.on("paymentCancelled", handleCancelled);
|
|
101
|
+
instance.on("autopayLoaded", handleAutopayLoaded);
|
|
102
|
+
instance.on("autopayRemoved", handleAutopayRemoved);
|
|
103
|
+
instance.on("autopayError", handleAutopayError);
|
|
63
104
|
instance.initialize({
|
|
64
105
|
container,
|
|
65
106
|
organization,
|
|
66
107
|
identifier,
|
|
67
108
|
externalRequestId,
|
|
68
|
-
selectionStrategy
|
|
109
|
+
selectionStrategy,
|
|
110
|
+
view
|
|
69
111
|
});
|
|
70
112
|
});
|
|
71
113
|
return () => {
|
|
72
114
|
cancelled = true;
|
|
73
115
|
if (tapipayInstance) {
|
|
74
|
-
tapipayInstance.off("
|
|
116
|
+
tapipayInstance.off("paymentWindowOpened", handlePaymentWindowOpened);
|
|
117
|
+
tapipayInstance.off("paymentSubmitted", handlePaymentSubmitted);
|
|
75
118
|
tapipayInstance.off("paymentCancelled", handleCancelled);
|
|
119
|
+
tapipayInstance.off("autopayLoaded", handleAutopayLoaded);
|
|
120
|
+
tapipayInstance.off("autopayRemoved", handleAutopayRemoved);
|
|
121
|
+
tapipayInstance.off("autopayError", handleAutopayError);
|
|
76
122
|
tapipayInstance.destroy(container);
|
|
77
123
|
}
|
|
78
124
|
};
|
|
@@ -81,6 +127,7 @@ function TapipayWidget({
|
|
|
81
127
|
identifier,
|
|
82
128
|
externalRequestId,
|
|
83
129
|
selectionStrategy,
|
|
130
|
+
view,
|
|
84
131
|
environment
|
|
85
132
|
]);
|
|
86
133
|
return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
|
package/dist/react.js.map
CHANGED
|
@@ -1 +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":[]}
|
|
1
|
+
{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { loadTapipay } from \"./loader\";\nimport type {\n\tLoadTapipayOptions,\n\tTapipayAutopayErrorEvent,\n\tTapipayAutopayLoadedEvent,\n\tTapipayAutopayRemovedEvent,\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/** (Vista autopay) Callback con el conjunto de adhesiones activas; se reinvoca cuando la lista cambia. */\n\tonAutopayLoaded?: (data: TapipayAutopayLoadedEvent) => void;\n\t/** (Vista autopay) Callback cuando el usuario desadhiere un medio con éxito. */\n\tonAutopayRemoved?: (data: TapipayAutopayRemovedEvent) => void;\n\t/** (Vista autopay) Callback ante un error de carga de adhesiones o de desadhesión. */\n\tonAutopayError?: (data: TapipayAutopayErrorEvent) => 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 * // Vista de pagos (default)\n * <TapipayWidget\n * organization=\"acme\"\n * identifier=\"CLI-001\"\n * externalRequestId=\"FAC-2024-001\"\n * onPaymentSubmitted={(data) => console.log(\"Pago enviado\", data)}\n * onCancelled={() => console.log(\"Pago cancelado por el usuario\")}\n * />\n *\n * @example\n * // Vista de gestión de adhesiones de autopay\n * <TapipayWidget\n * organization=\"acme\"\n * identifier=\"CLI-001\"\n * view=\"autopay\"\n * onAutopayLoaded={(data) => console.log(\"Adhesiones\", data.count)}\n * onAutopayRemoved={(data) => console.log(\"Adhesión eliminada\", data.id)}\n * />\n */\nexport function TapipayWidget({\n\torganization,\n\tidentifier,\n\texternalRequestId,\n\tselectionStrategy,\n\tview,\n\tenvironment,\n\tonPaymentWindowOpened,\n\tonPaymentSubmitted,\n\tonCancelled,\n\tonAutopayLoaded,\n\tonAutopayRemoved,\n\tonAutopayError,\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\tconst onAutopayLoadedRef = useRef(onAutopayLoaded);\n\tconst onAutopayRemovedRef = useRef(onAutopayRemoved);\n\tconst onAutopayErrorRef = useRef(onAutopayError);\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\tonAutopayLoadedRef.current = onAutopayLoaded;\n\t}, [onAutopayLoaded]);\n\n\tuseEffect(() => {\n\t\tonAutopayRemovedRef.current = onAutopayRemoved;\n\t}, [onAutopayRemoved]);\n\n\tuseEffect(() => {\n\t\tonAutopayErrorRef.current = onAutopayError;\n\t}, [onAutopayError]);\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\t\tconst handleAutopayLoaded = (data: TapipayAutopayLoadedEvent) => {\n\t\t\tonAutopayLoadedRef.current?.(data);\n\t\t};\n\t\tconst handleAutopayRemoved = (data: TapipayAutopayRemovedEvent) => {\n\t\t\tonAutopayRemovedRef.current?.(data);\n\t\t};\n\t\tconst handleAutopayError = (data: TapipayAutopayErrorEvent) => {\n\t\t\tonAutopayErrorRef.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\t\t\tinstance.on(\"autopayLoaded\", handleAutopayLoaded);\n\t\t\tinstance.on(\"autopayRemoved\", handleAutopayRemoved);\n\t\t\tinstance.on(\"autopayError\", handleAutopayError);\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\tview,\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.off(\"autopayLoaded\", handleAutopayLoaded);\n\t\t\t\ttapipayInstance.off(\"autopayRemoved\", handleAutopayRemoved);\n\t\t\t\ttapipayInstance.off(\"autopayError\", handleAutopayError);\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\tview,\n\t\tenvironment,\n\t]);\n\n\treturn <div ref={containerRef} className={className} style={style} />;\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Entorno de ejecución del SDK.
|
|
3
|
+
* - `'production'`: carga desde https://app.tapipay.la/embed.js (default)
|
|
4
|
+
* - `'homo'`: carga desde https://homo.tapipay.la/embed.js
|
|
5
|
+
*/
|
|
6
|
+
type TapipayEnvironment = "production" | "homo";
|
|
7
|
+
/**
|
|
8
|
+
* Opciones para `loadTapipay()`.
|
|
9
|
+
*/
|
|
10
|
+
interface LoadTapipayOptions {
|
|
11
|
+
/**
|
|
12
|
+
* Entorno a usar. Por defecto `'production'`.
|
|
13
|
+
* Para homologación usar `'homo'`.
|
|
14
|
+
*/
|
|
15
|
+
environment?: TapipayEnvironment;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Vista a montar en el widget.
|
|
19
|
+
* - `'payments'` (default si se omite): medios de pago / pago de deuda.
|
|
20
|
+
* - `'autopay'`: gestión de adhesiones (ver domiciliación y desadherirse).
|
|
21
|
+
*/
|
|
22
|
+
type TapipayView = "payments" | "autopay";
|
|
23
|
+
/**
|
|
24
|
+
* Opciones requeridas para montar el widget TapiPay.
|
|
25
|
+
*/
|
|
26
|
+
interface TapipayOptions {
|
|
27
|
+
/** Selector CSS o elemento DOM donde se montará el widget. */
|
|
28
|
+
container: string | HTMLElement;
|
|
29
|
+
/** Alias de la Organización configurado en el dashboard de TapiPay (ej. "acme"). Corresponde al campo "Alias" en Configuración → Organización. */
|
|
30
|
+
organization: string;
|
|
31
|
+
/** Identificador del cliente en el sistema del cliente (ej. "CLI-001"). */
|
|
32
|
+
identifier: string;
|
|
33
|
+
/** ID externo de la deuda a preseleccionar (ej. número de factura). Aplica a la vista de pagos. */
|
|
34
|
+
externalRequestId?: string;
|
|
35
|
+
/** Estrategia de selección automática de deuda. Aplica a la vista de pagos. */
|
|
36
|
+
selectionStrategy?: "oldestCreated";
|
|
37
|
+
/** Vista a montar. Por defecto la vista de pagos. Usar `'autopay'` para la gestión de adhesiones. */
|
|
38
|
+
view?: TapipayView;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Payload del evento paymentWindowOpened.
|
|
42
|
+
* El popup de Yuno fue abierto exitosamente.
|
|
43
|
+
*/
|
|
44
|
+
interface TapipayPaymentWindowOpenedEvent {
|
|
45
|
+
type: "paymentWindowOpened";
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Payload del evento paymentSubmitted.
|
|
49
|
+
* El usuario completó el formulario de Yuno y fue redirigido al callback.
|
|
50
|
+
* El estado real del pago se confirma vía webhooks en el backend.
|
|
51
|
+
*/
|
|
52
|
+
interface TapipayPaymentSubmittedEvent {
|
|
53
|
+
/** Siempre "TAPIPAY_CALLBACK" */
|
|
54
|
+
type: string;
|
|
55
|
+
/** Estado del pago: siempre "pending" */
|
|
56
|
+
status: "pending";
|
|
57
|
+
/** Parámetros que Yuno haya enviado al callback (pueden estar vacíos) */
|
|
58
|
+
data: Record<string, string>;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Payload del evento paymentCancelled.
|
|
62
|
+
* El usuario cerró el popup sin completar el flujo de pago. Sin campos adicionales.
|
|
63
|
+
*/
|
|
64
|
+
type TapipayPaymentCancelledEvent = Record<string, never>;
|
|
65
|
+
/**
|
|
66
|
+
* Tipo de medio adherido expuesto al sitio cliente.
|
|
67
|
+
* Solo se expone el tipo lógico, nunca la marca ni el banco.
|
|
68
|
+
*/
|
|
69
|
+
type TapipayAutopayMediaType = "card" | "bank_account";
|
|
70
|
+
/**
|
|
71
|
+
* Resumen mínimo y seguro de una adhesión activa.
|
|
72
|
+
* Privacidad: solo tipo de medio + últimos 4 dígitos. El `id` es un hash opaco
|
|
73
|
+
* del identificador interno de la adhesión (nunca el id crudo).
|
|
74
|
+
*/
|
|
75
|
+
interface TapipayAutopayAdhesionSummary {
|
|
76
|
+
/** Hash opaco del identificador de la adhesión. */
|
|
77
|
+
id: string;
|
|
78
|
+
/** Tipo de medio adherido. */
|
|
79
|
+
mediaType: TapipayAutopayMediaType;
|
|
80
|
+
/** Últimos 4 dígitos de la tarjeta o CLABE. `null` si no aplica/disponible. */
|
|
81
|
+
lastFour: string | null;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Payload del evento autopayLoaded.
|
|
85
|
+
* Se dispara al cargar las adhesiones activas y cada vez que el conjunto cambia
|
|
86
|
+
* (refetch, polling o tras una desadhesión), para que el host mantenga su conteo
|
|
87
|
+
* sincronizado. No se dispara durante la carga ni ante un error de carga.
|
|
88
|
+
*/
|
|
89
|
+
interface TapipayAutopayLoadedEvent {
|
|
90
|
+
/** Cantidad de adhesiones activas. */
|
|
91
|
+
count: number;
|
|
92
|
+
/** Tipos de medio presentes entre las adhesiones activas (sin duplicados). */
|
|
93
|
+
mediaTypes: TapipayAutopayMediaType[];
|
|
94
|
+
/** Resumen mínimo por adhesión activa. */
|
|
95
|
+
adhesions: TapipayAutopayAdhesionSummary[];
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Payload del evento autopayRemoved.
|
|
99
|
+
* El usuario desadhirió un medio con éxito.
|
|
100
|
+
*/
|
|
101
|
+
interface TapipayAutopayRemovedEvent {
|
|
102
|
+
/** Hash opaco del identificador de la adhesión desadherida. */
|
|
103
|
+
id: string;
|
|
104
|
+
/** Tipo de medio de la adhesión desadherida. */
|
|
105
|
+
mediaType: TapipayAutopayMediaType;
|
|
106
|
+
/** Últimos 4 dígitos del medio desadherido. `null` si no aplica. */
|
|
107
|
+
lastFour: string | null;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Payload del evento autopayError.
|
|
111
|
+
* Fallo de carga de adhesiones o de desadhesión. El mensaje es neutral: nunca
|
|
112
|
+
* incluye PII ni detalle de credenciales.
|
|
113
|
+
*/
|
|
114
|
+
interface TapipayAutopayErrorEvent {
|
|
115
|
+
/** En qué fase ocurrió el fallo. */
|
|
116
|
+
stage: "load" | "remove";
|
|
117
|
+
/** Mensaje neutral para el host. */
|
|
118
|
+
message: string;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Instancia del SDK TapiPay expuesta en window.tapipay y retornada por loadTapipay().
|
|
122
|
+
*/
|
|
123
|
+
interface TapipayInstance {
|
|
124
|
+
initialize(options: TapipayOptions): void;
|
|
125
|
+
destroy(container: string | HTMLElement): void;
|
|
126
|
+
on(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
|
|
127
|
+
on(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
|
|
128
|
+
on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
129
|
+
on(event: "autopayLoaded", handler: (data: TapipayAutopayLoadedEvent) => void): void;
|
|
130
|
+
on(event: "autopayRemoved", handler: (data: TapipayAutopayRemovedEvent) => void): void;
|
|
131
|
+
on(event: "autopayError", handler: (data: TapipayAutopayErrorEvent) => void): void;
|
|
132
|
+
off(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
|
|
133
|
+
off(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
|
|
134
|
+
off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
135
|
+
off(event: "autopayLoaded", handler: (data: TapipayAutopayLoadedEvent) => void): void;
|
|
136
|
+
off(event: "autopayRemoved", handler: (data: TapipayAutopayRemovedEvent) => void): void;
|
|
137
|
+
off(event: "autopayError", handler: (data: TapipayAutopayErrorEvent) => void): void;
|
|
138
|
+
off(event: string, handler: (...args: unknown[]) => unknown): void;
|
|
139
|
+
/** Cola interna usada por el stub antes de que cargue el SDK real. */
|
|
140
|
+
_q?: [string, unknown[]][];
|
|
141
|
+
}
|
|
142
|
+
declare global {
|
|
143
|
+
interface Window {
|
|
144
|
+
tapipay?: TapipayInstance;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayAutopayAdhesionSummary as a, TapipayAutopayErrorEvent as b, TapipayAutopayLoadedEvent as c, TapipayAutopayMediaType as d, TapipayAutopayRemovedEvent as e, TapipayEnvironment as f, TapipayOptions as g, TapipayPaymentCancelledEvent as h, TapipayPaymentSubmittedEvent as i, TapipayPaymentWindowOpenedEvent as j, TapipayView as k };
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Entorno de ejecución del SDK.
|
|
3
|
+
* - `'production'`: carga desde https://app.tapipay.la/embed.js (default)
|
|
4
|
+
* - `'homo'`: carga desde https://homo.tapipay.la/embed.js
|
|
5
|
+
*/
|
|
6
|
+
type TapipayEnvironment = "production" | "homo";
|
|
7
|
+
/**
|
|
8
|
+
* Opciones para `loadTapipay()`.
|
|
9
|
+
*/
|
|
10
|
+
interface LoadTapipayOptions {
|
|
11
|
+
/**
|
|
12
|
+
* Entorno a usar. Por defecto `'production'`.
|
|
13
|
+
* Para homologación usar `'homo'`.
|
|
14
|
+
*/
|
|
15
|
+
environment?: TapipayEnvironment;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Vista a montar en el widget.
|
|
19
|
+
* - `'payments'` (default si se omite): medios de pago / pago de deuda.
|
|
20
|
+
* - `'autopay'`: gestión de adhesiones (ver domiciliación y desadherirse).
|
|
21
|
+
*/
|
|
22
|
+
type TapipayView = "payments" | "autopay";
|
|
23
|
+
/**
|
|
24
|
+
* Opciones requeridas para montar el widget TapiPay.
|
|
25
|
+
*/
|
|
26
|
+
interface TapipayOptions {
|
|
27
|
+
/** Selector CSS o elemento DOM donde se montará el widget. */
|
|
28
|
+
container: string | HTMLElement;
|
|
29
|
+
/** Alias de la Organización configurado en el dashboard de TapiPay (ej. "acme"). Corresponde al campo "Alias" en Configuración → Organización. */
|
|
30
|
+
organization: string;
|
|
31
|
+
/** Identificador del cliente en el sistema del cliente (ej. "CLI-001"). */
|
|
32
|
+
identifier: string;
|
|
33
|
+
/** ID externo de la deuda a preseleccionar (ej. número de factura). Aplica a la vista de pagos. */
|
|
34
|
+
externalRequestId?: string;
|
|
35
|
+
/** Estrategia de selección automática de deuda. Aplica a la vista de pagos. */
|
|
36
|
+
selectionStrategy?: "oldestCreated";
|
|
37
|
+
/** Vista a montar. Por defecto la vista de pagos. Usar `'autopay'` para la gestión de adhesiones. */
|
|
38
|
+
view?: TapipayView;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Payload del evento paymentWindowOpened.
|
|
42
|
+
* El popup de Yuno fue abierto exitosamente.
|
|
43
|
+
*/
|
|
44
|
+
interface TapipayPaymentWindowOpenedEvent {
|
|
45
|
+
type: "paymentWindowOpened";
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Payload del evento paymentSubmitted.
|
|
49
|
+
* El usuario completó el formulario de Yuno y fue redirigido al callback.
|
|
50
|
+
* El estado real del pago se confirma vía webhooks en el backend.
|
|
51
|
+
*/
|
|
52
|
+
interface TapipayPaymentSubmittedEvent {
|
|
53
|
+
/** Siempre "TAPIPAY_CALLBACK" */
|
|
54
|
+
type: string;
|
|
55
|
+
/** Estado del pago: siempre "pending" */
|
|
56
|
+
status: "pending";
|
|
57
|
+
/** Parámetros que Yuno haya enviado al callback (pueden estar vacíos) */
|
|
58
|
+
data: Record<string, string>;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Payload del evento paymentCancelled.
|
|
62
|
+
* El usuario cerró el popup sin completar el flujo de pago. Sin campos adicionales.
|
|
63
|
+
*/
|
|
64
|
+
type TapipayPaymentCancelledEvent = Record<string, never>;
|
|
65
|
+
/**
|
|
66
|
+
* Tipo de medio adherido expuesto al sitio cliente.
|
|
67
|
+
* Solo se expone el tipo lógico, nunca la marca ni el banco.
|
|
68
|
+
*/
|
|
69
|
+
type TapipayAutopayMediaType = "card" | "bank_account";
|
|
70
|
+
/**
|
|
71
|
+
* Resumen mínimo y seguro de una adhesión activa.
|
|
72
|
+
* Privacidad: solo tipo de medio + últimos 4 dígitos. El `id` es un hash opaco
|
|
73
|
+
* del identificador interno de la adhesión (nunca el id crudo).
|
|
74
|
+
*/
|
|
75
|
+
interface TapipayAutopayAdhesionSummary {
|
|
76
|
+
/** Hash opaco del identificador de la adhesión. */
|
|
77
|
+
id: string;
|
|
78
|
+
/** Tipo de medio adherido. */
|
|
79
|
+
mediaType: TapipayAutopayMediaType;
|
|
80
|
+
/** Últimos 4 dígitos de la tarjeta o CLABE. `null` si no aplica/disponible. */
|
|
81
|
+
lastFour: string | null;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Payload del evento autopayLoaded.
|
|
85
|
+
* Se dispara al cargar las adhesiones activas y cada vez que el conjunto cambia
|
|
86
|
+
* (refetch, polling o tras una desadhesión), para que el host mantenga su conteo
|
|
87
|
+
* sincronizado. No se dispara durante la carga ni ante un error de carga.
|
|
88
|
+
*/
|
|
89
|
+
interface TapipayAutopayLoadedEvent {
|
|
90
|
+
/** Cantidad de adhesiones activas. */
|
|
91
|
+
count: number;
|
|
92
|
+
/** Tipos de medio presentes entre las adhesiones activas (sin duplicados). */
|
|
93
|
+
mediaTypes: TapipayAutopayMediaType[];
|
|
94
|
+
/** Resumen mínimo por adhesión activa. */
|
|
95
|
+
adhesions: TapipayAutopayAdhesionSummary[];
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Payload del evento autopayRemoved.
|
|
99
|
+
* El usuario desadhirió un medio con éxito.
|
|
100
|
+
*/
|
|
101
|
+
interface TapipayAutopayRemovedEvent {
|
|
102
|
+
/** Hash opaco del identificador de la adhesión desadherida. */
|
|
103
|
+
id: string;
|
|
104
|
+
/** Tipo de medio de la adhesión desadherida. */
|
|
105
|
+
mediaType: TapipayAutopayMediaType;
|
|
106
|
+
/** Últimos 4 dígitos del medio desadherido. `null` si no aplica. */
|
|
107
|
+
lastFour: string | null;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Payload del evento autopayError.
|
|
111
|
+
* Fallo de carga de adhesiones o de desadhesión. El mensaje es neutral: nunca
|
|
112
|
+
* incluye PII ni detalle de credenciales.
|
|
113
|
+
*/
|
|
114
|
+
interface TapipayAutopayErrorEvent {
|
|
115
|
+
/** En qué fase ocurrió el fallo. */
|
|
116
|
+
stage: "load" | "remove";
|
|
117
|
+
/** Mensaje neutral para el host. */
|
|
118
|
+
message: string;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Instancia del SDK TapiPay expuesta en window.tapipay y retornada por loadTapipay().
|
|
122
|
+
*/
|
|
123
|
+
interface TapipayInstance {
|
|
124
|
+
initialize(options: TapipayOptions): void;
|
|
125
|
+
destroy(container: string | HTMLElement): void;
|
|
126
|
+
on(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
|
|
127
|
+
on(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
|
|
128
|
+
on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
129
|
+
on(event: "autopayLoaded", handler: (data: TapipayAutopayLoadedEvent) => void): void;
|
|
130
|
+
on(event: "autopayRemoved", handler: (data: TapipayAutopayRemovedEvent) => void): void;
|
|
131
|
+
on(event: "autopayError", handler: (data: TapipayAutopayErrorEvent) => void): void;
|
|
132
|
+
off(event: "paymentWindowOpened", handler: (data: TapipayPaymentWindowOpenedEvent) => void): void;
|
|
133
|
+
off(event: "paymentSubmitted", handler: (data: TapipayPaymentSubmittedEvent) => void): void;
|
|
134
|
+
off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
135
|
+
off(event: "autopayLoaded", handler: (data: TapipayAutopayLoadedEvent) => void): void;
|
|
136
|
+
off(event: "autopayRemoved", handler: (data: TapipayAutopayRemovedEvent) => void): void;
|
|
137
|
+
off(event: "autopayError", handler: (data: TapipayAutopayErrorEvent) => void): void;
|
|
138
|
+
off(event: string, handler: (...args: unknown[]) => unknown): void;
|
|
139
|
+
/** Cola interna usada por el stub antes de que cargue el SDK real. */
|
|
140
|
+
_q?: [string, unknown[]][];
|
|
141
|
+
}
|
|
142
|
+
declare global {
|
|
143
|
+
interface Window {
|
|
144
|
+
tapipay?: TapipayInstance;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayAutopayAdhesionSummary as a, TapipayAutopayErrorEvent as b, TapipayAutopayLoadedEvent as c, TapipayAutopayMediaType as d, TapipayAutopayRemovedEvent as e, TapipayEnvironment as f, TapipayOptions as g, TapipayPaymentCancelledEvent as h, TapipayPaymentSubmittedEvent as i, TapipayPaymentWindowOpenedEvent as j, TapipayView as k };
|
package/package.json
CHANGED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Entorno de ejecución del SDK.
|
|
3
|
-
* - `'production'`: carga desde https://app.tapipay.la/embed.js (default)
|
|
4
|
-
* - `'homo'`: carga desde https://homo.tapipay.la/embed.js
|
|
5
|
-
*/
|
|
6
|
-
type TapipayEnvironment = "production" | "homo";
|
|
7
|
-
/**
|
|
8
|
-
* Opciones para `loadTapipay()`.
|
|
9
|
-
*/
|
|
10
|
-
interface LoadTapipayOptions {
|
|
11
|
-
/**
|
|
12
|
-
* Entorno a usar. Por defecto `'production'`.
|
|
13
|
-
* Para homologación usar `'homo'`.
|
|
14
|
-
*/
|
|
15
|
-
environment?: TapipayEnvironment;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Opciones requeridas para montar el widget TapiPay.
|
|
19
|
-
*/
|
|
20
|
-
interface TapipayOptions {
|
|
21
|
-
/** Selector CSS o elemento DOM donde se montará el widget. */
|
|
22
|
-
container: string | HTMLElement;
|
|
23
|
-
/** Alias de la Organización configurado en el dashboard de TapiPay (ej. "acme"). Corresponde al campo "Alias" en Configuración → Organización. */
|
|
24
|
-
organization: string;
|
|
25
|
-
/** Identificador del cliente en el sistema del cliente (ej. "CLI-001"). */
|
|
26
|
-
identifier: string;
|
|
27
|
-
/** ID externo de la deuda a preseleccionar (ej. número de factura). */
|
|
28
|
-
externalRequestId?: string;
|
|
29
|
-
/** Estrategia de selección automática de deuda. */
|
|
30
|
-
selectionStrategy?: "oldestCreated";
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Payload del evento paymentPending.
|
|
34
|
-
* El usuario completó el flujo de Yuno; el pago está en proceso.
|
|
35
|
-
* El estado real del pago se confirma vía webhooks en el backend.
|
|
36
|
-
*/
|
|
37
|
-
interface TapipayPaymentPendingEvent {
|
|
38
|
-
/** Siempre "TAPIPAY_CALLBACK" */
|
|
39
|
-
type: string;
|
|
40
|
-
/** Estado del pago: siempre "pending" */
|
|
41
|
-
status: "pending";
|
|
42
|
-
/** Parámetros que Yuno haya enviado al callback (pueden estar vacíos) */
|
|
43
|
-
data: Record<string, string>;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Payload del evento paymentCancelled.
|
|
47
|
-
* El usuario cerró el popup sin completar el flujo de pago.
|
|
48
|
-
*/
|
|
49
|
-
type TapipayPaymentCancelledEvent = {};
|
|
50
|
-
/**
|
|
51
|
-
* Instancia del SDK TapiPay expuesta en window.tapipay y retornada por loadTapipay().
|
|
52
|
-
*/
|
|
53
|
-
interface TapipayInstance {
|
|
54
|
-
initialize(options: TapipayOptions): void;
|
|
55
|
-
destroy(container: string | HTMLElement): void;
|
|
56
|
-
on(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
|
|
57
|
-
on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
58
|
-
off(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
|
|
59
|
-
off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
60
|
-
off(event: string, handler: (...args: unknown[]) => unknown): void;
|
|
61
|
-
/** Cola interna usada por el stub antes de que cargue el SDK real. */
|
|
62
|
-
_q?: [string, unknown[]][];
|
|
63
|
-
}
|
|
64
|
-
declare global {
|
|
65
|
-
interface Window {
|
|
66
|
-
tapipay?: TapipayInstance;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentPendingEvent as d };
|
package/dist/types-DmkYbkBI.d.ts
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Entorno de ejecución del SDK.
|
|
3
|
-
* - `'production'`: carga desde https://app.tapipay.la/embed.js (default)
|
|
4
|
-
* - `'homo'`: carga desde https://homo.tapipay.la/embed.js
|
|
5
|
-
*/
|
|
6
|
-
type TapipayEnvironment = "production" | "homo";
|
|
7
|
-
/**
|
|
8
|
-
* Opciones para `loadTapipay()`.
|
|
9
|
-
*/
|
|
10
|
-
interface LoadTapipayOptions {
|
|
11
|
-
/**
|
|
12
|
-
* Entorno a usar. Por defecto `'production'`.
|
|
13
|
-
* Para homologación usar `'homo'`.
|
|
14
|
-
*/
|
|
15
|
-
environment?: TapipayEnvironment;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Opciones requeridas para montar el widget TapiPay.
|
|
19
|
-
*/
|
|
20
|
-
interface TapipayOptions {
|
|
21
|
-
/** Selector CSS o elemento DOM donde se montará el widget. */
|
|
22
|
-
container: string | HTMLElement;
|
|
23
|
-
/** Alias de la Organización configurado en el dashboard de TapiPay (ej. "acme"). Corresponde al campo "Alias" en Configuración → Organización. */
|
|
24
|
-
organization: string;
|
|
25
|
-
/** Identificador del cliente en el sistema del cliente (ej. "CLI-001"). */
|
|
26
|
-
identifier: string;
|
|
27
|
-
/** ID externo de la deuda a preseleccionar (ej. número de factura). */
|
|
28
|
-
externalRequestId?: string;
|
|
29
|
-
/** Estrategia de selección automática de deuda. */
|
|
30
|
-
selectionStrategy?: "oldestCreated";
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Payload del evento paymentPending.
|
|
34
|
-
* El usuario completó el flujo de Yuno; el pago está en proceso.
|
|
35
|
-
* El estado real del pago se confirma vía webhooks en el backend.
|
|
36
|
-
*/
|
|
37
|
-
interface TapipayPaymentPendingEvent {
|
|
38
|
-
/** Siempre "TAPIPAY_CALLBACK" */
|
|
39
|
-
type: string;
|
|
40
|
-
/** Estado del pago: siempre "pending" */
|
|
41
|
-
status: "pending";
|
|
42
|
-
/** Parámetros que Yuno haya enviado al callback (pueden estar vacíos) */
|
|
43
|
-
data: Record<string, string>;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Payload del evento paymentCancelled.
|
|
47
|
-
* El usuario cerró el popup sin completar el flujo de pago.
|
|
48
|
-
*/
|
|
49
|
-
type TapipayPaymentCancelledEvent = {};
|
|
50
|
-
/**
|
|
51
|
-
* Instancia del SDK TapiPay expuesta en window.tapipay y retornada por loadTapipay().
|
|
52
|
-
*/
|
|
53
|
-
interface TapipayInstance {
|
|
54
|
-
initialize(options: TapipayOptions): void;
|
|
55
|
-
destroy(container: string | HTMLElement): void;
|
|
56
|
-
on(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
|
|
57
|
-
on(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
58
|
-
off(event: "paymentPending", handler: (data: TapipayPaymentPendingEvent) => void): void;
|
|
59
|
-
off(event: "paymentCancelled", handler: (data: TapipayPaymentCancelledEvent) => void): void;
|
|
60
|
-
off(event: string, handler: (...args: unknown[]) => unknown): void;
|
|
61
|
-
/** Cola interna usada por el stub antes de que cargue el SDK real. */
|
|
62
|
-
_q?: [string, unknown[]][];
|
|
63
|
-
}
|
|
64
|
-
declare global {
|
|
65
|
-
interface Window {
|
|
66
|
-
tapipay?: TapipayInstance;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export type { LoadTapipayOptions as L, TapipayInstance as T, TapipayEnvironment as a, TapipayOptions as b, TapipayPaymentCancelledEvent as c, TapipayPaymentPendingEvent as d };
|