@payabli/components-react 0.1.0

package/dist/PayIn.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ComponentRef } from './createComponent.js';
+export type PayInProps = ComponentProps<'payin'>;
+export type PayInRef = ComponentRef;
+export declare const PayIn: import("react").ForwardRefExoticComponent<import("./createComponent.js").ComponentEventProps<"payin"> & {
+    appearance?: import("@payabli/component-contracts").AppearanceOptions;
+    options?: {
+        showSubmitButton?: boolean | undefined;
+    } | undefined;
+    prefill?: Record<string, string>;
+    locale?: string;
+    timeout?: number;
+    className?: string;
+    style?: import("react").CSSProperties;
+    id?: string;
+} & import("react").RefAttributes<ComponentRef>>;

package/dist/PayIn.js

@@ -0,0 +1,3 @@
+'use client';
+import { createComponent, } from './createComponent.js';
+export const PayIn = createComponent('payin');

package/dist/PayabliProvider.d.ts

@@ -0,0 +1,22 @@
+import type { LoadOptions, Session, SessionEventPayload } from '@payabli/components-web';
+import type { ReactNode } from 'react';
+export interface PayabliProviderProps {
+    /**
+     * Session from `POST /api/v2/{slug}/Session/init`, created on your server.
+     * When the field values change, the provider calls `updateSession()` and all
+     * mounted components re-bootstrap.
+     */
+    session: Session;
+    /** Forwarded to `loadPayabli()` on first mount. Later changes have no effect. */
+    loadOptions?: LoadOptions;
+    /**
+     * Fires when the session reaches its server-side ceiling, or when auto-refresh
+     * fails. Create a new session on your server and pass it through the `session` prop.
+     */
+    onSessionExpired?: (payload: SessionEventPayload) => void;
+    onSessionError?: (payload: SessionEventPayload) => void;
+    /** Fires when the hosted script fails to load. Also available as `usePayabli().error`. */
+    onLoadError?: (error: Error) => void;
+    children?: ReactNode;
+}
+export declare function PayabliProvider({ session, loadOptions, onSessionExpired, onSessionError, onLoadError, children, }: PayabliProviderProps): import("react").JSX.Element;

package/dist/PayabliProvider.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { loadPayabli } from '@payabli/components-web';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PayabliContext } from './context.js';
+function isSameSession(a, b) {
+    return (a !== null &&
+        a.sessionToken === b.sessionToken &&
+        a.renderToken === b.renderToken &&
+        a.entryName === b.entryName &&
+        a.environment === b.environment &&
+        a.expiresAt === b.expiresAt);
+}
+export function PayabliProvider({ session, loadOptions, onSessionExpired, onSessionError, onLoadError, children, }) {
+    const [payabli, setPayabli] = useState(null);
+    const [error, setError] = useState(null);
+    const callbacksRef = useRef({ onSessionExpired, onSessionError, onLoadError });
+    useEffect(() => {
+        callbacksRef.current = { onSessionExpired, onSessionError, onLoadError };
+    });
+    const sessionRef = useRef(session);
+    const appliedSessionRef = useRef(null);
+    const loadOptionsRef = useRef(loadOptions);
+    useEffect(() => {
+        let cancelled = false;
+        let instance = null;
+        loadPayabli(loadOptionsRef.current).then((Payabli) => {
+            if (cancelled)
+                return;
+            instance = Payabli({ session: sessionRef.current });
+            appliedSessionRef.current = sessionRef.current;
+            instance.on('sessionExpired', (payload) => {
+                var _a, _b;
+                (_b = (_a = callbacksRef.current).onSessionExpired) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+            });
+            instance.on('sessionError', (payload) => {
+                var _a, _b;
+                (_b = (_a = callbacksRef.current).onSessionError) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+            });
+            setPayabli(instance);
+        }, (cause) => {
+            var _a, _b;
+            if (cancelled)
+                return;
+            const loadError = cause instanceof Error ? cause : new Error(String(cause));
+            setError(loadError);
+            (_b = (_a = callbacksRef.current).onLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, loadError);
+        });
+        return () => {
+            cancelled = true;
+            instance === null || instance === void 0 ? void 0 : instance.destroy();
+            instance = null;
+            appliedSessionRef.current = null;
+            setPayabli(null);
+        };
+    }, []);
+    useEffect(() => {
+        sessionRef.current = session;
+        if (!payabli || isSameSession(appliedSessionRef.current, session)) {
+            return;
+        }
+        appliedSessionRef.current = session;
+        payabli.updateSession(session);
+    }, [payabli, session]);
+    const value = useMemo(() => ({ payabli, error }), [payabli, error]);
+    return _jsx(PayabliContext.Provider, { value: value, children: children });
+}

