@blocklet/payment-react-headless 1.26.0

package/examples/04-cross-sell.tsx

@@ -0,0 +1,54 @@
+// Scenario 4: Cross-sell (< 60 lines)
+import React from 'react';
+import { useCheckout } from '../src';
+
+export function CrossSellCheckout({ sessionId }: { sessionId: string }) {
+  const { product, pricing, lineItems, submit, canSubmit, isLoading } = useCheckout(sessionId);
+
+  if (isLoading || !product) return <div>Loading...</div>;
+
+  const hasCrossSell = !!lineItems.crossSellItem;
+  const crossSellAdded = lineItems.items.length > 1;
+
+  return (
+    <div>
+      <h2>{product.name}</h2>
+      <p>{product.description}</p>
+
+      {/* Main item */}
+      {lineItems.items.map((item) => (
+        <div key={item.id}>
+          <span>{(item.upsell_price || item.price)?.product?.name}</span>
+          <span> x{item.quantity}</span>
+        </div>
+      ))}
+
+      {/* Cross-sell offer */}
+      {hasCrossSell && !crossSellAdded && (
+        <div style={{ border: '1px solid #ccc', padding: 8 }}>
+          <p>Recommended: {(lineItems.crossSellItem as any)?.product?.name}</p>
+          <p>+{lineItems.crossSellItem!.unit_amount}</p>
+          <button onClick={lineItems.addCrossSell}>Add to order</button>
+        </div>
+      )}
+
+      {/* Remove cross-sell */}
+      {crossSellAdded && (
+        <button onClick={lineItems.removeCrossSell}>Remove add-on</button>
+      )}
+
+      {/* Pricing */}
+      <div>
+        <p>Subtotal: {pricing.subtotal}</p>
+        {pricing.discount && <p>Discount: -{pricing.discount}</p>}
+        <p>Total: {pricing.total}</p>
+      </div>
+
+      <button onClick={submit.execute} disabled={!canSubmit}>
+        {submit.status === 'submitting' ? 'Processing...' : 'Pay'}
+      </button>
+      {submit.status === 'completed' && <p>Order placed!</p>}
+      {submit.context?.type === 'error' && <p style={{ color: 'red' }}>{submit.context.message}</p>}
+    </div>
+  );
+}

package/examples/05-full-checkout.tsx

