@bloque/payments-react 0.0.6 → 0.0.8

package/README.md

@@ -1,318 +1,38 @@
 # @bloque/payments-react
 
-React wrapper for `@bloque/payments-elements` web components.
+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,27 +1,42 @@
-import '@bloque/payments-elements';
-import type { AppearanceConfig, CheckoutConfig, PaymentMethodType, PaymentResponse, PaymentSubmitPayload } from '@bloque/payments-elements';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'bloque-checkout': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-export interface BloqueCheckoutProps {
-    config?: CheckoutConfig;
-    appearance?: AppearanceConfig;
-    amount?: number;
-    availableMethods?: PaymentMethodType[];
-    requireEmail?: boolean;
-    showMethodSelector?: boolean;
-    onSubmit?: (payload: PaymentSubmitPayload) => Promise<PaymentResponse | undefined>;
-    onSuccess?: (response: PaymentResponse) => void;
-    onError?: (error: {
-        message: string;
-        data: unknown;
-        type: string;
-    }) => void;
+import { type BloqueCheckoutOptions } from '@bloque/payments-core';
+export interface BloqueCheckoutProps extends Omit<BloqueCheckoutOptions, 'checkoutId'> {
+    /**
+     * The checkout ID returned from your backend after creating a checkout session
+     */
+    checkoutId: string;
+    /**
+     * Additional CSS class name for the container div
+     */
     className?: string;
+    /**
+     * Additional inline styles for the container div
+     */
     style?: React.CSSProperties;
 }
-export declare function BloqueCheckout({ config, appearance, amount, availableMethods, requireEmail, showMethodSelector, onSubmit, onSuccess, onError, className, style, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * BloqueCheckout React component
+ *
+ * This component renders an iframe with the Bloque hosted checkout page.
+ *
+ * @example
+ * ```tsx
+ * import { BloqueCheckout } from '@bloque/payments-react';
+ *
+ * function MyCheckout() {
+ *   return (
+ *     <BloqueCheckout
+ *       checkoutId="checkout_123abc"
+ *       onSuccess={(data) => {
+ *         console.log('Payment successful!', data);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Payment failed:', error);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+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,35 +1,45 @@
 import { jsx } from "react/jsx-runtime";
-import "@bloque/payments-elements";
+import { BloqueCheckout, init } from "@bloque/payments-core";
 import { useEffect, useRef } from "react";
-function BloqueCheckout({ config, appearance, amount, availableMethods, requireEmail = true, showMethodSelector = true, onSubmit, onSuccess, onError, className, style }) {
+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(()=>{
-        const element = checkoutRef.current;
-        if (!element) return;
-        if (config) element.config = config;
-        if (appearance) element.appearance = appearance;
-        if (void 0 !== amount) element.amount = amount;
-        if (availableMethods) element.availableMethods = availableMethods;
-        element.requireEmail = requireEmail;
-        element.showMethodSelector = showMethodSelector;
-        if (onSubmit) element.onSubmit = onSubmit;
-        if (onSuccess) element.onSuccess = onSuccess;
-        if (onError) element.onError = onError;
+        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 ()=>{
+            checkout.destroy();
+        };
     }, [
-        config,
+        checkoutId,
+        publicApiKey,
+        mode,
+        checkoutUrl,
         appearance,
-        amount,
-        availableMethods,
-        requireEmail,
-        showMethodSelector,
-        onSubmit,
+        onReady,
         onSuccess,
-        onError
+        onError,
+        onPending,
+        iframeStyles
     ]);
-    return /*#__PURE__*/ jsx("bloque-checkout", {
-        ref: checkoutRef,
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
         className: className,
         style: style
     });
 }
-export { BloqueCheckout };
+export { bloque_checkout_BloqueCheckout as BloqueCheckout, BloqueCheckout as BloqueCheckoutCore, init };

package/dist/index.d.ts

@@ -1,4 +1,2 @@
-export type { AppearanceConfig, CheckoutConfig, PaymentResponse, PaymentSubmitPayload, SDKInitOptions, } from '@bloque/payments-elements';
-export { init } from '@bloque/payments-elements';
-export type { BloqueCheckoutProps } from './bloque-checkout';
-export { BloqueCheckout } 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,3 +1,2 @@
-import { init } from "@bloque/payments-elements";
-import { BloqueCheckout } from "./bloque-checkout.js";
-export { BloqueCheckout, 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.6",
+  "version": "0.0.8",
   "description": "React wrapper for Bloque payments web components",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +34,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@bloque/payments-elements": "0.0.6"
+    "@bloque/payments-core": "0.0.8"
   },
   "peerDependencies": {
     "react": ">=16.9.0",