@bloque/payments-react 0.0.6 → 0.0.7

package/README.md

@@ -1,6 +1,6 @@
 # @bloque/payments-react
 
-React wrapper for `@bloque/payments-elements` web components.
+React component that embeds the Bloque hosted checkout.
 
 ## Installation
 

package/dist/bloque-checkout.d.ts

@@ -1,27 +1,123 @@
-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 type CheckoutMode = 'sandbox' | 'production';
+export type CheckoutLang = 'es' | 'en';
+export interface SDKInitOptions {
+    /**
+     * Your Bloque public API key
+     */
+    publicApiKey: string;
+    /**
+     * Operation mode: 'sandbox' or 'production'. Default: 'production'
+     */
+    mode?: CheckoutMode;
+    /**
+     * Default language for all components
+     */
+    lang?: CheckoutLang;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * import { init } from '@bloque/payments-react';
+ *
+ * init({
+ *   publicApiKey: 'pk_test_xxx',
+ *   mode: 'sandbox',
+ * });
+ * ```
+ */
+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 {
-    config?: CheckoutConfig;
+    /**
+     * Checkout configuration with amount and optional settings
+     */
+    config: CheckoutConfig;
+    /**
+     * Appearance customization (colors, fonts, etc.)
+     */
     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;
+    /**
+     * 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, amount, availableMethods, requireEmail, showMethodSelector, onSubmit, onSuccess, onError, className, style, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloqueCheckout({ config, appearance, publicApiKey, lang, mode, onSuccess, onError, className, style, width, height, }: BloqueCheckoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/bloque-checkout.js

@@ -1,35 +1,84 @@
 import { jsx } from "react/jsx-runtime";
-import "@bloque/payments-elements";
-import { useEffect, useRef } from "react";
-function BloqueCheckout({ config, appearance, amount, availableMethods, requireEmail = true, showMethodSelector = true, onSubmit, onSuccess, onError, className, style }) {
-    const checkoutRef = useRef(null);
+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.');
     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;
+        onSuccessRef.current = onSuccess;
+        onErrorRef.current = onError;
     }, [
-        config,
-        appearance,
-        amount,
-        availableMethods,
-        requireEmail,
-        showMethodSelector,
-        onSubmit,
         onSuccess,
         onError
     ]);
-    return /*#__PURE__*/ jsx("bloque-checkout", {
-        ref: checkoutRef,
+    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);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        handleMessage
+    ]);
+    return /*#__PURE__*/ jsx("iframe", {
+        ref: iframeRef,
+        src: checkoutUrl,
+        width: width,
+        height: height,
         className: className,
-        style: style
+        style: {
+            border: 'none',
+            ...style
+        },
+        title: "Bloque Checkout",
+        allow: "payment"
     });
 }
-export { BloqueCheckout };
+export { BloqueCheckout, getConfig, 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, BloqueCheckoutProps, CheckoutConfig, CheckoutLang, CheckoutMode, PaymentError, PaymentResult, SDKInitOptions, } from './bloque-checkout';
+export { BloqueCheckout, getConfig, 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, getConfig, init } from "./bloque-checkout.js";
+export { BloqueCheckout, getConfig, init };

package/package.json

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