@@ -0,0 +1,126 @@
+// Scenario 5: Full Checkout (< 150 lines)
+import React, { useState } from 'react';
+import { useCheckout } from '../src';
+
+export function FullCheckout({ sessionId }: { sessionId: string }) {
+  const c = useCheckout(sessionId);
+  const [promo, setPromo] = useState('');
+  if (c.isLoading) return <div>Loading...</div>;
+  if (c.error || !c.product) return <div>{c.error || 'Not found'}</div>;
+
+  return (
+    <div style={{ display: 'flex', gap: 24 }}>
+      {/* Left: Product */}
+      <div style={{ flex: 1 }}>
+        <h2>{c.product.name}</h2>
+        <p>{c.product.description}</p>
+        {c.product.features.length > 0 && (
+          <ul>{c.product.features.map((f) => <li key={f.name}>{f.name}</li>)}</ul>
+        )}
+        {/* Billing interval toggle */}
+        {c.lineItems.billingInterval && c.lineItems.billingInterval.available.map((opt) => (
+          <button key={opt.interval} onClick={() => c.lineItems.billingInterval!.switch(opt.interval)}
+            style={{ fontWeight: opt.interval === c.lineItems.billingInterval!.current ? 'bold' : 'normal' }}>
+            {opt.interval}
+          </button>
+        ))}
+        {/* Line items */}
+        {c.lineItems.items.map((item) => (
+          <div key={item.id} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <span>{(item.upsell_price || item.price)?.product?.name}</span>
+            {(item as any).adjustable_quantity?.enabled && (<>
+              <button onClick={() => c.lineItems.updateQuantity(item.id, item.quantity - 1)}>-</button>
+              <span>{item.quantity}</span>
+              <button onClick={() => c.lineItems.updateQuantity(item.id, item.quantity + 1)}>+</button>
+            </>)}
+          </div>
+        ))}
+        {/* Cross-sell */}
+        {c.lineItems.crossSellItem && (
+          <div>
+            <span>Add {(c.lineItems.crossSellItem as any)?.product?.name}?</span>
+            <button onClick={c.lineItems.addCrossSell}>Add</button>
+          </div>
+        )}
+      </div>
+
+      {/* Right: Payment */}
+      <div style={{ flex: 1 }}>
+        {/* Payment type tabs */}
+        {c.paymentMethod.types.length > 1 && c.paymentMethod.types.map((t) => (
+          <button key={t.type} onClick={() => c.paymentMethod.setType(t.type)}
+            style={{ fontWeight: t.active ? 'bold' : 'normal' }}>{t.label}</button>
+        ))}
+        {/* Currency selector */}
+        {c.paymentMethod.currencies.length > 1 && (
+          <select value={c.paymentMethod.currency?.id || ''}
+            onChange={(e) => c.paymentMethod.setCurrency(e.target.value)}>
+            {c.paymentMethod.currencies.map((cur) => (
+              <option key={cur.id} value={cur.id}>{cur.symbol}</option>
+            ))}
+          </select>
+        )}
+        {/* Customer form fields */}
+        {c.form.fields.map((f) => (
+          <div key={f.name}>
+            <label>{f.name}{f.required ? ' *' : ''}</label>
+            <input type={f.type === 'email' ? 'email' : 'text'}
+              value={String((c.form.values as any)[f.name] || '')}
+              onChange={(e) => c.form.onChange(f.name, e.target.value)} />
+            {c.form.touched[f.name] && c.form.errors[f.name] && (
+              <span style={{ color: 'red' }}>{c.form.errors[f.name]}</span>
+            )}
+          </div>
+        ))}
+        {/* Promotion */}
+        {c.pricing.promotion.active && !c.pricing.promotion.applied && (
+          <div>
+            <input value={promo} onChange={(e) => setPromo(e.target.value)} placeholder="Promo code" />
+            <button onClick={() => c.pricing.promotion.apply(promo)}>Apply</button>
+          </div>
+        )}
+        {c.pricing.promotion.applied && (
+          <span>{c.pricing.promotion.code} <button onClick={c.pricing.promotion.remove}>x</button></span>
+        )}
+        {/* Price summary */}
+        <div>
+          <p>Subtotal: {c.pricing.subtotal}</p>
+          {c.pricing.discount && <p>Discount: -{c.pricing.discount}</p>}
+          {c.pricing.tax && <p>Tax ({c.pricing.tax.rate}%): {c.pricing.tax.amount}</p>}
+          {c.pricing.trial.active && <p>Trial: {c.pricing.trial.days} days free</p>}
+          <p><strong>Total: {c.pricing.total}</strong></p>
+          {c.pricing.usdEquivalent && <p>≈ {c.pricing.usdEquivalent}</p>}
+          {c.pricing.hasDynamicPricing && c.pricing.rate.display && <p>Rate: {c.pricing.rate.display}</p>}
+        </div>
+        {/* Submit button */}
+        <button onClick={c.submit.execute} disabled={!c.canSubmit}>
+          {c.submit.status === 'submitting' ? 'Processing...' : `Pay ${c.pricing.total}`}
+        </button>
+        {/* Submit status feedback */}
+        {c.submit.status === 'confirming_price' && c.submit.context?.type === 'price_change' && (
+          <div>
+            <p>Price changed by {c.submit.context.changePercent.toFixed(2)}%</p>
+            <button onClick={c.submit.confirm}>Accept</button>
+            <button onClick={c.submit.cancel}>Cancel</button>
+          </div>
+        )}
+        {c.submit.status === 'confirming_fast_pay' && c.submit.context?.type === 'fast_pay' && (
+          <div>
+            <p>Pay {c.submit.context.amount} from {c.submit.context.payType}?</p>
+            <button onClick={c.submit.confirm}>Confirm</button>
+            <button onClick={c.submit.cancel}>Cancel</button>
+          </div>
+        )}
+        {c.submit.status === 'credit_insufficient' && c.submit.context?.type === 'credit_insufficient' && (
+          <p>Insufficient: {c.submit.context.available}/{c.submit.context.required}</p>
+        )}
+        {c.submit.status === 'waiting_stripe' && <p>Complete card payment...</p>}
+        {c.submit.status === 'waiting_did' && <p>Confirm in DID Wallet...</p>}
+        {c.isCompleted && <p>Payment successful!</p>}
+        {c.submit.status === 'failed' && c.submit.context?.type === 'error' && (
+          <p style={{ color: 'red' }}>{c.submit.context.message} <button onClick={c.submit.retry}>Retry</button></p>
+        )}
+      </div>
+    </div>
+  );
+}

