@bloque/payments-react 0.0.7 → 0.0.8

package/README.md

@@ -1,318 +1,38 @@
 # @bloque/payments-react
 
-React component that embeds the Bloque hosted checkout.
+React components for integrating Bloque hosted checkout into your React application.
 
 ## Installation
 
 ```bash
-# Using bun
-bun add @bloque/payments-react
-
-# Using pnpm
-pnpm add @bloque/payments-react
-
-# Using npm
-npm install @bloque/payments-react
-
-# Using yarn
-yarn add @bloque/payments-react
-```
-
-## Usage
-
-### How it Works
-
-```
-┌─────────────────┐      ┌─────────────────┐      ┌──────────────┐
-│ React Component │─────▶│  Your Backend   │─────▶│  Bloque API  │
-│  (Frontend)     │      │   (SDK Usage)   │      │              │
-└─────────────────┘      └─────────────────┘      └──────────────┘
-```
-
-1. **React Component** captures payment data from user
-2. **`onSubmit`** sends complete `PaymentSubmitPayload` to your backend
-3. **Your Backend** uses `@bloque/payments` to process the payment
-
-### Basic Example
-
-```tsx
-import { BloqueCheckout } from '@bloque/payments-react';
-import type { PaymentSubmitPayload } from '@bloque/payments-react';
-
-function App() {
-  const handleSubmit = async (payload: PaymentSubmitPayload) => {
-    const response = await fetch('/api/payments', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-
-    if (!response.ok) {
-      throw new Error('Payment failed');
-    }
-
-    return response.json();
-  };
-
-  return (
-    <BloqueCheckout
-      onSubmit={handleSubmit}
-      requireEmail={true}
-    />
-  );
-}
+pnpm install @bloque/payments-react
 ```
 
-**Your Backend (using `@bloque/payments`):**
-
-```typescript
-import { Bloque } from '@bloque/payments';
-
-const bloque = new Bloque({
-  apiKey: process.env.BLOQUE_API_KEY!,
-  mode: 'production',
-});
-
-app.post('/api/payments', async (req, res) => {
-  const payload = req.body;
-
-  const payment = await bloque.payments.create({
-    payment: payload,
-  });
-
-  res.json(payment);
-});
-```
-
-### With Configuration and Appearance
+## Quick Start
 
 ```tsx
 import { BloqueCheckout } from '@bloque/payments-react';
-import type {
-  CheckoutConfig,
-  AppearanceConfig,
-  PaymentSubmitPayload,
-} from '@bloque/payments-react';
 
 function CheckoutPage() {
-  const config: CheckoutConfig = {
-    payment_methods: ['card', 'pse'],
-    amount: 120_000,
-    currency: 'COP',
-  };
-
-  const appearance: AppearanceConfig = {
-    primaryColor: '#10b981',
-    borderRadius: '12px',
-    fontFamily: 'Inter, system-ui, sans-serif',
-  };
-
-  const handleSubmit = async (payload: PaymentSubmitPayload) => {
-    const response = await fetch('/api/payments', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-
-    if (!response.ok) {
-      throw new Error('Payment failed');
-    }
-
-    return response.json();
-  };
-
-  const handleSuccess = (event: CustomEvent<PaymentSubmitPayload>) => {
-    console.log('Payment successful!', event.detail);
-    window.location.href = '/success';
-  };
-
-  const handleError = (event: CustomEvent<PaymentSubmitPayload & { error: string }>) => {
-    console.error('Payment failed:', event.detail.error);
-  };
-
   return (
     <BloqueCheckout
-      config={config}
-      appearance={appearance}
-      onSubmit={handleSubmit}
-      onSuccess={handleSuccess}
-      onError={handleError}
+      checkoutId="checkout_123abc"
+      onSuccess={(data) => {
+        console.log('Payment successful!', data);
+      }}
+      onError={(error) => {
+        console.error('Payment failed:', error);
+      }}
     />
   );
 }
 ```
 