package/dist/context.d.ts

@@ -0,0 +1,9 @@
+import type { PayabliInstance } from '@payabli/components-web';
+export interface PayabliContextValue {
+    /** The live instance, or null while the hosted script loads. */
+    payabli: PayabliInstance | null;
+    /** Set when the hosted script fails to load. */
+    error: Error | null;
+}
+export declare const PayabliContext: import("react").Context<PayabliContextValue | null>;
+export declare function usePayabli(): PayabliContextValue;

package/dist/context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const PayabliContext = createContext(null);
+export function usePayabli() {
+    const value = useContext(PayabliContext);
+    if (!value) {
+        throw new Error('usePayabli must be called inside <PayabliProvider>.');
+    }
+    return value;
+}

package/dist/createComponent.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentEventKey, ComponentEventMap, ComponentType } from '@payabli/component-contracts';
+import type { AppearanceOptions, ComponentOptions } from '@payabli/components-web';
+import type { CSSProperties } from 'react';
+type EventName<T extends ComponentType> = Extract<ComponentEventKey<T>, string>;
+type EventPropName<K extends string> = `on${Capitalize<K>}`;
+export type ComponentEventProps<T extends ComponentType> = {
+    [K in EventName<T> as EventPropName<K>]?: (payload: ComponentEventMap<T>[K]) => void;
+};
+export type ComponentProps<T extends ComponentType> = ComponentEventProps<T> & {
+    appearance?: AppearanceOptions;
+    options?: ComponentOptions<T>;
+    prefill?: Record<string, string>;
+    locale?: string;
+    timeout?: number;
+    /** Applied to the container element the component mounts into. */
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+};
+export interface ComponentRef {
+    /** Submits the form. Resolves with the submit result, rejects with the component error. */
+    submit: () => Promise<Record<string, unknown>>;
+    focus: (field?: string) => void;
+    blur: () => void;
+}
+export declare function createComponent<T extends ComponentType>(type: T): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ComponentProps<T>> & import("react").RefAttributes<ComponentRef>>;
+export {};

