@reflow-works/react

Headless React/Hydrogen bindings for Reflow Works. Beta; provider sandbox and merchant-approved origins only. Requires React 18.3 or 19.

npm install @reflow-works/react@beta

import {
  ReflowProvider,
  useReflowClient,
  useReflowPayment,
} from "@reflow-works/react";
import { useCallback } from "react";

export function CheckoutRoot({ session, children }) {
  const getAccessToken = useCallback(
    () => session.accessToken,
    [session.accessToken],
  );
  const client = useReflowClient({
    storeId: session.context.storeId,
    environment: session.context.environment,
    getAccessToken,
  });
  return <ReflowProvider client={client}>{children}</ReflowProvider>;
}
function PaymentStatus({ sessionId }) {
  const { status, result, error, resume } = useReflowPayment(sessionId);
  if (error) return <button onClick={resume}>Check this payment again</button>;
  if (result?.session.status === "completed") return <p>Order confirmed</p>;
  if (result?.session.status === "order_pending")
    return <p>Payment recorded; order under review</p>;
  return (
    <p role="status">
      {status === "checking" ? "Checking payment…" : "Payment status updated"}
    </p>
  );
}

The hook stops monitoring on unmount, inactive state, session change or client change. It never initiates a charge. settled means monitoring reached a terminal or review state; inspect the server result before showing order success. Clear/remount your provider when the shopper changes.

Hydrogen: use @reflow-works/checkout in per-request loaders/actions and these hooks in client components. Keep shopper tokens in a protected merchant session or memory; never serialize merchant/gateway credentials. This package has no automatic cart/order creation in Shopify and does not replace Shopify checkout without approval. Use a Shopify cart's authoritative checkout URL for the native integration mode.

No DOM access at import time, no tracking without integration and no imposed design system. Client packages are SemVer-versioned independently of server rollout configuration. See the checkout package for identity, retries and API setup. Support: [email protected].