-### With Custom Styling
-
-```tsx
-import { BloqueCheckout } from '@bloque/payments-react';
-
-function App() {
-  return (
-    <div className="checkout-container">
-      <BloqueCheckout
-        onSubmit={handleSubmit}
-        className="custom-checkout"
-        style={{ maxWidth: '600px', margin: '0 auto' }}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### `BloqueCheckout`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `config` | `CheckoutConfig` | `undefined` | Configuration object from backend SDK |
-| `appearance` | `AppearanceConfig` | `undefined` | Appearance customization |
-| `amount` | `number` | `undefined` | Payment amount (can also be set via `config.amount`) |
-| `availableMethods` | `PaymentMethodType[]` | `['card', 'pse', 'cash']` | Available payment methods |
-| `requireEmail` | `boolean` | `true` | Whether email is required for card payments |
-| `showMethodSelector` | `boolean` | `true` | Whether to show the payment method selector |
-| `onSubmit` | `function` | `undefined` | Function called when user submits payment |
-| `onSuccess` | `function` | `undefined` | Event handler for successful payment |
-| `onError` | `function` | `undefined` | Event handler for payment errors |
-| `className` | `string` | `undefined` | CSS class name |
-| `style` | `React.CSSProperties` | `undefined` | Inline styles |
-
-### `CheckoutConfig`
-
-```typescript
-interface CheckoutConfig {
-  payment_methods?: PaymentMethodType[];
-  amount?: number;
-  currency?: string;
-}
-```
-
-### `AppearanceConfig`
-
-```typescript
-interface AppearanceConfig {
-  primaryColor?: string;
-  borderRadius?: string;
-  fontFamily?: string;
-}
-```
-
-## TypeScript
-
-The package includes full TypeScript definitions with discriminated union types for type safety:
-
-```typescript
-import type {
-  BloqueCheckoutProps,
-  PaymentSubmitPayload,
-  CheckoutConfig,
-  AppearanceConfig,
-} from '@bloque/payments-react';
-
-// PaymentSubmitPayload is a discriminated union type
-// TypeScript automatically narrows the type based on the 'type' field
-const handleSubmit = async (payload: PaymentSubmitPayload) => {
-  // Type narrowing example
-  switch (payload.type) {
-    case 'card':
-      // payload.data is CardPaymentFormData
-      console.log('Card ending in:', payload.data.cardNumber.slice(-4));
-      break;
-    case 'pse':
-      // payload.data is PSEPaymentFormData
-      console.log('Bank:', payload.data.bankCode);
-      break;
-    case 'cash':
-      // payload.data is CashPaymentFormData
-      console.log('Name:', payload.data.fullName);
-      break;
-  }
-
-  // Send complete payload to your backend
-  const response = await fetch('/api/payments', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload),
-  });
-
-  return response.json();
-};
-```
-
-## Events
-
-### `onSubmit`
-
-Called when the user submits a payment form. Send the complete payload to your backend, which will use `@bloque/payments` to process the payment.
-
-```typescript
-onSubmit?: (payload: PaymentSubmitPayload) => Promise<void>;
-```
-
-**Example:**
-```typescript
-const handleSubmit = async (payload: PaymentSubmitPayload) => {
-  const response = await fetch('/api/payments', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload),
-  });
-
-  if (!response.ok) throw new Error('Payment failed');
-  return response.json();
-};
-```
-
-**Type definition:**
-```typescript
-type PaymentSubmitPayload =
-  | { type: 'card'; data: CardPaymentFormData }
-  | { type: 'pse'; data: PSEPaymentFormData }
-  | { type: 'cash'; data: CashPaymentFormData };
-```
-
-**Your backend should:**
-```typescript
-import { Bloque } from '@bloque/payments';
-
-const bloque = new Bloque({
-  apiKey: process.env.BLOQUE_API_KEY!,
-  mode: 'production',
-});
-
-app.post('/api/payments', async (req, res) => {
-  const payload = req.body;
-
-  const payment = await bloque.payments.create({
-    payment: payload,
-  });
-
-  res.json(payment);
-});
-```
-
-### `onSuccess`
-
-Fired when the payment is successfully processed.
-
-```typescript
-onSuccess?: (event: CustomEvent<PaymentSubmitPayload>) => void;
-```
-
-### `onError`
-
-Fired when payment processing fails.
-
-```typescript
-onError?: (event: CustomEvent<PaymentSubmitPayload & { error: string }>) => void;
-```
+## Documentation
 
-## Payment Methods
+For complete documentation, examples, and API reference, visit:
 
-- **Card** - Credit and debit card payments
-- **PSE** - Colombian online banking system
-- **Cash** - Generate receipt for cash payment at physical locations
+**[https://docs.bloque.app/pay](https://docs.bloque.app/pay)**
 
 ## License
 

package/dist/bloque-checkout.d.ts

@@ -1,123 +1,42 @@
-export type CheckoutMode = 'sandbox' | 'production';
-export type CheckoutLang = 'es' | 'en';
-export interface SDKInitOptions {
+import { type BloqueCheckoutOptions } from '@bloque/payments-core';
+export interface BloqueCheckoutProps extends Omit<BloqueCheckoutOptions, 'checkoutId'> {
     /**
-     * Your Bloque public API key
+     * The checkout ID returned from your backend after creating a checkout session
      */
-    publicApiKey: string;
+    checkoutId: string;
     /**
-     * Operation mode: 'sandbox' or 'production'. Default: 'production'
+     * Additional CSS class name for the container div
      */
-    mode?: CheckoutMode;
+    className?: string;
     /**
-     * Default language for all components
+     * Additional inline styles for the container div
      */
-    lang?: CheckoutLang;
+    style?: React.CSSProperties;
 }
 /**
- * Initialize the Bloque Payments SDK with global configuration.
- * This allows you to set the publicApiKey and mode once, instead of
- * passing them to every component.
+ * BloqueCheckout React component
+ *
+ * This component renders an iframe with the Bloque hosted checkout page.
  *
  * @example
  * ```tsx
