@payabli/components-react 0.2.1 → 0.3.0

package/dist/PayIn.d.ts

@@ -2,6 +2,7 @@ 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"> & {
+    componentKey?: string;
     appearance?: import("@payabli/component-contracts").AppearanceOptions;
     options?: {
         initialMethod?: "card" | "ach" | "check" | undefined;

package/dist/PayabliProvider.d.ts

@@ -3,15 +3,14 @@ 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.
+     * A new `sessionId` replaces the instance, so every component mounts again.
      */
     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.
+     * Fires when the session reaches its ceiling. The SDK has removed the components.
+     * Create a new session on your server and pass it through the `session` prop.
      */
     onSessionExpired?: (payload: SessionEventPayload) => void;
     onSessionError?: (payload: SessionEventPayload) => void;

package/dist/PayabliProvider.js

@@ -3,14 +3,6 @@ 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);
@@ -19,7 +11,7 @@ export function PayabliProvider({ session, loadOptions, onSessionExpired, onSess
         callbacksRef.current = { onSessionExpired, onSessionError, onLoadError };
     });
     const sessionRef = useRef(session);
-    const appliedSessionRef = useRef(null);
+    sessionRef.current = session;
     const loadOptionsRef = useRef(loadOptions);
     useEffect(() => {
         let cancelled = false;
@@ -28,13 +20,16 @@ export function PayabliProvider({ session, loadOptions, onSessionExpired, onSess
             if (cancelled)
                 return;
             instance = Payabli({ session: sessionRef.current });
-            appliedSessionRef.current = sessionRef.current;
+            // Both events end the session, and an ended instance rejects create(). Drop it
+            // from context, so a component that remounts before the next session waits.
             instance.on('sessionExpired', (payload) => {
                 var _a, _b;
+                setPayabli(null);
                 (_b = (_a = callbacksRef.current).onSessionExpired) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
             });
             instance.on('sessionError', (payload) => {
                 var _a, _b;
+                setPayabli(null);
                 (_b = (_a = callbacksRef.current).onSessionError) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
             });
             setPayabli(instance);
@@ -50,18 +45,9 @@ export function PayabliProvider({ session, loadOptions, onSessionExpired, onSess
             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]);
+    }, [session.sessionId]);
     const value = useMemo(() => ({ payabli, error }), [payabli, error]);
     return _jsx(PayabliContext.Provider, { value: value, children: children });
 }

package/dist/context.d.ts

@@ -1,6 +1,6 @@
 import type { PayabliInstance } from '@payabli/components-web';
 export interface PayabliContextValue {
-    /** The live instance, or null while the hosted script loads. */
+    /** The live instance, or null while the hosted script loads and after the session ends. */
     payabli: PayabliInstance | null;
     /** Set when the hosted script fails to load. */
     error: Error | null;

package/dist/createComponent.d.ts

@@ -7,6 +7,11 @@ 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> & {
+    /**
+     * The component key from `Session/init`. Required when the session has more than one
+     * component. Defaults to the component type. Named `componentKey` because React reserves `key`.
+     */
+    componentKey?: string;
     appearance?: AppearanceOptions;
     options?: ComponentOptions<T>;
     prefill?: CreateOptions<T>['prefill'];

package/dist/createComponent.js

@@ -43,15 +43,15 @@ export function createComponent(type) {
                 appliedOptionsRef.current = null;
                 component.destroy();
             };
-        }, [payabli]);
+        }, [payabli, props.componentKey]);
         const { appearance, options, prefill, locale, timeout } = props;
         useEffect(() => {
             const component = componentRef.current;
             if (!component) {
                 return;
             }
-            const next = Object.assign(Object.assign({ appearance,
-                options }, (prefill === undefined ? {} : { prefill })), { locale,
+            const next = Object.assign(Object.assign(Object.assign(Object.assign({}, withKey(propsRef.current.componentKey)), { appearance,
+                options }), (prefill === undefined ? {} : { prefill })), { locale,
                 timeout });
             const serialized = JSON.stringify(next);
             if (serialized === appliedOptionsRef.current) {
@@ -83,7 +83,11 @@ export function createComponent(type) {
     return RegisteredComponent;
 }
 function toCreateOptions(props) {
-    return Object.assign(Object.assign({ appearance: props.appearance, options: props.options }, (props.prefill === undefined ? {} : { prefill: props.prefill })), { locale: props.locale, timeout: props.timeout });
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, withKey(props.componentKey)), { appearance: props.appearance, options: props.options }), (props.prefill === undefined ? {} : { prefill: props.prefill })), { locale: props.locale, timeout: props.timeout });
+}
+/** The `key` create option, left out when the partner names none. */
+function withKey(componentKey) {
+    return componentKey === undefined ? {} : { key: componentKey };
 }
 function forwardEvent(component, event, propsRef) {
     component.on(event, (payload) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payabli/components-react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React bindings for the Payabli embedded components SDK.",
   "private": false,
   "license": "MIT",
@@ -25,8 +25,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@payabli/component-contracts": "0.3.0",
-    "@payabli/components-web": "0.2.1"
+    "@payabli/component-contracts": "0.4.0",
+    "@payabli/components-web": "0.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"