iFrame

1
import { ChangeEvent, useState } from "react";
2
import "./App.css";
3
import { useSearchParams } from "react-router-dom";
4
5
type Environment = "STAGING" | "PRODUCTION";
6
7
export default function OuterIframe() {
8
  const [searchParams] = useSearchParams();
9
10
  const [environment, setEnvironment] = useState<Environment>(
11
    (searchParams.get("environment") as Environment) || "STAGING"
12
  );
13
  const [sessionId, setSessionId] = useState<string>(
14
    (searchParams.get("sessionId") || "")
15
  );
16
17
  const [apiKey, setApiKey] = useState<string>(
18
    searchParams.get("apiKey") || ""
19
  );
20
21
  const toggleEnvironment = (selectedEnvironment: Environment) => {
22
    setEnvironment(selectedEnvironment);
23
  };
24
25
  const handleApiChange = (e: ChangeEvent<HTMLInputElement>) => {
26
    setApiKey(e.target.value);
27
  };
28
29
  const apiUrl =
30
    environment === "STAGING"
31
      ? `https://transak-double-iframe-supporter.vercel.app/staging?environment=${environment}`
32
      : `https://transak-double-iframe-supporter.vercel.app/production?environment=${environment}`;
33
34
  const finalUrl = `${apiUrl}${apiKey ? `&apiKey=${apiKey}` : ""}`;
35
36
  return (
37
    <main className="container">
38
      <div className="content">
39
        <label htmlFor="dropdown">Select Environment:</label>
40
        <select
41
          id="dropdown"
42
          value={environment}
43
          onChange={(e) => toggleEnvironment(e.target.value as Environment)}
44
        >
45
          <option value="STAGING">Staging</option>
46
          <option value="PRODUCTION">Production</option>
47
        </select>
48
      </div>
49
50
      <div className="content">
51
        <span>API Key</span>
52
        <input type="text" value={apiKey} onChange={handleApiChange} />
53
      </div>
54
55
      <iframe
56
        className="outer"
57
        src={finalUrl}
58
        allow="camera;microphone;payment"
59
      />
60
    </main>
61
  );
62
}