@xpayeg/react

pnpm add @xpayeg/sdk @xpayeg/react
# Both packages are required. @xpayeg/react peer-depends on @xpayeg/sdk, react ^18 || ^19, react-dom ^18 || ^19.

"use client";

import { loadXPay } from "@xpayeg/sdk";

// Module-level: load once, share across all components.
export const xpayPromise = loadXPay(process.env.NEXT_PUBLIC_XPAY_PUBLISHABLE_KEY!);

"use client";

import { useState } from "react";
import { xpayPromise } from "@/lib/xpay";
import { PaymentElement, useCheckout, XPayProvider } from "@xpayeg/react";

export default function CheckoutPage() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const [creating, setCreating] = useState(false);

  const startCheckout = async () => {
    setCreating(true);
    const res = await fetch("/api/create-checkout", { method: "POST" });
    const { clientSecret } = await res.json();
    setClientSecret(clientSecret);
    setCreating(false);
  };

  if (!clientSecret) {
    return (
      <button onClick={startCheckout} disabled={creating}>
        {creating ? "Starting…" : "Pay now"}
      </button>
    );
  }

  return (
    <XPayProvider xpay={xpayPromise} options={{ clientSecret }}>
      <CheckoutForm />
    </XPayProvider>
  );
}

function CheckoutForm() {
  const state = useCheckout();

  if (state.type === "loading") return <p>Loading…</p>;
  if (state.type === "error") return <p>{state.error.message}</p>;

  const { checkout } = state;
  if (checkout.status.type === "expired") return <p>This checkout has expired.</p>;
  if (checkout.status.type === "complete") return <p>Payment complete. Thank you.</p>;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const result = await checkout.confirm({
      customerDetails: { email: "customer@example.com" },
    });
    if (result.type === "error") {
      alert(result.error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!checkout.canConfirm}>
        Pay {checkout.currency} {(checkout.amountTotal / 100).toFixed(2)}
      </button>
    </form>
  );
}

<XPayProvider xpay={xpayPromise} options={{ clientSecret, appearance, locale }}>
  {children}
</XPayProvider>

<XPayProvider xpay={xpayPromise} options={{ mode: "payment", amount: 149900, currency: "EGP" }}>
  {children}
</XPayProvider>

type UseCheckoutResult =
  | { type: "loading" }
  | { type: "error"; error: { message: string } }
  | { type: "success"; checkout: Checkout };

type Checkout = CheckoutSession & CheckoutActions;

const state = useCheckout();
if (state.type === "loading") return <Spinner />;
if (state.type === "error") return <p>{state.error.message}</p>;
const { checkout } = state;

function LineItems() {
  const state = useCheckout();
  if (state.type !== "success") return null;
  const { checkout } = state;

  return (
    <ul>
      {checkout.lineItems?.map((item) => (
        <li key={item.id}>
          <span>{item.description}</span>
          <button
            onClick={() =>
              checkout.updateLineItemQuantity({
                lineItem: item.id,
                quantity: item.quantity + 1,
              })
            }
          >
            +
          </button>
          <button
            onClick={() =>
              checkout.updateLineItemQuantity({
                lineItem: item.id,
                quantity: Math.max(1, item.quantity - 1),
              })
            }
          >
            -
          </button>
        </li>
      ))}
    </ul>
  );
}

function PromoInput() {
  const state = useCheckout();
  const [code, setCode] = useState("");
  const [error, setError] = useState("");

  if (state.type !== "success") return null;
  const { checkout } = state;

  const apply = async () => {
    setError("");
    const result = await checkout.applyPromotionCode(code);
    if (result.type === "error") setError(result.error.message);
  };

  return (
    <div>
      <input value={code} onChange={(e) => setCode(e.target.value)} />
      <button onClick={apply}>Apply</button>
      <button onClick={() => checkout.removePromotionCode()}>Remove</button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

useEffect(() => {
  if (state.type !== "success") return;
  state.checkout.on("error", (err) => {
    console.error("[XPay] unsolicited error:", err.code, err.message);
  });
}, [state]);

function useXPay(): XPayInstance | null;
function useElements(): Elements | null;

const { confirmPayment, isConfirming } = useConfirmPayment();

<PaymentElement
  onChange={(e) => setReady(e.complete)}
  onReady={() => console.log("element ready")}
/>

<PaymentElement options={{ layout: "tabs" }} onChange={(e) => setReady(e.complete)} />

<CheckoutButton
  clientSecret="cs_test_..."
  checkoutOptions={{
    onComplete: (result) => router.push(`/orders/${result.paymentIntentId}`),
    onClose: () => console.log("Customer closed checkout"),
  }}
>
  Pay Now
</CheckoutButton>

function ThemeAwareCheckout() {
  const state = useCheckout();
  const { theme } = useTheme();

  useEffect(() => {
    if (state.type === "success") {
      state.checkout.changeAppearance({ colorMode: theme as "light" | "dark" });
    }
  }, [theme, state]);

  return <PaymentElement />;
}

const handlePay = async () => {
  const { error, selectedPaymentMethod } = await checkout.submit();
  if (error) return setError(error.message);

  const ok = await showConfirmDialog(selectedPaymentMethod);
  if (!ok) return;

  const result = await checkout.confirm();
  if (result.type === "error") setError(result.error.message);
};

await checkout.confirm({
  customerDetails: { email },
  redirect: "always",
});
// On success, the page navigates away. Any code below only runs on error.