Skip to main content
The React entry point lives under the payluk-escrow-inline-checkout/react subpath. It exposes the useEscrowCheckout hook and an EscrowCheckoutButton component.
You still call initEscrowCheckout() once at your app root. The React helpers read from that single initialization.

​
Initialize at the root

// app entry (e.g. main.tsx / _app.tsx)
import { initEscrowCheckout } from 'payluk-escrow-inline-checkout';

initEscrowCheckout({ publicKey: '<YOUR_PUBLISHABLE_KEY>' });

​
useEscrowCheckout()

The hook exposes the widget’s readiness, an in-flight loading flag, the last error, and a pay function that mirrors the core pay() but manages loading and error state for you. 
import { useEscrowCheckout } from 'payluk-escrow-inline-checkout/react';

function CheckoutButton({ token }: { token: string }) {
  const { ready, loading, error, pay } = useEscrowCheckout();

  const handlePay = () =>
    pay({
      paymentToken: token,
      reference: `order_${Date.now()}`,
      redirectUrl: 'https://yourapp.com/checkout/complete',
      callback: (result) => console.log(result),
    });

  return (
    <>
      <button onClick={handlePay} disabled={!ready || loading}>
        {loading ? 'Processing…' : 'Pay with Escrow'}
      </button>
      {error && <p role="alert">{error.message}</p>}
    </>
  );
}

​
Returns — UseEscrowCheckoutResult

FieldTypeDescription
readybooleantrue once the widget script has loaded.
loadingbooleantrue while a pay() call is in flight.
errorError | nullThe last error encountered, normalized to an Error.
paytypeof paySame signature as the core pay() function.
The hook takes no arguments.

​
<EscrowCheckoutButton>

A ready-made button that calls pay() on click. Rendering props (children, disabled, className, title) control the button; the rest are forwarded to pay(). 
import { EscrowCheckoutButton } from 'payluk-escrow-inline-checkout/react';

<EscrowCheckoutButton
  paymentToken="PY_8AB12C9D3045"
  reference="order_2026_0001"
  redirectUrl="https://yourapp.com/checkout/complete"
  brand="Acme Store"
  className="btn btn-primary"
  callback={(result) => console.log(result)}
  onClose={() => console.log('closed')}
>
  Pay with Escrow
</EscrowCheckoutButton>

​
Props — EscrowCheckoutButtonProps

PropTypeRequiredDescription
paymentTokenstring | string[]YesToken(s) to fund.
referencestringYesYour unique checkout reference.
redirectUrlstringYesPost-completion redirect URL.
childrenReact.ReactNodeNoButton label. Defaults to Pay.
disabledbooleanNoDisables the button.
classNamestringNoCSS class for the button.
titlestringNoNative title attribute.
brandstringNoForwarded to pay().
customerIdstringNoForwarded to pay().
logoUrlstringNoForwarded to pay().
extraRecord<string, unknown>NoForwarded to pay().
callback(result: any) => voidNoForwarded to pay().
onClose() => voidNoForwarded to pay().

​
Next.js & SSR

The widget runs in the browser only. Trigger pay() from a client component in response to a user action (a click), never during render or on the server — a server-side call throws BROWSER_ONLY. In the App Router, mark the file with 'use client'.