- * import { init } from '@bloque/payments-react';
+ * import { BloqueCheckout } from '@bloque/payments-react';
  *
- * init({
- *   publicApiKey: 'pk_test_xxx',
- *   mode: 'sandbox',
- * });
+ * function MyCheckout() {
+ *   return (
+ *     <BloqueCheckout
+ *       checkoutId="checkout_123abc"
+ *       onSuccess={(data) => {
+ *         console.log('Payment successful!', data);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Payment failed:', error);
+ *       }}
+ *     />
+ *   );
+ * }
  * ```
  */
-export declare function init(options: SDKInitOptions): void;
-/**
- * Get the current global configuration.
- * Returns null if init() has not been called.
- */
-export declare function getConfig(): SDKInitOptions | null;
-export interface PaymentResult {
-    payment_id: string;
-    status: 'approved' | 'pending' | 'rejected';
-    message: string;
-    amount: number;
-    currency: string;
-    reference: string;
-    created_at: string;
-}
-export interface PaymentError {
-    message: string;
-    data?: unknown;
-    type: string;
-}
-export interface AppearanceConfig {
-    /**
-     * Primary color (hex). Example: '#4f46e5'
-     */
-    primaryColor?: string;
-    /**
-     * Border radius. Example: '8px'
-     */
-    borderRadius?: string;
-    /**
-     * Font family. Example: 'Inter, system-ui, sans-serif'
-     */
-    fontFamily?: string;
-}
-export interface CheckoutConfig {
-    /**
-     * The payment amount in USD (required)
-     */
-    amount: number;
-    webhookUrl?: string;
-    /**
-     * Require email in the card form. Default: true
-     */
-    requireEmail?: boolean;
-}
-export interface BloqueCheckoutProps {
-    /**
-     * Checkout configuration with amount and optional settings
-     */
-    config: CheckoutConfig;
-    /**
-     * Appearance customization (colors, fonts, etc.)
-     */
-    appearance?: AppearanceConfig;
-    /**
-     * Your Bloque public API key. Optional if init() was called.
-     */
-    publicApiKey?: string;
-    /**
-     * Language: 'es' (Spanish) or 'en' (English). Default: 'es'
-     */
-    lang?: CheckoutLang;
-    /**
-     * Operation mode: 'sandbox' or 'production'. Default: 'production'
-     */
-    mode?: CheckoutMode;
-    /**
-     * Callback when payment is successful
-     */
-    onSuccess?: (result: PaymentResult) => void;
-    /**
-     * Callback when payment fails
-     */
-    onError?: (error: PaymentError) => void;
-    /**
-     * Additional CSS class name
-     */
-    className?: string;
-    /**
-     * Additional inline styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * iframe width. Default: '100%'
-     */
-    width?: string | number;
-    /**
-     * iframe height. Default: '600px'
-     */
-    height?: string | number;
-}
-export declare function BloqueCheckout({ config, appearance, publicApiKey, lang, mode, onSuccess, onError, className, style, width, height, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloqueCheckout({ checkoutId, publicApiKey, mode, checkoutUrl, appearance, onReady, onSuccess, onError, onPending, iframeStyles, className, style, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export type { AppearanceConfig, BloqueCheckoutOptions, BloqueInitOptions, PaymentResult, } from '@bloque/payments-core';
+export { BloqueCheckout as BloqueCheckoutCore, init, } from '@bloque/payments-core';

package/dist/bloque-checkout.js

@@ -1,84 +1,45 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-const CHECKOUT_BASE_URL = 'https://payments.bloque.app';
-let globalConfig = null;
-function init(options) {
-    globalConfig = options;
-}
-function getConfig() {
-    return globalConfig;
-}
-function buildCheckoutUrl(props) {
-    const params = new URLSearchParams();
-    params.set('amount', props.amount.toString());
-    params.set('publicApiKey', props.publicApiKey);
-    params.set('lang', props.lang);
-    params.set('mode', props.mode);
-    params.set('requireEmail', props.requireEmail.toString());
-    if (props.webhookUrl) params.set('webhookUrl', props.webhookUrl);
-    if (props.appearance?.primaryColor) params.set('primaryColor', props.appearance.primaryColor);
-    if (props.appearance?.borderRadius) params.set('borderRadius', props.appearance.borderRadius);
-    if (props.appearance?.fontFamily) params.set('fontFamily', props.appearance.fontFamily);
-    return `${CHECKOUT_BASE_URL}/?${params.toString()}`;
-}
-function BloqueCheckout({ config, appearance, publicApiKey, lang, mode, onSuccess, onError, className, style, width = '100%', height = '600px' }) {
-    const iframeRef = useRef(null);
-    const onSuccessRef = useRef(onSuccess);
-    const onErrorRef = useRef(onError);
-    const resolvedPublicApiKey = publicApiKey ?? globalConfig?.publicApiKey;
-    const resolvedMode = mode ?? globalConfig?.mode ?? 'production';
-    const resolvedLang = lang ?? globalConfig?.lang ?? 'es';
-    if (!resolvedPublicApiKey) throw new Error('BloqueCheckout: publicApiKey is required. Either pass it as a prop or call init() first.');
+import { BloqueCheckout, init } from "@bloque/payments-core";
+import { useEffect, useRef } from "react";
+function bloque_checkout_BloqueCheckout({ checkoutId, publicApiKey, mode, checkoutUrl, appearance, onReady, onSuccess, onError, onPending, iframeStyles, className, style }) {
+    const containerRef = useRef(null);
+    const checkoutRef = useRef(null);
     useEffect(()=>{
-        onSuccessRef.current = onSuccess;
-        onErrorRef.current = onError;
-    }, [
-        onSuccess,
-        onError
-    ]);
-    const checkoutUrl = useMemo(()=>buildCheckoutUrl({
-            amount: config.amount,
-            publicApiKey: resolvedPublicApiKey,
-            lang: resolvedLang,
-            mode: resolvedMode,
-            requireEmail: config.requireEmail ?? true,
-            webhookUrl: config.webhookUrl,
-            appearance
-        }), [
-        config.amount,
-        config.requireEmail,
-        config.webhookUrl,
-        resolvedPublicApiKey,
-        resolvedLang,
-        resolvedMode,
-        appearance
-    ]);
-    const handleMessage = useCallback((event)=>{
-        if (event.origin !== CHECKOUT_BASE_URL) return;
-        const { type, data, error } = event.data || {};
-        if ('payment-result' === type && onSuccessRef.current) onSuccessRef.current(data);
-        if ('payment-error' === type && onErrorRef.current) onErrorRef.current(error);
-    }, []);
-    useEffect(()=>{
-        window.addEventListener('message', handleMessage);
+        if (!containerRef.current) return;
+        const checkout = new BloqueCheckout({
+            checkoutId,
+            publicApiKey,
+            mode,
+            checkoutUrl,
+            appearance,
+            onReady,
+            onSuccess,
+            onError,
+            onPending,
+            iframeStyles
+        });
+        const iframe = checkout.createIframe();
+        containerRef.current.appendChild(iframe);
+        checkoutRef.current = checkout;
         return ()=>{
-            window.removeEventListener('message', handleMessage);
+            checkout.destroy();
         };
     }, [
-        handleMessage
+        checkoutId,
+        publicApiKey,
+        mode,
+        checkoutUrl,
+        appearance,
+        onReady,
+        onSuccess,
+        onError,
+        onPending,
+        iframeStyles
     ]);
-    return /*#__PURE__*/ jsx("iframe", {
-        ref: iframeRef,
-        src: checkoutUrl,
-        width: width,
-        height: height,
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
         className: className,
-        style: {
-            border: 'none',
-            ...style
-        },
-        title: "Bloque Checkout",
-        allow: "payment"
+        style: style
     });
 }
-export { BloqueCheckout, getConfig, init };
+export { bloque_checkout_BloqueCheckout as BloqueCheckout, BloqueCheckout as BloqueCheckoutCore, init };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export type { AppearanceConfig, BloqueCheckoutProps, CheckoutConfig, CheckoutLang, CheckoutMode, PaymentError, PaymentResult, SDKInitOptions, } from './bloque-checkout';
-export { BloqueCheckout, getConfig, init } from './bloque-checkout';
+export type { AppearanceConfig, BloqueCheckoutOptions, BloqueCheckoutProps, BloqueInitOptions, PaymentResult, } from './bloque-checkout';
+export { BloqueCheckout, BloqueCheckoutCore, init, } from './bloque-checkout';

package/dist/index.js

@@ -1,2 +1,2 @@
-import { BloqueCheckout, getConfig, init } from "./bloque-checkout.js";
-export { BloqueCheckout, getConfig, init };
+import { BloqueCheckout, BloqueCheckoutCore, init } from "./bloque-checkout.js";
+export { BloqueCheckout, BloqueCheckoutCore, init };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloque/payments-react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React wrapper for Bloque payments web components",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,6 +33,9 @@
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "@bloque/payments-core": "0.0.8"
+  },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"