Skip to navigation
DocumentationHosted ExperienceFront-End Integrations

NextJS Examples

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

"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:

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.