@mbsc-core/checkout

React components for the MBSC stablecoin issuance application flow (embedding SDK).

Install with your package manager (e.g. add @mbsc-core/checkout).

Usage

1. Wrap your app root (or the parent of the application screen) with MBSCCheckoutProvider, passing the API base URL and auth method.
2. Place ApplyForm (application form) and AccountCard (account / 2FA status) as children.

Minimal example (cookie auth)

import {
  MBSCCheckoutProvider,
  ApplyForm,
  AccountCard,
} from "@mbsc-core/checkout";

export default function ApplyPage() {
  const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000";

  return (
    <MBSCCheckoutProvider apiBaseUrl={apiBaseUrl} credentials="include">
      <div>
        <ApplyForm />
        <AccountCard />
      </div>
    </MBSCCheckoutProvider>
  );
}

Custom copy

Pass copy to ApplyForm and AccountCard to override display strings.

<ApplyForm
  copy={{
    submitButton: "Submit",
    amountJpy: "Amount (JPY)",
    // ...
  }}
  applyCardCopy={{ title: "Application received", /* ... */ }}
/>
<AccountCard copy={{ title: "Account", setupButton: "Set up 2FA", /* ... */ }} />

Using Next.js Link

Pass linkComponent to render the AccountCard 2FA link with Next.js Link.

import Link from "next/link";

function NextLink({ href, children }: { href: string; children: React.ReactNode }) {
  return <Link href={href}>{children}</Link>;
}

<AccountCard
  linkComponent={NextLink}
  setup2FaPath="/settings/2fa"
/>

Token auth

When using an Authorization header instead of cookies:

<MBSCCheckoutProvider
  apiBaseUrl={apiBaseUrl}
  credentials={{
    getHeaders: () => ({ Authorization: `Bearer ${yourToken}` }),
  }}
>
  <ApplyForm />
</MBSCCheckoutProvider>

API

• MBSCCheckoutProvider
  • apiBaseUrl: string — MBSC API base URL
  • credentials?: "include" | { getHeaders: () => Record<string, string> } — Auth method (default "include")
• ApplyForm
  • copy?: Partial<ApplyFormCopy> — Form labels
  • applyCardCopy?: Partial<ApplyCardCopy> — Application result card labels
• AccountCard
  • copy?: Partial<ApplyAccountCardCopy>
  • linkComponent?: React.ComponentType<{ href: string; children: React.ReactNode }>
  • setup2FaPath?: string — Path to 2FA setup page (default "/settings/2fa")

Types (ApplyFormCopy, ApplyCardCopy, ApplyAccountCardCopy, etc.) are defined in @mbsc-core/types.

Output: ESM (.mjs), CJS (.js), and type definitions (.d.ts) are emitted to dist/.