@bloque/payments-react 0.0.12 → 0.1.0

package/README.md

@@ -8,15 +8,26 @@ React components for integrating Bloque hosted checkout into your React applicat
 pnpm install @bloque/payments-react
 ```
 
+## Authentication
+
+| Prop | Required | Description |
+|------|----------|-------------|
+| `publishableKey` | Yes | `pk_test_*` / `pk_live_*` — identifies the merchant (browser-safe) |
+| `clientSecret` | Recommended | Scoped JWT from `bloque.checkout.create()` — authorizes payment execution |
+
+> `publicApiKey` is still accepted for backward compatibility but is deprecated.
+
 ## Quick Start
 
 ```tsx
 import { BloqueCheckout } from '@bloque/payments-react';
 
-function CheckoutPage() {
+function CheckoutPage({ checkoutId, clientSecret }) {
   return (
     <BloqueCheckout
-      checkoutId="checkout_123abc"
+      checkoutId={checkoutId}
+      publishableKey="pk_test_..."
+      clientSecret={clientSecret}
       onSuccess={(data) => {
         console.log('Payment successful!', data);
       }}
@@ -28,6 +39,25 @@ function CheckoutPage() {
 }
 ```
 
+## 3D Secure (embedded checkout)
+
+The hosted checkout can return a 3DS challenge. `@bloque/payments-core` / React show the challenge in a **parent-page overlay** (not inside the checkout iframe) via `postMessage`.
+
+- Pass **`threeDsAuthType`** (sandbox only, e.g. `challenge_v2`) to drive Wompi sandbox scenarios.
+- Optional **`onThreeDSChallenge`** runs when the overlay opens.
+
+```tsx
+<BloqueCheckout
+  checkoutId="checkout_123abc"
+  publishableKey="pk_test_..."
+  clientSecret={clientSecret}
+  threeDsAuthType="challenge_v2"
+  onThreeDSChallenge={() => console.log('3DS started')}
+  onSuccess={(data) => console.log('ok', data)}
+  onError={(err) => console.error(err)}
+/>
+```
+
 ## Documentation
 
 For complete documentation, examples, and API reference, visit:

package/dist/bloque-checkout.d.ts

@@ -1,9 +1,17 @@
 import { type BloqueCheckoutOptions } from '@bloque/payments-core';
-export interface BloqueCheckoutProps extends Omit<BloqueCheckoutOptions, 'checkoutId'> {
+export interface BloqueCheckoutProps extends Omit<BloqueCheckoutOptions, 'checkoutId' | 'three_ds_auth_type'> {
     /**
      * The checkout ID returned from your backend after creating a checkout session
      */
     checkoutId: string;
+    /**
+     * Checkout-scoped JWT returned from the create checkout API
+     */
+    clientSecret?: string;
+    /**
+     * Sandbox-only Wompi 3DS scenario (e.g. challenge_v2).
+     */
+    threeDsAuthType?: string;
     /**
      * Additional CSS class name for the container div
      */
@@ -37,6 +45,6 @@ export interface BloqueCheckoutProps extends Omit<BloqueCheckoutOptions, 'checko
  * }
  * ```
  */
-export declare function BloqueCheckout({ checkoutId, publicApiKey, mode, checkoutUrl, appearance, showInstallments, paymentMethods, onReady, onSuccess, onError, onPending, iframeStyles, className, style, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
-export type { AppearanceConfig, BloqueCheckoutOptions, BloqueInitOptions, PaymentMethod, PaymentResult, } from '@bloque/payments-core';
+export declare function BloqueCheckout({ checkoutId, clientSecret, publishableKey, publicApiKey, mode, checkoutUrl, appearance, showInstallments, paymentMethods, onReady, onSuccess, onError, onPending, onThreeDSChallenge, threeDsAuthType, iframeStyles, className, style, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export type { AppearanceConfig, BloqueCheckoutOptions, BloqueInitOptions, PaymentMethod, PaymentResult, ThreeDSChallengeData, } from '@bloque/payments-core';
 export { BloqueCheckout as BloqueCheckoutCore, init, } from '@bloque/payments-core';

package/dist/bloque-checkout.js

@@ -1,13 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { BloqueCheckout, init } from "@bloque/payments-core";
 import { useEffect, useRef } from "react";
-function bloque_checkout_BloqueCheckout({ checkoutId, publicApiKey, mode, checkoutUrl, appearance, showInstallments, paymentMethods, onReady, onSuccess, onError, onPending, iframeStyles, className, style }) {
+function bloque_checkout_BloqueCheckout({ checkoutId, clientSecret, publishableKey, publicApiKey, mode, checkoutUrl, appearance, showInstallments, paymentMethods, onReady, onSuccess, onError, onPending, onThreeDSChallenge, threeDsAuthType, iframeStyles, className, style }) {
     const containerRef = useRef(null);
     const checkoutRef = useRef(null);
     useEffect(()=>{
         if (!containerRef.current) return;
         const checkout = new BloqueCheckout({
             checkoutId,
+            clientSecret,
+            publishableKey,
             publicApiKey,
             mode,
             checkoutUrl,
@@ -18,6 +20,8 @@ function bloque_checkout_BloqueCheckout({ checkoutId, publicApiKey, mode, checko
             onSuccess,
             onError,
             onPending,
+            onThreeDSChallenge,
+            three_ds_auth_type: threeDsAuthType,
             iframeStyles
         });
         const iframe = checkout.createIframe();
@@ -28,6 +32,8 @@ function bloque_checkout_BloqueCheckout({ checkoutId, publicApiKey, mode, checko
         };
     }, [
         checkoutId,
+        clientSecret,
+        publishableKey,
         publicApiKey,
         mode,
         checkoutUrl,
@@ -38,6 +44,8 @@ function bloque_checkout_BloqueCheckout({ checkoutId, publicApiKey, mode, checko
         onSuccess,
         onError,
         onPending,
+        onThreeDSChallenge,
+        threeDsAuthType,
         iframeStyles
     ]);
     return /*#__PURE__*/ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloque/payments-react",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "React wrapper for Bloque payments web components",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +34,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@bloque/payments-core": "0.0.12"
+    "@bloque/payments-core": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",