Commerce
A single hook wrapping the browser's native checkout UI.
usePaymentRequest
Wraps the Payment Request API — shows the browser/OS's native payment sheet for the given payment method data and details, resolving with the user's PaymentResponse once they authorize it. Callers are responsible for calling response.complete("success" | "fail") once their own backend confirms the charge — this hook only tracks whether the sheet itself completed or was cancelled/errored, not whether the charge succeeded. supported: false — the SSR-safe default — where the Payment Request API doesn't exist, and pay() then resolves undefined without throwing. Support varies by browser and payment method — check supported before relying on it.
const { pay, status } = usePaymentRequest();
const response = await pay([{ supportedMethods: "basic-card" }], {
total: { label: "Total", amount: { currency: "USD", value: "10.00" } },
});
await response?.complete("success");