@blocklet/payment-react-headless 1.27.1 → 1.28.0

package/es/checkout/hooks/useSubmit.d.ts

@@ -30,6 +30,9 @@ export interface UseSubmitReturn {
     stripeConfirm: () => Promise<void>;
     stripeCancel: () => Promise<void>;
     stripeSkip: () => Promise<void>;
+    /** Signal that DID Connect completed successfully — triggers completion polling.
+     *  Use this in CF Workers (no WebSocket) to poll session status after connect.close(). */
+    didConnectComplete: () => Promise<void>;
     vendorStatus: VendorOrderStatus | null;
     /** Whether the checkout config is locked (user clicked "Connect and Pay", pending login/submit) */
     locked: boolean;

package/es/checkout/hooks/useSubmit.js

@@ -116,13 +116,15 @@ export function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit
       try {
         const { data } = await api.get(API.VENDOR_ORDER_STATUS(sessionId));
         if (!mountedRef.current) return;
+        const vendors = Array.isArray(data?.vendors) ? data.vendors : [];
         const needCheckError = Date.now() - startTime > 6e3;
-        const allCompleted = data?.vendors?.every((v) => v.progress >= 100);
-        const hasFailed = data?.vendors?.some(
+        const allCompleted = vendors.every((v) => v.progress >= 100);
+        const hasFailed = vendors.some(
           (v) => v.status === "failed" || needCheckError && !!v.error && !!v.error_message
         );
         setVendorStatus({
           ...data,
+          vendors,
           isAllCompleted: !hasFailed && allCompleted,
           hasFailed
         });
@@ -503,6 +505,13 @@ export function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit
       setContext({ type: "error", message: err.message || "Failed to skip payment method", code: "SKIP_FAILED" });
     }
   });
