@pushcash/react

React bindings for the Push UX Web SDK — a <PushUX> component that presents the Push-hosted payment UX in a modal, and a <PushWidget> component that renders the card-entry form. Both are thin wrappers over the always-latest core loaded from cdn.pushcash.com.

Install

npm install @pushcash/react

react and react-dom (>=17 <20) are peer dependencies you already have. The package injects the core from cdn.pushcash.com at runtime, so allowlist that host in your CSP script-src and frame-src. If the core cannot load (host blocked by CSP, or a network/CDN failure), the modal simply does not appear — verify the CSP during integration.

Usage

Once your submit handler's POST /authorize returns 202 { id }, render <PushUX> with that intent id. It presents the modal on mount and renders nothing itself:

import { PushUX } from '@pushcash/react';

function Checkout({ intentId }: { intentId: string }) {
  // Render this only once you hold an intent id (e.g. after the 202); unmount it to end the flow.
  return <PushUX intentId={intentId} onExit={() => refetchIntentStatus(intentId)} />;
}

<PushUX> owns the lifecycle: it presents the modal when the core is ready, re-presents it if intentId changes, and destroys the handler on unmount — so you never leak an instance.

onExit is advisory: it fires once when the flow ends (completion or dismissal) and carries no result. The authoritative outcome is the server's — fetch it from your backend (GET /intent) or the intent webhook and route the user from there.

Collecting a card with <PushWidget>

<PushWidget> renders the Push card-entry form. Enable your submit button from onValid, then call tokenize() through a ref to get a one-time token for POST /authorize:

import { PushWidget } from '@pushcash/react';
import type { PushWidgetRef } from '@pushcash/react';
import { useRef, useState } from 'react';

function CardForm({ url }: { url: string }) {
  const widget = useRef<PushWidgetRef>(null);
  const [ready, setReady] = useState(false);

  const pay = async () => {
    const result = await widget.current?.tokenize();
    if (!result) return;
    // send result.token to your backend, which calls POST /authorize
    await yourBackend.authorize(result.token);
  };

  return (
    <>
      <PushWidget ref={widget} url={url} onValid={() => setReady(true)} />
      <button onClick={pay} disabled={!ready}>Pay</button>
    </>
  );
}

url comes from the create-user-url endpoint. <PushWidget> renders the form on mount and tears it down on unmount.

License

MIT