package/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  coverageDirectory: 'coverage',
+  restoreMocks: true,
+  clearMocks: true,
+  transform: {
+    '^.+\\.ts?$': 'ts-jest',
+  },
+  testMatch: ['**/tests/**/*.spec.ts'],
+  collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx'],
+  globals: {
+    window: {},
+  },
+};

package/lib/checkout/context/CheckoutProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CheckoutProviderProps {
+    sessionId: string;
+    children: React.ReactNode;
+}
+export declare function CheckoutProvider({ sessionId, children }: CheckoutProviderProps): JSX.Element;

package/lib/checkout/context/CheckoutProvider.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckoutProvider = CheckoutProvider;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _useCheckoutSession = require("../hooks/useCheckoutSession");
+var _usePaymentMethod = require("../hooks/usePaymentMethod");
+var _useCustomerForm = require("../hooks/useCustomerForm");
+var _useSubmit = require("../hooks/useSubmit");
+var _exchangeRate = require("../core/exchangeRate");
+var _lineItems = require("../core/lineItems");
+var _SessionContext = require("./SessionContext");
+var _PaymentMethodContext = require("./PaymentMethodContext");
+var _ExchangeRateContext = require("./ExchangeRateContext");
+var _CustomerFormContext = require("./CustomerFormContext");
+var _SubmitContext = require("./SubmitContext");
+function CheckoutProvider({
+  sessionId,
+  children
+}) {
+  const {
+    isLoading,
+    error,
+    errorCode,
+    refresh,
+    setSessionData,
+    sessionData,
+    resolvedSessionId,
+    vendorCount,
+    product,
+    subscription,
+    pageInfo
+  } = (0, _useCheckoutSession.useCheckoutSession)(sessionId);
+  const session = sessionData?.checkoutSession;
+  const effectiveSessionId = resolvedSessionId || sessionId;
+  const items = session?.line_items || [];
+  const isDonation = session?.submit_type === "donate";
+  const sessionValue = (0, _react.useMemo)(() => ({
+    sessionData,
+    sessionId,
+    effectiveSessionId,
+    isLoading,
+    error,
+    errorCode,
+    refresh,
+    items,
+    session: session || null,
+    isDonation,
+    vendorCount,
+    product,
+    subscription,
+    pageInfo
+  }), [sessionData, sessionId, effectiveSessionId, isLoading, error, errorCode, refresh, items, session, isDonation, vendorCount, product, subscription, pageInfo]);
+  const paymentMethodHook = (0, _usePaymentMethod.usePaymentMethod)(sessionData, effectiveSessionId, refresh);
+  const prevCurrencyRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const currId = paymentMethodHook.currency?.id || null;
+    if (!currId || !session || session.status === "complete") return;
+    if (prevCurrencyRef.current === null || currId !== prevCurrencyRef.current) {
+      prevCurrencyRef.current = currId;
+      (0, _lineItems.recalculatePromotionIfNeeded)(session, effectiveSessionId, currId).then(() => refresh(true));
+    }
+  }, [paymentMethodHook.currency?.id, session?.id]);
+  const paymentMethodValue = (0, _react.useMemo)(() => ({
+    current: paymentMethodHook.current,
+    currency: paymentMethodHook.currency,
+    available: paymentMethodHook.available,
+    currencies: paymentMethodHook.currencies,
+    isStripe: paymentMethodHook.isStripe,
+    isCrypto: paymentMethodHook.isCrypto,
+    isCredit: paymentMethodHook.isCredit,
+    switching: paymentMethodHook.switching,
+    setType: paymentMethodHook.setType,
+    types: paymentMethodHook.types,
+    setCurrency: paymentMethodHook.setCurrency,
+    stripe: paymentMethodHook.stripe
+  }), [paymentMethodHook.current, paymentMethodHook.currency, paymentMethodHook.available, paymentMethodHook.currencies, paymentMethodHook.isStripe, paymentMethodHook.isCrypto, paymentMethodHook.isCredit, paymentMethodHook.switching, paymentMethodHook.setType, paymentMethodHook.types, paymentMethodHook.setCurrency, paymentMethodHook.stripe]);
+  const [exchangeRate, setExchangeRate] = (0, _react.useState)(null);
+  const [rateProvider, setRateProvider] = (0, _react.useState)(null);
+  const [rateProviderDisplay, setRateProviderDisplay] = (0, _react.useState)(null);
+  const [rateFetchedAt, setRateFetchedAt] = (0, _react.useState)(null);
+  const [rateStatus, setRateStatus] = (0, _react.useState)("loading");
+  const intervalRef = (0, _react.useRef)(null);
+  const fetchingRef = (0, _react.useRef)(false);
+  const mountedRef = (0, _react.useRef)(true);
+  const hasDynamicPricing = (0, _react.useMemo)(() => (0, _exchangeRate.checkHasDynamicPricing)(items), [items]);
+  const fetchRate = (0, _ahooks.useMemoizedFn)(async () => {
+    if (!effectiveSessionId || !hasDynamicPricing || paymentMethodHook.isStripe) {
+      setRateStatus(hasDynamicPricing ? "unavailable" : "available");
+      if (paymentMethodHook.isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+      }
+      return;
+    }
+    if (fetchingRef.current) return;
+    fetchingRef.current = true;
+    try {
+      setRateStatus("loading");
+      const result = await (0, _exchangeRate.fetchExchangeRate)(effectiveSessionId, paymentMethodHook.currency?.id);
+      if (!mountedRef.current) return;
+      if (result.rate) {
+        setExchangeRate(result.rate);
+        setRateProvider(result.provider);
+        setRateProviderDisplay(result.providerDisplay);
+        setRateFetchedAt(result.fetchedAt);
+        setRateStatus("available");
+      } else {
+        setRateStatus("unavailable");
+      }
+    } catch {
+      if (!mountedRef.current) return;
+      setRateStatus("unavailable");
+    } finally {
+      fetchingRef.current = false;
+    }
+  });
+  (0, _react.useEffect)(() => {
+    mountedRef.current = true;
+    if (!hasDynamicPricing || paymentMethodHook.isStripe || !effectiveSessionId || session?.status === "complete") {
+      if (paymentMethodHook.isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+      }
+      if (session?.status === "complete") {
+        setRateStatus("available");
+      } else {
+        setRateStatus(hasDynamicPricing ? "unavailable" : "available");
+      }
+      return void 0;
+    }
+    fetchRate();
+    intervalRef.current = setInterval(fetchRate, _exchangeRate.BASE_INTERVAL);
+    const handleVisibility = () => {
+      if (!document.hidden) {
+        fetchRate();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      mountedRef.current = false;
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [hasDynamicPricing, paymentMethodHook.isStripe, effectiveSessionId, paymentMethodHook.currency?.id, session?.status]);
+  const exchangeRateValue = (0, _react.useMemo)(() => ({
+    rate: exchangeRate,
+    provider: rateProvider,
+    providerDisplay: rateProviderDisplay,
+    fetchedAt: rateFetchedAt,
+    status: rateStatus,
+    hasDynamicPricing,
+    refresh: fetchRate
+  }), [exchangeRate, rateProvider, rateProviderDisplay, rateFetchedAt, rateStatus, hasDynamicPricing, fetchRate]);
+  const customerForm = (0, _useCustomerForm.useCustomerForm)(sessionData, paymentMethodHook.currency?.id || null, paymentMethodHook.current?.id || null);
+  const submit = (0, _useSubmit.useSubmit)(sessionData, effectiveSessionId, paymentMethodHook.currency?.id || null, paymentMethodHook.isStripe, paymentMethodHook.isCredit, isDonation, customerForm.values, customerForm.validate, refresh, setSessionData);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionContext.SessionContext.Provider, {
+    value: sessionValue,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_PaymentMethodContext.PaymentMethodContext.Provider, {
+      value: paymentMethodValue,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ExchangeRateContext.ExchangeRateContext.Provider, {
+        value: exchangeRateValue,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_CustomerFormContext.CustomerFormContext.Provider, {
+          value: customerForm,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_SubmitContext.SubmitReactContext.Provider, {
+            value: submit,
+            children
+          })
+        })
+      })
+    })
+  });
+}