package/dist/createComponent.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BASE_COMPONENT_EVENT_NAMES, getComponentDescriptor, } from '@payabli/component-contracts';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { usePayabli } from './context.js';
+export function createComponent(type) {
+    const descriptor = getComponentDescriptor(type);
+    if (!descriptor) {
+        throw new Error(`Component type "${type}" is not registered.`);
+    }
+    const eventNames = [
+        ...new Set([
+            ...BASE_COMPONENT_EVENT_NAMES,
+            ...Object.values(descriptor.eventSchemas).map((schema) => schema.event),
+        ]),
+    ];
+    const RegisteredComponent = forwardRef(function RegisteredComponent(rawProps, ref) {
+        // React removes a possible `ref` prop from generic props. Component event
+        // keys never include `ref`, so restore the registry-derived type here.
+        const props = rawProps;
+        const { payabli } = usePayabli();
+        const containerRef = useRef(null);
+        const componentRef = useRef(null);
+        const appliedOptionsRef = useRef(null);
+        const propsRef = useRef(props);
+        useEffect(() => {
+            propsRef.current = props;
+        });
+        useEffect(() => {
+            if (!payabli || !containerRef.current) {
+                return;
+            }
+            const createOptions = toCreateOptions(propsRef.current);
+            const component = payabli.create(type, createOptions);
+            for (const event of eventNames) {
+                forwardEvent(component, event, propsRef);
+            }
+            component.mount(containerRef.current);
+            componentRef.current = component;
+            appliedOptionsRef.current = JSON.stringify(createOptions);
+            return () => {
+                componentRef.current = null;
+                appliedOptionsRef.current = null;
+                component.destroy();
+            };
+        }, [payabli]);
+        const { appearance, options, prefill, locale, timeout } = props;
+        useEffect(() => {
+            const component = componentRef.current;
+            if (!component) {
+                return;
+            }
+            const next = {
+                appearance,
+                options,
+                prefill,
+                locale,
+                timeout,
+            };
+            const serialized = JSON.stringify(next);
+            if (serialized === appliedOptionsRef.current) {
+                return;
+            }
+            appliedOptionsRef.current = serialized;
+            component.update(next);
+        }, [appearance, options, prefill, locale, timeout]);
+        useImperativeHandle(ref, () => ({
+            submit: () => {
+                const component = componentRef.current;
+                if (!component) {
+                    return Promise.reject(new Error(`${descriptor.displayName} is not ready. Wait for onReady before you call submit().`));
+                }
+                return component.submit();
+            },
+            focus: (field) => {
+                var _a;
+                (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.focus(field);
+            },
+            blur: () => {
+                var _a;
+                (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        }), []);
+        return (_jsx("div", { ref: containerRef, className: props.className, style: props.style, id: props.id, "data-payabli-component": type }));
+    });
+    RegisteredComponent.displayName = descriptor.displayName;
+    return RegisteredComponent;
+}
+function toCreateOptions(props) {
+    return {
+        appearance: props.appearance,
+        options: props.options,
+        prefill: props.prefill,
+        locale: props.locale,
+        timeout: props.timeout,
+    };
+}
+function forwardEvent(component, event, propsRef) {
+    component.on(event, (payload) => {
+        const values = propsRef.current;
+        const handler = values[toEventPropName(event)];
+        handler === null || handler === void 0 ? void 0 : handler(payload);
+    });
+}
+function toEventPropName(event) {
+    return `on${event.charAt(0).toUpperCase()}${event.slice(1)}`;
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { createComponent } from './createComponent.js';
+export type { ComponentEventProps, ComponentProps, ComponentRef, } from './createComponent.js';
+export { PayabliProvider } from './PayabliProvider.js';
+export type { PayabliProviderProps } from './PayabliProvider.js';
+export { PayIn } from './PayIn.js';
+export type { PayInProps, PayInRef } from './PayIn.js';
+export { usePayabli } from './context.js';
+export type { PayabliContextValue } from './context.js';
+export { ErrorCodes, loadPayabli } from '@payabli/components-web';
+export type { AppearanceOptions, CardBrand, PayInEvents, ComponentEventKey, ComponentEventMap, ComponentHandle, ComponentOptions, ComponentType, CreateOptions, LoadOptions, PayInOptions, PayabliConfig, PaymentMethodName, PayabliInstance, Session, SessionEventKey, SessionEventMap, SessionEventPayload, } from '@payabli/components-web';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { createComponent } from './createComponent.js';
+export { PayabliProvider } from './PayabliProvider.js';
+export { PayIn } from './PayIn.js';
+export { usePayabli } from './context.js';
+export { ErrorCodes, loadPayabli } from '@payabli/components-web';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@payabli/components-react",
+  "version": "0.1.0",
+  "description": "React bindings for the Payabli embedded components SDK.",
+  "private": false,
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/payabli/components-web.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/__tests__"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@payabli/component-contracts": "0.1.0",
+    "@payabli/components-web": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint src",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
+}