+  const didConnectComplete = useMemoizedFn(async () => {
+    if (status === "submitting" || status === "completed") return;
+    pollingAbortRef.current = false;
+    setStatus("submitting");
+    setContext(null);
+    await handleCompletion();
+  });
   return {
     status,
     context,
@@ -515,6 +524,7 @@ export function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit
     stripeConfirm,
     stripeCancel,
     stripeSkip,
+    didConnectComplete,
     vendorStatus,
     locked,
     lock

package/es/shared/api.d.ts

@@ -21,6 +21,7 @@ export default api;
 export declare const API: {
     readonly START_PAYMENT_LINK: (id: string) => string;
     readonly RETRIEVE_SESSION: (id: string) => string;
+    readonly STATUS_SESSION: (id: string) => string;
     readonly SWITCH_CURRENCY: (id: string) => string;
     readonly SUBMIT: (id: string) => string;
     readonly DONATE_SUBMIT: (id: string) => string;

package/es/shared/api.js

@@ -61,6 +61,7 @@ export default api;
 export const API = {
   START_PAYMENT_LINK: (id) => `/api/checkout-sessions/start/${id}`,
   RETRIEVE_SESSION: (id) => `/api/checkout-sessions/retrieve/${id}`,
+  STATUS_SESSION: (id) => `/api/checkout-sessions/status/${id}`,
   SWITCH_CURRENCY: (id) => `/api/checkout-sessions/${id}/switch-currency`,
   SUBMIT: (id) => `/api/checkout-sessions/${id}/submit`,
   DONATE_SUBMIT: (id) => `/api/checkout-sessions/${id}/donate-submit`,

package/es/shared/polling.d.ts

@@ -1,11 +1,12 @@
 import type { CheckoutResult } from '../checkout/types';
 /**
  * Poll for checkout session completion.
- * Extracted from react/src/payment/form/index.tsx:72-99
  *
- * Uses p-wait-for with 2s interval and 3 minute timeout.
- * Completion condition: session.status === 'complete' && payment_status in ['paid', 'no_payment_required']
- * Throws if paymentIntent has last_payment_error.
+ * Uses lightweight /status endpoint during polling (single D1 query, ~50ms)
+ * instead of full /retrieve (multiple includes, ~850ms). Only fetches full
+ * session data on the final successful poll for the success page.
+ *
+ * This reduces D1 load during payment processing and speeds up detection.
  */
 export declare function waitForCheckoutComplete(sessionId: string): Promise<CheckoutResult>;
 /**

package/es/shared/polling.js

@@ -1,19 +1,28 @@
-import pWaitFor from "p-wait-for";
 import api, { API } from "./api.js";
+const POLL_TIMEOUT_MS = 5 * 60 * 1e3;
+function nextPollInterval(elapsedMs) {
+  if (elapsedMs < 5e3) return 500;
+  if (elapsedMs < 3e4) return 1500;
+  return 3e3;
+}
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 export async function waitForCheckoutComplete(sessionId) {
-  let result;
-  await pWaitFor(
-    async () => {
-      const { data } = await api.get(API.RETRIEVE_SESSION(sessionId));
-      if (data.paymentIntent && data.paymentIntent.status === "requires_action" && data.paymentIntent.last_payment_error) {
-        throw new Error(data.paymentIntent.last_payment_error.message);
-      }
-      result = data;
-      return data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status);
-    },
-    { interval: 2e3, timeout: 3 * 60 * 1e3 }
-  );
-  return result;
+  const startedAt = Date.now();
+  while (true) {
+    const { data: data2 } = await api.get(API.STATUS_SESSION(sessionId));
+    if (data2.paymentIntent && data2.paymentIntent.status === "requires_action" && data2.paymentIntent.last_payment_error) {
+      throw new Error(data2.paymentIntent.last_payment_error.message);
+    }
+    const done = data2.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data2.checkoutSession?.payment_status);
+    if (done) break;
+    const elapsed = Date.now() - startedAt;
+    if (elapsed >= POLL_TIMEOUT_MS) {
+      throw new Error("waitForCheckoutComplete: timed out");
+    }
+    await sleep(nextPollInterval(elapsed));
+  }
+  const { data } = await api.get(API.RETRIEVE_SESSION(sessionId));
+  return data;
 }
 export function generateIdempotencyKey(sessionId, currencyId) {
   return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;

package/lib/checkout/hooks/useSubmit.d.ts

@@ -30,6 +30,9 @@ export interface UseSubmitReturn {
     stripeConfirm: () => Promise<void>;
     stripeCancel: () => Promise<void>;
     stripeSkip: () => Promise<void>;
+    /** Signal that DID Connect completed successfully — triggers completion polling.
+     *  Use this in CF Workers (no WebSocket) to poll session status after connect.close(). */
+    didConnectComplete: () => Promise<void>;
     vendorStatus: VendorOrderStatus | null;
     /** Whether the checkout config is locked (user clicked "Connect and Pay", pending login/submit) */
     locked: boolean;

package/lib/checkout/hooks/useSubmit.js

@@ -115,11 +115,13 @@ function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit, isDon
           data
         } = await _api.default.get(_api.API.VENDOR_ORDER_STATUS(sessionId));
         if (!mountedRef.current) return;
+        const vendors = Array.isArray(data?.vendors) ? data.vendors : [];
         const needCheckError = Date.now() - startTime > 6e3;
-        const allCompleted = data?.vendors?.every(v => v.progress >= 100);
-        const hasFailed = data?.vendors?.some(v => v.status === "failed" || needCheckError && !!v.error && !!v.error_message);
+        const allCompleted = vendors.every(v => v.progress >= 100);
+        const hasFailed = vendors.some(v => v.status === "failed" || needCheckError && !!v.error && !!v.error_message);
         setVendorStatus({
           ...data,
+          vendors,
           isAllCompleted: !hasFailed && allCompleted,
           hasFailed
         });
@@ -528,6 +530,13 @@ function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit, isDon
       });
     }
   });