package/lib/checkout/context/CustomerFormContext.d.ts

@@ -0,0 +1,4 @@
+import type { UseCustomerFormReturn } from '../hooks/useCustomerForm';
+export type CustomerFormContextValue = UseCustomerFormReturn;
+export declare const CustomerFormContext: import("react").Context<UseCustomerFormReturn | null>;
+export declare function useCustomerFormContext(): CustomerFormContextValue;

package/lib/checkout/context/CustomerFormContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomerFormContext = void 0;
+exports.useCustomerFormContext = useCustomerFormContext;
+var _react = require("react");
+const CustomerFormContext = exports.CustomerFormContext = (0, _react.createContext)(null);
+function useCustomerFormContext() {
+  const ctx = (0, _react.useContext)(CustomerFormContext);
+  if (!ctx) {
+    throw new Error("useCustomerFormContext must be used within <CheckoutProvider>");
+  }
+  return ctx;
+}

package/lib/checkout/context/ExchangeRateContext.d.ts

@@ -0,0 +1,11 @@
+export interface ExchangeRateContextValue {
+    rate: string | null;
+    provider: string | null;
+    providerDisplay: string | null;
+    fetchedAt: number | null;
+    status: 'loading' | 'available' | 'unavailable';
+    hasDynamicPricing: boolean;
+    refresh: () => Promise<void>;
+}
+export declare const ExchangeRateContext: import("react").Context<ExchangeRateContextValue | null>;
+export declare function useExchangeRateContext(): ExchangeRateContextValue;

