@bloque/payments-core 0.0.12 → 0.1.1

package/README.md

@@ -8,15 +8,26 @@ Core JavaScript library for integrating Bloque hosted checkout into any web appl
 pnpm install @bloque/payments-core
 ```
 
+## Authentication
+
+The checkout component accepts two browser-safe credentials:
+
+| Option | Required | Description |
+|--------|----------|-------------|
+| `publishableKey` | Yes | Your `pk_test_*` / `pk_live_*` key — identifies the merchant |
+| `clientSecret` | Recommended | A scoped JWT from `bloque.checkout.create()` — authorizes payment execution |
+
+> `publicApiKey` is still accepted for backward compatibility but is deprecated in favor of `publishableKey`.
+
 ## Quick Start
 
 ```javascript
 import { createCheckout } from '@bloque/payments-core';
 
-// First, create a payment intent using @bloque/payments on your backend
-// Then use the checkout_id to mount the checkout
 const checkout = createCheckout({
   checkoutId: 'checkout_123abc',
+  publishableKey: 'pk_test_...',
+  clientSecret: 'eyJ...',       // from your backend
   container: '#checkout-container',
   onSuccess: (data) => {
     console.log('Payment successful!', data);
@@ -30,6 +41,25 @@ const checkout = createCheckout({
 checkout.destroy();
 ```
 
+## 3D Secure
+
+When the hosted checkout triggers a 3DS challenge, the overlay is rendered at the **parent page** level (not inside the checkout iframe) via `postMessage`:
+
+```javascript
+const checkout = createCheckout({
+  checkoutId: 'checkout_123abc',
+  publishableKey: 'pk_test_...',
+  clientSecret: 'eyJ...',
+  container: '#checkout-container',
+  threeDsAuthType: 'challenge_v2', // sandbox only
+  onThreeDSChallenge: () => {
+    console.log('3DS challenge overlay is visible');
+  },
+  onSuccess: (data) => console.log('ok', data),
+  onError: (err) => console.error(err),
+});
+```
+
 ## Documentation
 
 For complete documentation, examples, and API reference, visit:

package/dist/assets/mc-id-check-logo-data-uri.d.ts

@@ -0,0 +1,2 @@
+/** Mastercard ID Check logo (from buy checkout) as a data URI for 3DS splash UI. */
+export declare const MC_ID_CHECK_LOGO_DATA_URI: string;

package/dist/checkout.d.ts

@@ -5,6 +5,11 @@ export declare class BloqueCheckout {
     private options;
     private messageListener;
     private isReady;
+    /** Full-screen 3DS overlay mounted on document.body (avoids nested iframes). */
+    private threeDsOverlay;
+    private threeDsTimers;
+    private threeDsContentEl;
+    private threeDsStatusEl;
     /**
      * Initialize global configuration for all BloqueCheckout instances
      * This allows you to set publicApiKey and mode once instead of passing them to every checkout
@@ -24,7 +29,14 @@ export declare class BloqueCheckout {
     mount(container: HTMLElement | string): void;
     private setupMessageListener;
     private handleCheckoutReady;
+    private clearThreeDsTimers;
+    private removeThreeDsOverlay;
+    private setThreeDsStatus;
+    private showMcLogoInContent;
+    private handleThreeDSChallenge;
     private handlePaymentResult;
+    private finishThreeDsThenDispatch;
+    private dispatchPaymentResult;
     private handlePaymentError;
     isCheckoutReady(): boolean;
     getIframe(): HTMLIFrameElement | null;

package/dist/index.cjs

@@ -28,13 +28,26 @@ __webpack_require__.d(__webpack_exports__, {
     createCheckout: ()=>createCheckout,
     init: ()=>init
 });
+const MC_ID_CHECK_LOGO_DATA_URI = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.16287 144"><rect width="504.16287" height="144" fill="none"/><rect x="78.4951" y="43.6968" width="31.5" height="56.6064" fill="#ff5f00"/><path d="M224.41386,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,224.41386,306Z" transform="translate(-143.91856 -234)" fill="#eb001b"/><path d="M296.409,306a35.99867,35.99867,0,0,1-58.24521,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,296.409,306Z" transform="translate(-143.91856 -234)" fill="#f79e1b"/><path d="M292.97436,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.4196.9611-.4197-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.26711l.39349-.911v1.0563Z" transform="translate(-143.91856 -234)" fill="#f79e1b"/><polygon points="189.157 108.202 187.824 108.202 187.824 96.055 187.824 71.759 187.824 47.463 187.824 35.316 189.157 35.316 189.157 59.611 189.157 83.907 189.157 108.202"/><path d="M369.97109,328.30869h-3.74122V285.37558h3.74122Zm27.293-42.93311a29.13247,29.13247,0,0,1,9.66016,1.50244,20.54648,20.54648,0,0,1,7.29883,4.29346,18.82,18.82,0,0,1,4.62988,6.76172,25.2182,25.2182,0,0,1,0,17.81738,18.81762,18.81762,0,0,1-4.62988,6.76221,20.53928,20.53928,0,0,1-7.29883,4.29346,29.11984,29.11984,0,0,1-9.66016,1.50244H381.59316V285.37558Zm-11.92968,3.55713v35.81885h11.92968a24.72126,24.72126,0,0,0,8.28028-1.27295,16.77648,16.77648,0,0,0,6.041-3.603,15.0198,15.0198,0,0,0,3.71094-5.64306,22.35805,22.35805,0,0,0,0-14.78125,15.15681,15.15681,0,0,0-3.71094-5.65772,16.49932,16.49932,0,0,0-6.041-3.60351,25.01066,25.01066,0,0,0-8.28028-1.25733Zm78.6289-4.04785a22.97654,22.97654,0,0,1,5.33692.61328,21.59063,21.59063,0,0,1,4.8291,1.76319,19.26143,19.26143,0,0,1,4.0791,2.77539,17.01572,17.01572,0,0,1,3.1123,3.68017l-3.12793,2.085a15.116,15.116,0,0,0-2.62207-3.03564,16.4616,16.4616,0,0,0-3.34277-2.3003,17.16135,17.16135,0,0,0-3.9248-1.45654,18.46749,18.46749,0,0,0-4.33985-.50586,19.03537,19.03537,0,0,0-7.12988,1.31836,16.99574,16.99574,0,0,0-5.73438,3.7417,17.48439,17.48439,0,0,0-3.833,5.7959,20.75862,20.75862,0,0,0,0,14.96533,17.47928,17.47928,0,0,0,3.833,5.7959,16.98717,16.98717,0,0,0,5.73438,3.74121,19.01623,19.01623,0,0,0,7.12988,1.31885,18.82191,18.82191,0,0,0,4.32422-.49072,16.68442,16.68442,0,0,0,3.91016-1.44141,16.42818,16.42818,0,0,0,3.34277-2.2998,14.76727,14.76727,0,0,0,2.62207-3.0669l3.06641,2.23877a18.18515,18.18515,0,0,1-3.17383,3.61865,19.8084,19.8084,0,0,1-4.04785,2.72949,21.03046,21.03046,0,0,1-4.76856,1.73243,23.97561,23.97561,0,0,1-14-1.02735,21.025,21.025,0,0,1-6.97656-4.52343,20.74492,20.74492,0,0,1-4.61523-6.93067,24.37931,24.37931,0,0,1,0-17.74023,20.719,20.719,0,0,1,4.61523-6.94629,21.03249,21.03249,0,0,1,6.97656-4.52344A23.13114,23.13114,0,0,1,463.96327,284.88486Zm28.85742,19.56494a11.0293,11.0293,0,0,1,2.00879-2.45312,10.72962,10.72962,0,0,1,2.499-1.70215,12.47653,12.47653,0,0,1,2.82129-.981,13.73243,13.73243,0,0,1,2.94433-.32226,14.39955,14.39955,0,0,1,4.9375.8125,11.13893,11.13893,0,0,1,3.84863,2.31543,10.13945,10.13945,0,0,1,2.48438,3.66455,12.79658,12.79658,0,0,1,.874,4.83007v17.69483h-3.49609v-16.6211a11.82475,11.82475,0,0,0-.61328-3.92578,7.84633,7.84633,0,0,0-1.80957-2.959,7.9592,7.9592,0,0,0-2.91309-1.85547,11.13969,11.13969,0,0,0-3.92578-.644,10.2964,10.2964,0,0,0-3.78711.68994,9.05794,9.05794,0,0,0-3.0664,1.96289,9.23828,9.23828,0,0,0-2.05469,3.03564,9.78042,9.78042,0,0,0-.752,3.8794v16.4375H489.3246V284.14853h3.49609Zm43.21-5.45849a13.11521,13.11521,0,0,1,5.35058,1.08886,12.68765,12.68765,0,0,1,4.2627,3.03565,14.43555,14.43555,0,0,1,2.83691,4.66162,16.863,16.863,0,0,1,1.07324,5.93408c0,.26563-.00488.5166-.01465.751q-.01611.353-.04589.69043H525.29726a12.40913,12.40913,0,0,0,1.11914,4.477,10.56862,10.56862,0,0,0,2.43847,3.32715,10.27766,10.27766,0,0,0,3.44922,2.07031,12.11186,12.11186,0,0,0,4.15528.70508,12.80778,12.80778,0,0,0,5.42871-1.104,15.199,15.199,0,0,0,4.32324-3.00537l1.87109,2.39209a17.14471,17.14471,0,0,1-2.80566,2.30029,14.98357,14.98357,0,0,1-2.91406,1.47168,14.37333,14.37333,0,0,1-3.02051.76661,22.32086,22.32086,0,0,1-3.09668.21484,15.28005,15.28005,0,0,1-5.82715-1.08887,13.5515,13.5515,0,0,1-4.59961-3.05127,13.79423,13.79423,0,0,1-3.00586-4.69189,16.37017,16.37017,0,0,1-1.07324-6.04151A16.12411,16.12411,0,0,1,522.82851,307.9a14.25392,14.25392,0,0,1,3.00488-4.72266,13.57607,13.57607,0,0,1,4.53906-3.082A14.43287,14.43287,0,0,1,536.03066,298.99131Zm-.06153,3.09716a10.50706,10.50706,0,0,0-4.0332.75147,10.10774,10.10774,0,0,0-3.2041,2.08545,10.81339,10.81339,0,0,0-2.25391,3.17383,12.58891,12.58891,0,0,0-1.11914,4.04834h20.63867a12.478,12.478,0,0,0-1.01269-4.09424,10.31139,10.31139,0,0,0-2.16211-3.17383,9.61078,9.61078,0,0,0-6.85352-2.791Zm33.70117-3.09716a15.28282,15.28282,0,0,1,5.96485,1.1499,12.75921,12.75921,0,0,1,4.67676,3.32763l-2.26954,2.36133a12.53947,12.53947,0,0,0-3.78711-2.62207,11.37194,11.37194,0,0,0-4.67675-.93554,11.053,11.053,0,0,0-4.40039.874,10.80754,10.80754,0,0,0-3.542,2.42285,11.07186,11.07186,0,0,0-2.34668,3.67969,13.22753,13.22753,0,0,0,0,9.292,10.74991,10.74991,0,0,0,5.88868,6.07227,11.053,11.053,0,0,0,4.40039.874,11.31977,11.31977,0,0,0,4.73828-.98145,13.16026,13.16026,0,0,0,3.81738-2.60644l2.17774,2.39209a13.07136,13.07136,0,0,1-4.69239,3.32715,16.10337,16.10337,0,0,1-11.91406.01513,13.92431,13.92431,0,0,1-7.72754-7.835,16.58924,16.58924,0,0,1,0-11.82226,13.88959,13.88959,0,0,1,7.72754-7.85059A15.3168,15.3168,0,0,1,569.6703,298.99131Zm21.15918,12.63476h4.69239l12.14355-12.1748h4.416l-13.73828,13.61621,13.98339,15.24121h-4.44629l-12.35839-13.52393h-4.69239v13.52393h-3.49609V284.14853h3.49609Z" transform="translate(-143.91856 -234)"/></svg>');
 const DEFAULT_CHECKOUT_URL = 'https://payments.bloque.app/checkout';
+function isUrl(s) {
+    return /^https?:\/\//i.test(s.trim());
+}
+function decodeHtmlEntities(encoded) {
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = encoded;
+    return textarea.value;
+}
 class BloqueCheckout {
     static globalConfig = null;
     iframe = null;
     options;
     messageListener = null;
     isReady = false;
+    threeDsOverlay = null;
+    threeDsTimers = [];
+    threeDsContentEl = null;
+    threeDsStatusEl = null;
     static init(config) {
         BloqueCheckout.globalConfig = config;
     }
@@ -43,13 +56,15 @@ class BloqueCheckout {
     }
     constructor(options){
         if (!options.checkoutId) throw new Error('[BloqueCheckout] checkoutId is required');
-        const publicApiKey = options.publicApiKey || BloqueCheckout.globalConfig?.publicApiKey;
+        const publishableKey = options.publishableKey || options.publicApiKey || BloqueCheckout.globalConfig?.publishableKey || BloqueCheckout.globalConfig?.publicApiKey;
         const mode = options.mode || BloqueCheckout.globalConfig?.mode || 'production';
         const checkoutUrl = options.checkoutUrl || BloqueCheckout.globalConfig?.checkoutUrl || DEFAULT_CHECKOUT_URL;
-        if (!publicApiKey) throw new Error('[BloqueCheckout] publicApiKey is required. Either pass it as an option or call BloqueCheckout.init() first.');
+        if (!publishableKey) throw new Error('[BloqueCheckout] publishableKey (or publicApiKey) is required. Either pass it as an option or call BloqueCheckout.init() first.');
         this.options = {
             checkoutId: options.checkoutId,
-            publicApiKey,
+            clientSecret: options.clientSecret,
+            publishableKey,
+            publicApiKey: publishableKey,
             mode,
             checkoutUrl,
             appearance: options.appearance,
@@ -61,7 +76,9 @@ class BloqueCheckout {
             onSuccess: options.onSuccess,
             onError: options.onError,
             onPending: options.onPending,
-            iframeStyles: options.iframeStyles
+            iframeStyles: options.iframeStyles,
+            three_ds_auth_type: options.three_ds_auth_type,
+            onThreeDSChallenge: options.onThreeDSChallenge
         };
     }
     createIframe() {
@@ -104,11 +121,14 @@ class BloqueCheckout {
     }
     setupMessageListener() {
         this.messageListener = (event)=>{
-            const { type, data, error } = event.data || {};
+            const { type, data, error, threeDsData } = event.data || {};
             switch(type){
                 case 'checkout-ready':
                     this.handleCheckoutReady();
                     break;
+                case '3ds-challenge':
+                    this.handleThreeDSChallenge(threeDsData);
+                    break;
                 case 'payment-result':
                     if (data) this.handlePaymentResult(data);
                     break;
@@ -126,17 +146,124 @@ class BloqueCheckout {
         if (this.iframe?.contentWindow) this.iframe.contentWindow.postMessage({
             type: 'checkout-init',
             checkoutId: this.options.checkoutId,
+            clientSecret: this.options.clientSecret,
+            publishableKey: this.options.publishableKey,
             publicApiKey: this.options.publicApiKey,
-            mode: this.options.mode
+            mode: this.options.mode,
+            ...void 0 !== this.options.three_ds_auth_type ? {
+                three_ds_auth_type: this.options.three_ds_auth_type
+            } : {}
         }, '*');
         this.options.onReady?.();
     }
+    clearThreeDsTimers() {
+        for (const t of this.threeDsTimers)clearTimeout(t);
+        this.threeDsTimers = [];
+    }
+    removeThreeDsOverlay() {
+        this.clearThreeDsTimers();
+        this.threeDsContentEl = null;
+        this.threeDsStatusEl = null;
+        if (this.threeDsOverlay?.parentNode) this.threeDsOverlay.parentNode.removeChild(this.threeDsOverlay);
+        this.threeDsOverlay = null;
+    }
+    setThreeDsStatus(text) {
+        if (this.threeDsStatusEl) this.threeDsStatusEl.textContent = text;
+    }
+    showMcLogoInContent() {
+        if (!this.threeDsContentEl) return;
+        this.threeDsContentEl.replaceChildren();
+        const wrap = document.createElement('div');
+        wrap.style.cssText = 'display:flex;align-items:center;justify-content:center;width:100%;min-height:400px;background:#fff;';
+        const img = document.createElement('img');
+        img.src = MC_ID_CHECK_LOGO_DATA_URI;
+        img.alt = 'Mastercard Identity Check';
+        img.style.cssText = 'width:256px;max-width:80%;height:auto;';
+        wrap.appendChild(img);
+        this.threeDsContentEl.appendChild(wrap);
+    }
+    handleThreeDSChallenge(data) {
+        if (!data?.iframe || "u" < typeof document) return;
+        this.options.onThreeDSChallenge?.();
+        this.removeThreeDsOverlay();
+        const root = document.createElement('div');
+        root.className = 'bloque-3ds-overlay';
+        root.style.cssText = 'position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;font-family:system-ui,sans-serif;';
+        const panel = document.createElement('div');
+        panel.style.cssText = 'margin:auto;width:min(480px,96vw);max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);';
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb;';
+        const title = document.createElement('span');
+        title.textContent = 'Verificación segura';
+        title.style.cssText = 'font-weight:600;font-size:15px;color:#111827;';
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.setAttribute('aria-label', 'Cerrar');
+        closeBtn.textContent = '✕';
+        closeBtn.style.cssText = 'border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#6b7280;padding:4px 8px;';
+        closeBtn.addEventListener('click', ()=>{
+            this.removeThreeDsOverlay();
+            this.options.onError?.('3D Secure verification was cancelled');
+        });
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        const statusEl = document.createElement('div');
+        statusEl.style.cssText = 'padding:8px 16px;font-size:13px;color:#4b5563;text-align:center;';
+        statusEl.textContent = 'Iniciando verificación segura...';
+        const contentEl = document.createElement('div');
+        contentEl.style.cssText = 'flex:1;min-height:400px;border-top:1px solid #e5e7eb;';
+        panel.appendChild(header);
+        panel.appendChild(statusEl);
+        panel.appendChild(contentEl);
+        root.appendChild(panel);
+        document.body.appendChild(root);
+        this.threeDsOverlay = root;
+        this.threeDsStatusEl = statusEl;
+        this.threeDsContentEl = contentEl;
+        this.showMcLogoInContent();
+        const decoded = decodeHtmlEntities(data.iframe);
+        const splashTimer = setTimeout(()=>{
+            this.setThreeDsStatus('Complete la verificación de su banco para continuar');
+            if (!this.threeDsContentEl) return;
+            this.threeDsContentEl.replaceChildren();
+            const frameWrap = document.createElement('div');
+            frameWrap.style.cssText = 'width:100%;min-height:400px;background:#fff;';
+            const iframeEl = document.createElement('iframe');
+            iframeEl.title = '3D Secure verification';
+            iframeEl.style.cssText = 'width:100%;height:400px;border:0;display:block;';
+            if (isUrl(decoded)) {
+                iframeEl.src = decoded.trim();
+                iframeEl.setAttribute('sandbox', "allow-scripts allow-forms allow-popups allow-same-origin");
+            } else {
+                iframeEl.srcdoc = decoded;
+                iframeEl.setAttribute('sandbox', "allow-scripts allow-forms allow-popups");
+            }
+            frameWrap.appendChild(iframeEl);
+            this.threeDsContentEl.appendChild(frameWrap);
+        }, 3000);
+        this.threeDsTimers.push(splashTimer);
+    }
     handlePaymentResult(data) {
+        if (this.threeDsOverlay) return void this.finishThreeDsThenDispatch(data);
+        this.dispatchPaymentResult(data);
+    }
+    finishThreeDsThenDispatch(data) {
+        this.clearThreeDsTimers();
+        this.setThreeDsStatus('Autenticación completada, redirigiendo...');
+        this.showMcLogoInContent();
+        const t = setTimeout(()=>{
+            this.removeThreeDsOverlay();
+            this.dispatchPaymentResult(data);
+        }, 2000);
+        this.threeDsTimers.push(t);
+    }
+    dispatchPaymentResult(data) {
         if ('approved' === data.status) this.options.onSuccess?.(data);
         else if ('pending' === data.status) this.options.onPending?.(data);
         else if ('rejected' === data.status) this.options.onError?.(data.message || 'Payment was rejected');
     }
     handlePaymentError(error) {
+        if (this.threeDsOverlay) this.removeThreeDsOverlay();
         this.options.onError?.(error);
     }
     isCheckoutReady() {
@@ -154,6 +281,7 @@ class BloqueCheckout {
         };
     }
     destroy() {
+        this.removeThreeDsOverlay();
         if (this.iframe) {
             this.iframe.remove();
             this.iframe = null;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { BloqueCheckout, createCheckout, init } from './checkout';
-export type { AppearanceConfig, BloqueCheckoutOptions, BloqueInitOptions, CheckoutMessage, CheckoutMessageType, PaymentMethod, PaymentResult, } from './types';
+export type { AppearanceConfig, BloqueCheckoutOptions, BloqueInitOptions, CheckoutMessage, CheckoutMessageType, PaymentMethod, PaymentResult, ThreeDSChallengeData, } from './types';

package/dist/index.js

@@ -1,10 +1,23 @@
+const MC_ID_CHECK_LOGO_DATA_URI = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.16287 144"><rect width="504.16287" height="144" fill="none"/><rect x="78.4951" y="43.6968" width="31.5" height="56.6064" fill="#ff5f00"/><path d="M224.41386,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,224.41386,306Z" transform="translate(-143.91856 -234)" fill="#eb001b"/><path d="M296.409,306a35.99867,35.99867,0,0,1-58.24521,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,296.409,306Z" transform="translate(-143.91856 -234)" fill="#f79e1b"/><path d="M292.97436,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.4196.9611-.4197-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.26711l.39349-.911v1.0563Z" transform="translate(-143.91856 -234)" fill="#f79e1b"/><polygon points="189.157 108.202 187.824 108.202 187.824 96.055 187.824 71.759 187.824 47.463 187.824 35.316 189.157 35.316 189.157 59.611 189.157 83.907 189.157 108.202"/><path d="M369.97109,328.30869h-3.74122V285.37558h3.74122Zm27.293-42.93311a29.13247,29.13247,0,0,1,9.66016,1.50244,20.54648,20.54648,0,0,1,7.29883,4.29346,18.82,18.82,0,0,1,4.62988,6.76172,25.2182,25.2182,0,0,1,0,17.81738,18.81762,18.81762,0,0,1-4.62988,6.76221,20.53928,20.53928,0,0,1-7.29883,4.29346,29.11984,29.11984,0,0,1-9.66016,1.50244H381.59316V285.37558Zm-11.92968,3.55713v35.81885h11.92968a24.72126,24.72126,0,0,0,8.28028-1.27295,16.77648,16.77648,0,0,0,6.041-3.603,15.0198,15.0198,0,0,0,3.71094-5.64306,22.35805,22.35805,0,0,0,0-14.78125,15.15681,15.15681,0,0,0-3.71094-5.65772,16.49932,16.49932,0,0,0-6.041-3.60351,25.01066,25.01066,0,0,0-8.28028-1.25733Zm78.6289-4.04785a22.97654,22.97654,0,0,1,5.33692.61328,21.59063,21.59063,0,0,1,4.8291,1.76319,19.26143,19.26143,0,0,1,4.0791,2.77539,17.01572,17.01572,0,0,1,3.1123,3.68017l-3.12793,2.085a15.116,15.116,0,0,0-2.62207-3.03564,16.4616,16.4616,0,0,0-3.34277-2.3003,17.16135,17.16135,0,0,0-3.9248-1.45654,18.46749,18.46749,0,0,0-4.33985-.50586,19.03537,19.03537,0,0,0-7.12988,1.31836,16.99574,16.99574,0,0,0-5.73438,3.7417,17.48439,17.48439,0,0,0-3.833,5.7959,20.75862,20.75862,0,0,0,0,14.96533,17.47928,17.47928,0,0,0,3.833,5.7959,16.98717,16.98717,0,0,0,5.73438,3.74121,19.01623,19.01623,0,0,0,7.12988,1.31885,18.82191,18.82191,0,0,0,4.32422-.49072,16.68442,16.68442,0,0,0,3.91016-1.44141,16.42818,16.42818,0,0,0,3.34277-2.2998,14.76727,14.76727,0,0,0,2.62207-3.0669l3.06641,2.23877a18.18515,18.18515,0,0,1-3.17383,3.61865,19.8084,19.8084,0,0,1-4.04785,2.72949,21.03046,21.03046,0,0,1-4.76856,1.73243,23.97561,23.97561,0,0,1-14-1.02735,21.025,21.025,0,0,1-6.97656-4.52343,20.74492,20.74492,0,0,1-4.61523-6.93067,24.37931,24.37931,0,0,1,0-17.74023,20.719,20.719,0,0,1,4.61523-6.94629,21.03249,21.03249,0,0,1,6.97656-4.52344A23.13114,23.13114,0,0,1,463.96327,284.88486Zm28.85742,19.56494a11.0293,11.0293,0,0,1,2.00879-2.45312,10.72962,10.72962,0,0,1,2.499-1.70215,12.47653,12.47653,0,0,1,2.82129-.981,13.73243,13.73243,0,0,1,2.94433-.32226,14.39955,14.39955,0,0,1,4.9375.8125,11.13893,11.13893,0,0,1,3.84863,2.31543,10.13945,10.13945,0,0,1,2.48438,3.66455,12.79658,12.79658,0,0,1,.874,4.83007v17.69483h-3.49609v-16.6211a11.82475,11.82475,0,0,0-.61328-3.92578,7.84633,7.84633,0,0,0-1.80957-2.959,7.9592,7.9592,0,0,0-2.91309-1.85547,11.13969,11.13969,0,0,0-3.92578-.644,10.2964,10.2964,0,0,0-3.78711.68994,9.05794,9.05794,0,0,0-3.0664,1.96289,9.23828,9.23828,0,0,0-2.05469,3.03564,9.78042,9.78042,0,0,0-.752,3.8794v16.4375H489.3246V284.14853h3.49609Zm43.21-5.45849a13.11521,13.11521,0,0,1,5.35058,1.08886,12.68765,12.68765,0,0,1,4.2627,3.03565,14.43555,14.43555,0,0,1,2.83691,4.66162,16.863,16.863,0,0,1,1.07324,5.93408c0,.26563-.00488.5166-.01465.751q-.01611.353-.04589.69043H525.29726a12.40913,12.40913,0,0,0,1.11914,4.477,10.56862,10.56862,0,0,0,2.43847,3.32715,10.27766,10.27766,0,0,0,3.44922,2.07031,12.11186,12.11186,0,0,0,4.15528.70508,12.80778,12.80778,0,0,0,5.42871-1.104,15.199,15.199,0,0,0,4.32324-3.00537l1.87109,2.39209a17.14471,17.14471,0,0,1-2.80566,2.30029,14.98357,14.98357,0,0,1-2.91406,1.47168,14.37333,14.37333,0,0,1-3.02051.76661,22.32086,22.32086,0,0,1-3.09668.21484,15.28005,15.28005,0,0,1-5.82715-1.08887,13.5515,13.5515,0,0,1-4.59961-3.05127,13.79423,13.79423,0,0,1-3.00586-4.69189,16.37017,16.37017,0,0,1-1.07324-6.04151A16.12411,16.12411,0,0,1,522.82851,307.9a14.25392,14.25392,0,0,1,3.00488-4.72266,13.57607,13.57607,0,0,1,4.53906-3.082A14.43287,14.43287,0,0,1,536.03066,298.99131Zm-.06153,3.09716a10.50706,10.50706,0,0,0-4.0332.75147,10.10774,10.10774,0,0,0-3.2041,2.08545,10.81339,10.81339,0,0,0-2.25391,3.17383,12.58891,12.58891,0,0,0-1.11914,4.04834h20.63867a12.478,12.478,0,0,0-1.01269-4.09424,10.31139,10.31139,0,0,0-2.16211-3.17383,9.61078,9.61078,0,0,0-6.85352-2.791Zm33.70117-3.09716a15.28282,15.28282,0,0,1,5.96485,1.1499,12.75921,12.75921,0,0,1,4.67676,3.32763l-2.26954,2.36133a12.53947,12.53947,0,0,0-3.78711-2.62207,11.37194,11.37194,0,0,0-4.67675-.93554,11.053,11.053,0,0,0-4.40039.874,10.80754,10.80754,0,0,0-3.542,2.42285,11.07186,11.07186,0,0,0-2.34668,3.67969,13.22753,13.22753,0,0,0,0,9.292,10.74991,10.74991,0,0,0,5.88868,6.07227,11.053,11.053,0,0,0,4.40039.874,11.31977,11.31977,0,0,0,4.73828-.98145,13.16026,13.16026,0,0,0,3.81738-2.60644l2.17774,2.39209a13.07136,13.07136,0,0,1-4.69239,3.32715,16.10337,16.10337,0,0,1-11.91406.01513,13.92431,13.92431,0,0,1-7.72754-7.835,16.58924,16.58924,0,0,1,0-11.82226,13.88959,13.88959,0,0,1,7.72754-7.85059A15.3168,15.3168,0,0,1,569.6703,298.99131Zm21.15918,12.63476h4.69239l12.14355-12.1748h4.416l-13.73828,13.61621,13.98339,15.24121h-4.44629l-12.35839-13.52393h-4.69239v13.52393h-3.49609V284.14853h3.49609Z" transform="translate(-143.91856 -234)"/></svg>');
 const DEFAULT_CHECKOUT_URL = 'https://payments.bloque.app/checkout';
+function isUrl(s) {
+    return /^https?:\/\//i.test(s.trim());
+}
+function decodeHtmlEntities(encoded) {
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = encoded;
+    return textarea.value;
+}
 class BloqueCheckout {
     static globalConfig = null;
     iframe = null;
     options;
     messageListener = null;
     isReady = false;
+    threeDsOverlay = null;
+    threeDsTimers = [];
+    threeDsContentEl = null;
+    threeDsStatusEl = null;
     static init(config) {
         BloqueCheckout.globalConfig = config;
     }
@@ -13,13 +26,15 @@ class BloqueCheckout {
     }
     constructor(options){
         if (!options.checkoutId) throw new Error('[BloqueCheckout] checkoutId is required');
-        const publicApiKey = options.publicApiKey || BloqueCheckout.globalConfig?.publicApiKey;
+        const publishableKey = options.publishableKey || options.publicApiKey || BloqueCheckout.globalConfig?.publishableKey || BloqueCheckout.globalConfig?.publicApiKey;
         const mode = options.mode || BloqueCheckout.globalConfig?.mode || 'production';
         const checkoutUrl = options.checkoutUrl || BloqueCheckout.globalConfig?.checkoutUrl || DEFAULT_CHECKOUT_URL;
-        if (!publicApiKey) throw new Error('[BloqueCheckout] publicApiKey is required. Either pass it as an option or call BloqueCheckout.init() first.');
+        if (!publishableKey) throw new Error('[BloqueCheckout] publishableKey (or publicApiKey) is required. Either pass it as an option or call BloqueCheckout.init() first.');
         this.options = {
             checkoutId: options.checkoutId,
-            publicApiKey,
+            clientSecret: options.clientSecret,
+            publishableKey,
+            publicApiKey: publishableKey,
             mode,
             checkoutUrl,
             appearance: options.appearance,
@@ -31,7 +46,9 @@ class BloqueCheckout {
             onSuccess: options.onSuccess,
             onError: options.onError,
             onPending: options.onPending,
-            iframeStyles: options.iframeStyles
+            iframeStyles: options.iframeStyles,
+            three_ds_auth_type: options.three_ds_auth_type,
+            onThreeDSChallenge: options.onThreeDSChallenge
         };
     }
     createIframe() {
@@ -74,11 +91,14 @@ class BloqueCheckout {
     }
     setupMessageListener() {
         this.messageListener = (event)=>{
-            const { type, data, error } = event.data || {};
+            const { type, data, error, threeDsData } = event.data || {};
             switch(type){
                 case 'checkout-ready':
                     this.handleCheckoutReady();
                     break;
+                case '3ds-challenge':
+                    this.handleThreeDSChallenge(threeDsData);
+                    break;
                 case 'payment-result':
                     if (data) this.handlePaymentResult(data);
                     break;
@@ -96,17 +116,124 @@ class BloqueCheckout {
         if (this.iframe?.contentWindow) this.iframe.contentWindow.postMessage({
             type: 'checkout-init',
             checkoutId: this.options.checkoutId,
+            clientSecret: this.options.clientSecret,
+            publishableKey: this.options.publishableKey,
             publicApiKey: this.options.publicApiKey,
-            mode: this.options.mode
+            mode: this.options.mode,
+            ...void 0 !== this.options.three_ds_auth_type ? {
+                three_ds_auth_type: this.options.three_ds_auth_type
+            } : {}
         }, '*');
         this.options.onReady?.();
     }
+    clearThreeDsTimers() {
+        for (const t of this.threeDsTimers)clearTimeout(t);
+        this.threeDsTimers = [];
+    }
+    removeThreeDsOverlay() {
+        this.clearThreeDsTimers();
+        this.threeDsContentEl = null;
+        this.threeDsStatusEl = null;
+        if (this.threeDsOverlay?.parentNode) this.threeDsOverlay.parentNode.removeChild(this.threeDsOverlay);
+        this.threeDsOverlay = null;
+    }
+    setThreeDsStatus(text) {
+        if (this.threeDsStatusEl) this.threeDsStatusEl.textContent = text;
+    }
+    showMcLogoInContent() {
+        if (!this.threeDsContentEl) return;
+        this.threeDsContentEl.replaceChildren();
+        const wrap = document.createElement('div');
+        wrap.style.cssText = 'display:flex;align-items:center;justify-content:center;width:100%;min-height:400px;background:#fff;';
+        const img = document.createElement('img');
+        img.src = MC_ID_CHECK_LOGO_DATA_URI;
+        img.alt = 'Mastercard Identity Check';
+        img.style.cssText = 'width:256px;max-width:80%;height:auto;';
+        wrap.appendChild(img);
+        this.threeDsContentEl.appendChild(wrap);
+    }
+    handleThreeDSChallenge(data) {
+        if (!data?.iframe || "u" < typeof document) return;
+        this.options.onThreeDSChallenge?.();
+        this.removeThreeDsOverlay();
+        const root = document.createElement('div');
+        root.className = 'bloque-3ds-overlay';
+        root.style.cssText = 'position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;font-family:system-ui,sans-serif;';
+        const panel = document.createElement('div');
+        panel.style.cssText = 'margin:auto;width:min(480px,96vw);max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);';
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb;';
+        const title = document.createElement('span');
+        title.textContent = 'Verificación segura';
+        title.style.cssText = 'font-weight:600;font-size:15px;color:#111827;';
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.setAttribute('aria-label', 'Cerrar');
+        closeBtn.textContent = '✕';
+        closeBtn.style.cssText = 'border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#6b7280;padding:4px 8px;';
+        closeBtn.addEventListener('click', ()=>{
+            this.removeThreeDsOverlay();
+            this.options.onError?.('3D Secure verification was cancelled');
+        });
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        const statusEl = document.createElement('div');
+        statusEl.style.cssText = 'padding:8px 16px;font-size:13px;color:#4b5563;text-align:center;';
+        statusEl.textContent = 'Iniciando verificación segura...';
+        const contentEl = document.createElement('div');
+        contentEl.style.cssText = 'flex:1;min-height:400px;border-top:1px solid #e5e7eb;';
+        panel.appendChild(header);
+        panel.appendChild(statusEl);
+        panel.appendChild(contentEl);
+        root.appendChild(panel);
+        document.body.appendChild(root);
+        this.threeDsOverlay = root;
+        this.threeDsStatusEl = statusEl;
+        this.threeDsContentEl = contentEl;
+        this.showMcLogoInContent();
+        const decoded = decodeHtmlEntities(data.iframe);
+        const splashTimer = setTimeout(()=>{
+            this.setThreeDsStatus('Complete la verificación de su banco para continuar');
+            if (!this.threeDsContentEl) return;
+            this.threeDsContentEl.replaceChildren();
+            const frameWrap = document.createElement('div');
+            frameWrap.style.cssText = 'width:100%;min-height:400px;background:#fff;';
+            const iframeEl = document.createElement('iframe');
+            iframeEl.title = '3D Secure verification';
+            iframeEl.style.cssText = 'width:100%;height:400px;border:0;display:block;';
+            if (isUrl(decoded)) {
+                iframeEl.src = decoded.trim();
+                iframeEl.setAttribute('sandbox', "allow-scripts allow-forms allow-popups allow-same-origin");
+            } else {
+                iframeEl.srcdoc = decoded;
+                iframeEl.setAttribute('sandbox', "allow-scripts allow-forms allow-popups");
+            }
+            frameWrap.appendChild(iframeEl);
+            this.threeDsContentEl.appendChild(frameWrap);
+        }, 3000);
+        this.threeDsTimers.push(splashTimer);
+    }
     handlePaymentResult(data) {
+        if (this.threeDsOverlay) return void this.finishThreeDsThenDispatch(data);
+        this.dispatchPaymentResult(data);
+    }
+    finishThreeDsThenDispatch(data) {
+        this.clearThreeDsTimers();
+        this.setThreeDsStatus('Autenticación completada, redirigiendo...');
+        this.showMcLogoInContent();
+        const t = setTimeout(()=>{
+            this.removeThreeDsOverlay();
+            this.dispatchPaymentResult(data);
+        }, 2000);
+        this.threeDsTimers.push(t);
+    }
+    dispatchPaymentResult(data) {
         if ('approved' === data.status) this.options.onSuccess?.(data);
         else if ('pending' === data.status) this.options.onPending?.(data);
         else if ('rejected' === data.status) this.options.onError?.(data.message || 'Payment was rejected');
     }
     handlePaymentError(error) {
+        if (this.threeDsOverlay) this.removeThreeDsOverlay();
         this.options.onError?.(error);
     }
     isCheckoutReady() {
@@ -124,6 +251,7 @@ class BloqueCheckout {
         };
     }
     destroy() {
+        this.removeThreeDsOverlay();
         if (this.iframe) {
             this.iframe.remove();
             this.iframe = null;

package/dist/types/payment.d.ts

@@ -1,15 +1,19 @@
+/**
+ * Internal reference types. NOT exported from the @bloque/payments-core barrel.
+ * The canonical versions live in @bloque/payments.
+ */
 import type { PaymentSubmitPayload } from './payment-submit';
 export type PaymentMethodType = 'card' | 'pse' | 'cash';
 export interface CreatePaymentParams {
-    checkoutId?: string;
+    paymentUrn: string;
     payment: PaymentSubmitPayload;
 }
 export interface PaymentResponse {
     id: string;
     object: 'payment';
-    status: 'pending' | 'processing' | 'completed' | 'failed';
+    status: 'approved' | 'rejected' | 'pending';
+    message: string;
     amount: number;
     currency: string;
     created_at: string;
-    updated_at: string;
 }

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type PaymentMethod = 'card' | 'pse';
+export type PaymentMethod = 'card' | 'pse' | 'cash';
 export interface AppearanceConfig {
     /**
      * Primary color for buttons and accents
@@ -18,9 +18,11 @@ export interface AppearanceConfig {
 }
 export interface BloqueInitOptions {
     /**
-     * Your Bloque public API key
+     * Your Bloque publishable API key (pk_live_... or pk_test_...)
      */
-    publicApiKey: string;
+    publishableKey?: string;
+    /** @deprecated Use publishableKey instead */
+    publicApiKey?: string;
     /**
      * Operation mode
      * @default 'production'
@@ -38,8 +40,14 @@ export interface BloqueCheckoutOptions {
      */
     checkoutId: string;
     /**
-     * Your Bloque public API key (optional if you called BloqueCheckout.init())
+     * Checkout-scoped JWT returned from the create checkout API
+     */
+    clientSecret?: string;
+    /**
+     * Your Bloque publishable key (pk_live_... or pk_test_...)
      */
+    publishableKey?: string;
+    /** @deprecated Use publishableKey instead */
     publicApiKey?: string;
     /**
      * Operation mode (optional if you called BloqueCheckout.init())
@@ -88,6 +96,14 @@ export interface BloqueCheckoutOptions {
      * Custom CSS styles to apply to the iframe
      */
     iframeStyles?: Record<string, string>;
+    /**
+     * Sandbox-only Wompi 3DS scenario (e.g. challenge_v2). Forwarded to hosted checkout via checkout-init.
+     */
+    three_ds_auth_type?: string;
+    /**
+     * Called when the hosted checkout starts a 3DS challenge (overlay is shown in the parent page).
+     */
+    onThreeDSChallenge?: () => void;
 }
 export interface PaymentResult {
     payment_id: string;
@@ -98,10 +114,14 @@ export interface PaymentResult {
     reference: string;
     created_at: string;
 }
-export type CheckoutMessageType = 'checkout-ready' | 'checkout-init' | 'payment-result' | 'payment-error';
+export type CheckoutMessageType = 'checkout-ready' | 'checkout-init' | 'payment-result' | 'payment-error' | '3ds-challenge';
+export interface ThreeDSChallengeData {
+    iframe: string;
+}
 export interface CheckoutMessage {
     type: CheckoutMessageType;
     checkoutId?: string;
     data?: PaymentResult;
     error?: string;
+    threeDsData?: ThreeDSChallengeData;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloque/payments-core",
-  "version": "0.0.12",
+  "version": "0.1.1",
   "description": "Core utilities and types for Bloque Payments.",
   "type": "module",
   "keywords": [