+  const didConnectComplete = (0, _ahooks.useMemoizedFn)(async () => {
+    if (status === "submitting" || status === "completed") return;
+    pollingAbortRef.current = false;
+    setStatus("submitting");
+    setContext(null);
+    await handleCompletion();
+  });
   return {
     status,
     context,
@@ -540,6 +549,7 @@ function useSubmit(sessionData, sessionId, currencyId, isStripe, isCredit, isDon
     stripeConfirm,
     stripeCancel,
     stripeSkip,
+    didConnectComplete,
     vendorStatus,
     locked,
     lock

package/lib/shared/api.d.ts

@@ -21,6 +21,7 @@ export default api;
 export declare const API: {
     readonly START_PAYMENT_LINK: (id: string) => string;
     readonly RETRIEVE_SESSION: (id: string) => string;
+    readonly STATUS_SESSION: (id: string) => string;
     readonly SWITCH_CURRENCY: (id: string) => string;
     readonly SUBMIT: (id: string) => string;
     readonly DONATE_SUBMIT: (id: string) => string;

package/lib/shared/api.js

@@ -68,6 +68,7 @@ module.exports = api;
 const API = exports.API = {
   START_PAYMENT_LINK: id => `/api/checkout-sessions/start/${id}`,
   RETRIEVE_SESSION: id => `/api/checkout-sessions/retrieve/${id}`,
+  STATUS_SESSION: id => `/api/checkout-sessions/status/${id}`,
   SWITCH_CURRENCY: id => `/api/checkout-sessions/${id}/switch-currency`,
   SUBMIT: id => `/api/checkout-sessions/${id}/submit`,
   DONATE_SUBMIT: id => `/api/checkout-sessions/${id}/donate-submit`,

package/lib/shared/polling.d.ts

@@ -1,11 +1,12 @@
 import type { CheckoutResult } from '../checkout/types';
 /**
  * Poll for checkout session completion.
- * Extracted from react/src/payment/form/index.tsx:72-99
  *
- * Uses p-wait-for with 2s interval and 3 minute timeout.
- * Completion condition: session.status === 'complete' && payment_status in ['paid', 'no_payment_required']
- * Throws if paymentIntent has last_payment_error.
+ * Uses lightweight /status endpoint during polling (single D1 query, ~50ms)
+ * instead of full /retrieve (multiple includes, ~850ms). Only fetches full
+ * session data on the final successful poll for the success page.
+ *
+ * This reduces D1 load during payment processing and speeds up detection.
  */
 export declare function waitForCheckoutComplete(sessionId: string): Promise<CheckoutResult>;
 /**

package/lib/shared/polling.js

@@ -5,27 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.generateIdempotencyKey = generateIdempotencyKey;
 exports.waitForCheckoutComplete = waitForCheckoutComplete;
-var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _api = _interopRequireWildcard(require("./api"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const POLL_TIMEOUT_MS = 5 * 60 * 1e3;
+function nextPollInterval(elapsedMs) {
+  if (elapsedMs < 5e3) return 500;
+  if (elapsedMs < 3e4) return 1500;
+  return 3e3;
+}
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 async function waitForCheckoutComplete(sessionId) {
-  let result;
-  await (0, _pWaitFor.default)(async () => {
+  const startedAt = Date.now();
+  while (true) {
     const {
-      data
-    } = await _api.default.get(_api.API.RETRIEVE_SESSION(sessionId));
-    if (data.paymentIntent && data.paymentIntent.status === "requires_action" && data.paymentIntent.last_payment_error) {
-      throw new Error(data.paymentIntent.last_payment_error.message);
+      data: data2
+    } = await _api.default.get(_api.API.STATUS_SESSION(sessionId));
+    if (data2.paymentIntent && data2.paymentIntent.status === "requires_action" && data2.paymentIntent.last_payment_error) {
+      throw new Error(data2.paymentIntent.last_payment_error.message);
+    }
+    const done = data2.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data2.checkoutSession?.payment_status);
+    if (done) break;
+    const elapsed = Date.now() - startedAt;
+    if (elapsed >= POLL_TIMEOUT_MS) {
+      throw new Error("waitForCheckoutComplete: timed out");
     }
-    result = data;
-    return data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status);
-  }, {
-    interval: 2e3,
-    timeout: 3 * 60 * 1e3
-  });
-  return result;
+    await sleep(nextPollInterval(elapsed));
+  }
+  const {
+    data
+  } = await _api.default.get(_api.API.RETRIEVE_SESSION(sessionId));
+  return data;
 }
 function generateIdempotencyKey(sessionId, currencyId) {
   return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react-headless",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "Headless React hooks for payment-kit checkout",
   "keywords": [
     "react",
@@ -33,10 +33,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/ws": "^1.28.5",
+    "@arcblock/ws": "^1.30.9",
     "@blocklet/js-sdk": "workspace:*",
-    "@blocklet/payment-types": "1.27.1",
-    "@ocap/util": "^1.28.5",
+    "@blocklet/payment-types": "1.28.0",
+    "@ocap/util": "^1.30.9",
     "ahooks": "^3.8.5",
     "google-libphonenumber": "^3.2.42",
     "lodash": "^4.18.1",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ba8098a5b20b8c62295331186ba7dddc946aa4c"
+  "gitHead": "1486b54f913b83fb42323a89cce7503814d0685a"
 }

package/src/checkout/hooks/useSubmit.ts

@@ -57,6 +57,9 @@ export interface UseSubmitReturn {
   stripeConfirm: () => Promise<void>;
   stripeCancel: () => Promise<void>;
   stripeSkip: () => Promise<void>;
+  /** Signal that DID Connect completed successfully — triggers completion polling.
+   *  Use this in CF Workers (no WebSocket) to poll session status after connect.close(). */
+  didConnectComplete: () => Promise<void>;
   vendorStatus: VendorOrderStatus | null;
   /** Whether the checkout config is locked (user clicked "Connect and Pay", pending login/submit) */
   locked: boolean;
@@ -210,15 +213,17 @@ export function useSubmit(
         const { data } = await api.get(API.VENDOR_ORDER_STATUS(sessionId));
         if (!mountedRef.current) return;
 
+        const vendors = Array.isArray(data?.vendors) ? data.vendors : [];
         const needCheckError = Date.now() - startTime > 6000;
-        const allCompleted = data?.vendors?.every((v: VendorStatus) => v.progress >= 100);
-        const hasFailed = data?.vendors?.some(
+        const allCompleted = vendors.every((v: VendorStatus) => v.progress >= 100);
+        const hasFailed = vendors.some(
           (v: VendorStatus & { error?: string; error_message?: string }) =>
             v.status === 'failed' || (needCheckError && !!v.error && !!v.error_message)
         );
 
         setVendorStatus({
           ...data,
+          vendors,
           isAllCompleted: !hasFailed && allCompleted,
           hasFailed,
         });
@@ -704,6 +709,23 @@ export function useSubmit(
     }
   });
 
+  // DID Connect complete — mirrors V1 handleConnected() / stripeConfirm() pattern.
+  // In CF Workers (no WebSocket relay), the frontend has no real-time notification
+  // when DID Connect payment succeeds. Call this from onSuccess to poll session status.
+  //
+  // Recovers from in-modal retry: if the first sign attempt failed (onError fired,
+  // status was reset to 'idle' / 'failed' and pollingAbortRef was set), the user can
+  // still retry inside the same DID Connect modal. When that retry finally fires
+  // onSuccess we must resume polling from any non-terminal status — only short-circuit
+  // when completion is already in flight or finalized.
+  const didConnectComplete = useMemoizedFn(async () => {
+    if (status === 'submitting' || status === 'completed') return;
+    pollingAbortRef.current = false;
+    setStatus('submitting');
+    setContext(null);
+    await handleCompletion();
+  });
+
   return {
     status,
     context,
@@ -716,6 +738,7 @@ export function useSubmit(
     stripeConfirm,
     stripeCancel,
     stripeSkip,
+    didConnectComplete,
     vendorStatus,
     locked,
     lock,

package/src/shared/api.ts

@@ -98,6 +98,7 @@ export default api;
 export const API = {
   START_PAYMENT_LINK: (id: string) => `/api/checkout-sessions/start/${id}`,
   RETRIEVE_SESSION: (id: string) => `/api/checkout-sessions/retrieve/${id}`,
+  STATUS_SESSION: (id: string) => `/api/checkout-sessions/status/${id}`,
   SWITCH_CURRENCY: (id: string) => `/api/checkout-sessions/${id}/switch-currency`,
   SUBMIT: (id: string) => `/api/checkout-sessions/${id}/submit`,
   DONATE_SUBMIT: (id: string) => `/api/checkout-sessions/${id}/donate-submit`,

package/src/shared/polling.ts

@@ -1,43 +1,63 @@
-import pWaitFor from 'p-wait-for';
-
 import api, { API } from './api';
 import type { CheckoutResult } from '../checkout/types';
 
+const POLL_TIMEOUT_MS = 5 * 60 * 1000;
+
+/**
+ * Progressive polling interval — typical DID Connect + on-chain confirm + DB
+ * write completes in 1–3s, so a short cadence in that window matters most for
+ * perceived latency. Backoff after that to keep D1 load bounded for slow paths
+ * (chain congestion, async vendor processing, etc.).
+ */
+function nextPollInterval(elapsedMs: number): number {
+  if (elapsedMs < 5_000) return 500;
+  if (elapsedMs < 30_000) return 1_500;
+  return 3_000;
+}
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 /**
  * Poll for checkout session completion.
- * Extracted from react/src/payment/form/index.tsx:72-99
  *
- * Uses p-wait-for with 2s interval and 3 minute timeout.
- * Completion condition: session.status === 'complete' && payment_status in ['paid', 'no_payment_required']
- * Throws if paymentIntent has last_payment_error.
+ * Uses lightweight /status endpoint during polling (single D1 query, ~50ms)
+ * instead of full /retrieve (multiple includes, ~850ms). Only fetches full
+ * session data on the final successful poll for the success page.
+ *
+ * This reduces D1 load during payment processing and speeds up detection.
  */
 export async function waitForCheckoutComplete(sessionId: string): Promise<CheckoutResult> {
-  let result: CheckoutResult;
-
-  await pWaitFor(
-    async () => {
-      const { data } = await api.get(API.RETRIEVE_SESSION(sessionId));
-
-      if (
-        data.paymentIntent &&
-        data.paymentIntent.status === 'requires_action' &&
-        data.paymentIntent.last_payment_error
-      ) {
-        throw new Error(data.paymentIntent.last_payment_error.message);
-      }
-
-      result = data;
-
-      return (
-        data.checkoutSession?.status === 'complete' &&
-        ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status)
-      );
-    },
-    { interval: 2000, timeout: 3 * 60 * 1000 }
-  );
-
-  // @ts-expect-error result is assigned inside the polling callback
-  return result;
+  const startedAt = Date.now();
+
+  // Phase 1: Lightweight status polling with progressive backoff.
+  // First check fires immediately — happy-path DID flows where the backend
+  // already finalized before the polling kicks in must not wait an interval.
+  while (true) {
+    const { data } = await api.get(API.STATUS_SESSION(sessionId));
+
+    if (
+      data.paymentIntent &&
+      data.paymentIntent.status === 'requires_action' &&
+      data.paymentIntent.last_payment_error
+    ) {
+      throw new Error(data.paymentIntent.last_payment_error.message);
+    }
+
+    const done =
+      data.checkoutSession?.status === 'complete' &&
+      ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status);
+    if (done) break;
+
+    const elapsed = Date.now() - startedAt;
+    if (elapsed >= POLL_TIMEOUT_MS) {
+      throw new Error('waitForCheckoutComplete: timed out');
+    }
+    await sleep(nextPollInterval(elapsed));
+  }
+
+  // Phase 2: Full retrieve for success page data
+  const { data } = await api.get(API.RETRIEVE_SESSION(sessionId));
+  return data;
 }
 
 /**

package/tsconfig.json

@@ -13,6 +13,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node"]
   }
 }