React hooks & components

pnpm add @morapay/react @morapay/sdk

"use client";

import { useState } from "react";
import { MorapayErrorView } from "@morapay/react";

export function CheckoutForm() {
  const [error, setError] = useState<unknown>(null);

  async function onSubmit() {
    try {
      const res = await fetch("/api/checkout", { method: "POST" });
      const json = await res.json();
      if (!json.success) setError(json);
    } catch (e) {
      setError(e);
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <MorapayErrorView error={error} theme="light" onAction={() => setError(null)} />
      <button type="submit">Pay now</button>
    </form>
  );
}

const { error, setError, clearError, viewProps } = useMorapayError();

try {
  await createLinkAction();
} catch (e) {
  setError(e);
}

return <MorapayErrorView {...viewProps} />;

"use server";
import { Morapay, isMorapayError } from "@morapay/sdk";

export async function createLinkAction() {
  const morapay = new Morapay({ /* keys from env */ });
  try {
    const link = await morapay.link.create({ title: "Order", amount: 50, currency: "USD" });
    return { ok: true, data: link };
  } catch (err) {
    if (isMorapayError(err)) {
      return {
        ok: false,
        error: {
          code: err.code,
          displayMessage: err.displayMessage,
          safeMessage: err.safeMessage,
          uiHint: err.uiHint,
          requestId: err.requestId,
        },
      };
    }
    throw err;
  }
}