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

1"use client";
2
3import { useState } from "react";
4
5type JourneyType = "PERSONAL_LOAN" | "GOLD_LOAN";
6
7type HostedEmbedProps = {
8  borrowerProviderID: string;
9  contactNumber: string;
10  journeyType: JourneyType;
11};
12
13export function HostedCreditJourney({
14  borrowerProviderID,
15  contactNumber,
16  journeyType,
17}: HostedEmbedProps) {
18  const [embedURL, setEmbedURL] = useState<string | null>(null);
19  const [errorMessage, setErrorMessage] = useState<string | null>(null);
20  const [isLoading, setIsLoading] = useState(false);
21
22  async function startJourney() {
23    setIsLoading(true);
24    setErrorMessage(null);
25
26    try {
27      const response = await fetch("/api/credit/hosted-session", {
28        method: "POST",
29        headers: { "Content-Type": "application/json" },
30        body: JSON.stringify({
31          borrowerProviderID,
32          journeyType,
33          profile: {
34            contactNumber,
35          },
36        }),
37      });
38
39      if (!response.ok) {
40        const details = await response.json().catch(() => ({}));
41        throw new Error(
42          details.error ?? "Unable to start the credit journey.",
43        );
44      }
45
46      const data = (await response.json()) as { embedURL: string };
47      setEmbedURL(data.embedURL);
48    } catch (error) {
49      setErrorMessage(
50        error instanceof Error ? error.message : "Something went wrong.",
51      );
52    } finally {
53      setIsLoading(false);
54    }
55  }
56
57  if (embedURL) {
58    return (
59      <iframe
60        src={embedURL}
61        title="Credit Journey"
62        allow="camera; microphone; clipboard-read; clipboard-write"
63        style={{
64          width: "100%",
65          height: "80vh",
66          border: 0,
67        }}
68      />
69    );
70  }
71
72  return (
73    <div>
74      <button type="button" onClick={startJourney} disabled={isLoading}>
75        {isLoading ? "Starting..." : "Start credit journey"}
76      </button>
77      {errorMessage ? <p>{errorMessage}</p> : null}
78    </div>
79  );
80}

iframe Requirements

For web embeds, use:

1allow="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.