> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.credit.aarthiklabs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.credit.aarthiklabs.com/_mcp/server.

# NextJS Examples

> Use a NextJS client component to request an embed URL from your back-end and open the Hosted Experience.

This example shows one simple way to open the Hosted Experience from a NextJS front-end. The front-end calls your own back-end endpoint, receives `embedURL`, and renders the borrower journey.

Your front-end should never call Aarthik Labs directly and should never receive the shared API key.

## Client Component

```tsx
"use client";

import { useState } from "react";

type JourneyType = "PERSONAL_LOAN" | "GOLD_LOAN";

type HostedEmbedProps = {
  borrowerProviderID: string;
  contactNumber: string;
  journeyType: JourneyType;
};

export function HostedCreditJourney({
  borrowerProviderID,
  contactNumber,
  journeyType,
}: HostedEmbedProps) {
  const [embedURL, setEmbedURL] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  async function startJourney() {
    setIsLoading(true);
    setErrorMessage(null);

    try {
      const response = await fetch("/api/credit/hosted-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          borrowerProviderID,
          journeyType,
          profile: {
            contactNumber,
          },
        }),
      });

      if (!response.ok) {
        const details = await response.json().catch(() => ({}));
        throw new Error(
          details.error ?? "Unable to start the credit journey.",
        );
      }

      const data = (await response.json()) as { embedURL: string };
      setEmbedURL(data.embedURL);
    } catch (error) {
      setErrorMessage(
        error instanceof Error ? error.message : "Something went wrong.",
      );
    } finally {
      setIsLoading(false);
    }
  }

  if (embedURL) {
    return (
      <iframe
        src={embedURL}
        title="Credit Journey"
        allow="camera; microphone; clipboard-read; clipboard-write"
        style={{
          width: "100%",
          height: "80vh",
          border: 0,
        }}
      />
    );
  }

  return (
    <div>
      <button type="button" onClick={startJourney} disabled={isLoading}>
        {isLoading ? "Starting..." : "Start credit journey"}
      </button>
      {errorMessage ? <p>{errorMessage}</p> : null}
    </div>
  );
}
```

## `iframe` Requirements

For web embeds, use:

```tsx
allow="camera; microphone; clipboard-read; clipboard-write"
```

Also make sure:

* your domain is allowlisted for the application
* your host app runs over HTTPS in production
* your page layout gives the `iframe` enough height for borrower forms and lender screens
* your own Content Security Policy allows the Hosted Experience URL as a frame source

## Retry Behavior

Show a loading state while your back-end creates the URL. If URL creation fails, show a retry action that calls your back-end again.

Do not retry by reusing an old `embedURL`. The URL contains a short-lived bootstrap token and should be treated as a one-time browser entry point.