@proxy-checkout/react-js

@proxy-checkout/react-js

React bindings for @proxy-checkout/client-js.

Current surface

import { loadProxyCheckout } from "@proxy-checkout/client-js";
import {
  AskPayerToPayElement,
  ProxyCheckoutProvider,
  useProxyCheckout,
  useProxyElements,
} from "@proxy-checkout/react-js";

const proxyCheckoutPromise = loadProxyCheckout("pk_test_123");

function Checkout() {
  return (
    <ProxyCheckoutProvider
      proxyCheckout={proxyCheckoutPromise}
      options={{
        appearance: {
          theme: "proxy",
          variables: {
            colorPrimary: "#094fbd",
          },
        },
      }}
    >
      <AskPayerToPayElement
        options={{
          handoffUrl: "https://pay.proxycheckout.com/s/psess_123?pk=pk_test_123",
          label: "Ask a parent to unlock",
        }}
        onClick={({ url }) => {
          openShareSheet(url);
        }}
      />
    </ProxyCheckoutProvider>
  );
}

Create handoffUrl on your backend with proxy.sessions.createHandoff(...) from @proxy-checkout/server-js, return it to the browser, and pass it to options.handoffUrl.

ProxyCheckoutProvider accepts a ProxyCheckout object, a promise resolving to one, or null for server-rendered/static shells that hydrate later. Once a non-null proxyCheckout value has been set, it is treated as immutable.

Exports

• ProxyCheckoutProvider
• ProxyCheckoutConsumer
• useProxyCheckout
• useProxyElements
• AskPayerToPayElement
• Public option and event types re-exported from @proxy-checkout/client-js

First Publish Decisions

The first public package versions are intentionally 0.0.x because the SDK API is early and expected to change. The npm package is MIT-licensed under the package-scoped LICENSE file.