@wajub/react

Wajub Components for React.

Install

npm install @wajub/react @wajub/js

Quick start — hosted checkout

"use client";

import { WajubProvider, CheckoutEmbed } from "@wajub/react";

export function PayPage({ sessionId }: { sessionId: string }) {
  return (
    <WajubProvider>
      <CheckoutEmbed
        sessionId={sessionId}
        onSuccess={() => (window.location.href = "/thanks")}
        onError={(e) => console.error(e)}
      />
    </WajubProvider>
  );
}

Create sessionId on your server, then pass it as a prop. Never expose secret keys (sk_...) in the browser.

Components

import { useRef } from "react";
import type { ComponentInstance } from "@wajub/js";
import { WajubProvider, CardComponent, useConfirmPayment } from "@wajub/react";

function PayForm({ sessionId }: { sessionId: string }) {
  const confirm = useConfirmPayment(sessionId);
  const cardRef = useRef<ComponentInstance | null>(null);

  return (
    <WajubProvider>
      <CardComponent sessionId={sessionId} onInstance={(c) => { cardRef.current = c; }} />
      <button onClick={() => cardRef.current && confirm(cardRef.current)}>Pay</button>
    </WajubProvider>
  );
}

API

| Export | Description | |--------|-------------| | WajubProvider | Loads the checkout SDK once for the subtree | | CheckoutEmbed | Full hosted checkout inline | | CardComponent | Card fields only | | PaymentComponent | Payment method selector + form | | AddressComponent | Shipping / billing address | | MobileMoneyComponent | Mobile money form | | WalletComponent | Apple Pay / Google Pay | | useWajub() | Access loaded SDK (throws while loading) | | useWajubOptional() | Safe access (null during SSR) | | useLoadWajub() | Trigger SDK load manually | | useConfirmPayment() | Submit a mounted component |

Next.js

• Mark pages "use client".
• Create the session on your server — never expose sk_... to the client.
• Prefer WajubProvider at layout or page level.

Documentation

Integration guide: docs.wajub.com/tools/components/react

License

MIT