package/lib/checkout/context/ExchangeRateContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExchangeRateContext = void 0;
+exports.useExchangeRateContext = useExchangeRateContext;
+var _react = require("react");
+const ExchangeRateContext = exports.ExchangeRateContext = (0, _react.createContext)(null);
+function useExchangeRateContext() {
+  const ctx = (0, _react.useContext)(ExchangeRateContext);
+  if (!ctx) {
+    throw new Error("useExchangeRateContext must be used within <CheckoutProvider>");
+  }
+  return ctx;
+}

package/lib/checkout/context/PaymentMethodContext.d.ts

@@ -0,0 +1,26 @@
+import type { TPaymentMethodExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+export interface PaymentMethodContextValue {
+    current: TPaymentMethodExpanded;
+    currency: TPaymentCurrency;
+    available: TPaymentMethodExpanded[];
+    currencies: TPaymentCurrency[];
+    isStripe: boolean;
+    isCrypto: boolean;
+    isCredit: boolean;
+    switching: boolean;
+    setType: (type: 'stripe' | 'crypto') => Promise<void>;
+    types: Array<{
+        type: 'stripe' | 'crypto';
+        label: string;
+        currencies: TPaymentCurrency[];
+        active: boolean;
+    }>;
+    setCurrency: (currencyId: string) => Promise<void>;
+    stripe: {
+        publishableKey: string | null;
+        clientSecret: string | null;
+        status: 'idle' | 'ready' | 'processing' | 'succeeded' | 'failed';
+    } | null;
+}
+export declare const PaymentMethodContext: import("react").Context<PaymentMethodContextValue | null>;
+export declare function usePaymentMethodContext(): PaymentMethodContextValue;

package/lib/checkout/context/PaymentMethodContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentMethodContext = void 0;
+exports.usePaymentMethodContext = usePaymentMethodContext;
+var _react = require("react");
+const PaymentMethodContext = exports.PaymentMethodContext = (0, _react.createContext)(null);
+function usePaymentMethodContext() {
+  const ctx = (0, _react.useContext)(PaymentMethodContext);
+  if (!ctx) {
+    throw new Error("usePaymentMethodContext must be used within <CheckoutProvider>");
+  }
+  return ctx;
+}

package/lib/checkout/context/SessionContext.d.ts

@@ -0,0 +1,45 @@
+import type { TLineItemExpanded, TCheckoutSessionExpanded } from '@blocklet/payment-types';
+import type { SessionData } from '../hooks/useCheckoutSession';
+export interface SessionContextValue {
+    sessionData: SessionData | null;
+    sessionId: string;
+    effectiveSessionId: string;
+    isLoading: boolean;
+    error: string | null;
+    errorCode: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+    refresh: (forceRefresh?: boolean) => Promise<void>;
+    items: TLineItemExpanded[];
+    session: TCheckoutSessionExpanded | null | undefined;
+    isDonation: boolean;
+    vendorCount: number;
+    product: {
+        name: string;
+        description: string;
+        images: string[];
+        features: Array<{
+            name: string;
+            icon?: string;
+        }>;
+        billing: {
+            mode: 'payment' | 'subscription';
+            interval: 'month' | 'year' | 'week' | 'day' | null;
+            intervalCount: number;
+            displayInterval: string;
+        };
+        metadata: Record<string, string>;
+    } | null;
+    subscription: {
+        mode: 'payment' | 'subscription' | 'setup';
+        showStake: boolean;
+        confirmMessage: string;
+    } | null;
+    pageInfo: {
+        formPurposeDescription?: {
+            en: string;
+            zh: string;
+        };
+        showProductFeatures: boolean;
+    } | null;
+}
+export declare const SessionContext: import("react").Context<SessionContextValue | null>;
+export declare function useSessionContext(): SessionContextValue;

package/lib/checkout/context/SessionContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SessionContext = void 0;
+exports.useSessionContext = useSessionContext;
+var _react = require("react");
+const SessionContext = exports.SessionContext = (0, _react.createContext)(null);
+function useSessionContext() {
+  const ctx = (0, _react.useContext)(SessionContext);
+  if (!ctx) {
+    throw new Error("useSessionContext must be used within <CheckoutProvider>");
+  }
+  return ctx;
+}

package/lib/checkout/context/SubmitContext.d.ts

@@ -0,0 +1,4 @@
+import type { UseSubmitReturn } from '../hooks/useSubmit';
+export type SubmitContextValue = UseSubmitReturn;
+export declare const SubmitReactContext: import("react").Context<UseSubmitReturn | null>;
+export declare function useSubmitContext(): SubmitContextValue;

package/lib/checkout/context/SubmitContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitReactContext = void 0;
+exports.useSubmitContext = useSubmitContext;
+var _react = require("react");
+const SubmitReactContext = exports.SubmitReactContext = (0, _react.createContext)(null);
+function useSubmitContext() {
+  const ctx = (0, _react.useContext)(SubmitReactContext);
+  if (!ctx) {
+    throw new Error("useSubmitContext must be used within <CheckoutProvider>");
+  }
+  return ctx;
+}

package/lib/checkout/context/index.d.ts

@@ -0,0 +1,6 @@
+export { CheckoutProvider, type CheckoutProviderProps } from './CheckoutProvider';
+export { SessionContext, useSessionContext, type SessionContextValue } from './SessionContext';
+export { PaymentMethodContext, usePaymentMethodContext, type PaymentMethodContextValue } from './PaymentMethodContext';
+export { ExchangeRateContext, useExchangeRateContext, type ExchangeRateContextValue } from './ExchangeRateContext';
+export { CustomerFormContext, useCustomerFormContext, type CustomerFormContextValue } from './CustomerFormContext';
+export { SubmitReactContext, useSubmitContext, type SubmitContextValue } from './SubmitContext';

package/lib/checkout/context/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckoutProvider", {
+  enumerable: true,
+  get: function () {
+    return _CheckoutProvider.CheckoutProvider;
+  }
+});
+Object.defineProperty(exports, "CustomerFormContext", {
+  enumerable: true,
+  get: function () {
+    return _CustomerFormContext.CustomerFormContext;
+  }
+});
+Object.defineProperty(exports, "ExchangeRateContext", {
+  enumerable: true,
+  get: function () {
+    return _ExchangeRateContext.ExchangeRateContext;
+  }
+});
+Object.defineProperty(exports, "PaymentMethodContext", {
+  enumerable: true,
+  get: function () {
+    return _PaymentMethodContext.PaymentMethodContext;
+  }
+});
+Object.defineProperty(exports, "SessionContext", {
+  enumerable: true,
+  get: function () {
+    return _SessionContext.SessionContext;
+  }
+});
+Object.defineProperty(exports, "SubmitReactContext", {
+  enumerable: true,
+  get: function () {
+    return _SubmitContext.SubmitReactContext;
+  }
+});
+Object.defineProperty(exports, "useCustomerFormContext", {
+  enumerable: true,
+  get: function () {
+    return _CustomerFormContext.useCustomerFormContext;
+  }
+});
+Object.defineProperty(exports, "useExchangeRateContext", {
+  enumerable: true,
+  get: function () {
+    return _ExchangeRateContext.useExchangeRateContext;
+  }
+});
+Object.defineProperty(exports, "usePaymentMethodContext", {
+  enumerable: true,
+  get: function () {
+    return _PaymentMethodContext.usePaymentMethodContext;
+  }
+});
+Object.defineProperty(exports, "useSessionContext", {
+  enumerable: true,
+  get: function () {
+    return _SessionContext.useSessionContext;
+  }
+});
+Object.defineProperty(exports, "useSubmitContext", {
+  enumerable: true,
+  get: function () {
+    return _SubmitContext.useSubmitContext;
+  }
+});
+var _CheckoutProvider = require("./CheckoutProvider");
+var _SessionContext = require("./SessionContext");
+var _PaymentMethodContext = require("./PaymentMethodContext");
+var _ExchangeRateContext = require("./ExchangeRateContext");
+var _CustomerFormContext = require("./CustomerFormContext");
+var _SubmitContext = require("./SubmitContext");