@snap-pay/react

React bindings for SNAP Elements — provider, hooks, and component wrappers.

bun add @snap-pay/js @snap-pay/elements @snap-pay/react

Usage

import { Snap } from "@snap-pay/js";
import "@snap-pay/elements"; // side effect: registers every element
import {
  SnapProvider,
  PaymentElement,
  BillingAddressElement,
  CustomerElement,
  useSnap,
  useElements,
  useClientSecret,
} from "@snap-pay/react";

const snap = new Snap(process.env.NEXT_PUBLIC_SNAP_PK!);

export function CheckoutPage({ clientSecret }: { clientSecret: string }) {
  return (
    <SnapProvider snap={snap} clientSecret={clientSecret}>
      <CustomerElement />
      <BillingAddressElement defaultCountry="Somalia" />
      <PaymentElement />
      <ConfirmButton />
    </SnapProvider>
  );
}

function ConfirmButton() {
  const snap = useSnap();
  const elements = useElements();
  const clientSecret = useClientSecret();
  return (
    <button
      onClick={async () => {
        const result = await snap.confirmPayment({ elements, clientSecret });
        if (result.status === "succeeded") window.location.href = "/thanks";
      }}
    >
      Pay
    </button>
  );
}

Components

Every wrapper accepts the standard event props (onReady, onChange, onFocus, onBlur, onFailed) plus style and className for the outer container.

| Component | Notes | |---|---| | <PaymentElement /> | Umbrella — auto-picks Wallet + Card | | <WalletElement /> | Mobile-wallet radio buttons | | <CardElement /> | Card fields inside a cross-origin iframe | | <ExpressCheckoutElement /> | Prominent one-tap buttons; adds onSubmit for the click event | | <PaymentMethodSelector /> | Tabbed Wallet/Card switcher | | <BillingAddressElement defaultCountry={...} /> | Address form | | <CustomerElement /> | Name / email / phone | | <OtpElement length={6} /> | Multi-cell OTP input | | <QrElement /> | Placeholder — emits failed on mount until the real QR handshake ships |

Hooks

• useSnap() — the Snap instance from the provider
• useElements() — the shared Elements handle
• useClientSecret() — the client secret

All three throw if called outside a <SnapProvider>.

License

MIT