captchala-php-demo/inline.html at main · Captcha-La/captchala-php-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline embed · CaptchaLa demo</title>
<meta name="description" content="CaptchaLa inline embed demo — verification UI rendered inline as part of your page layout.">
<link rel="icon" href="https://captcha.la/favicon.svg">
<link rel="stylesheet" href="/_shared.css">
</head>
<body>

<header>
  <a class="brand" href="/"><b>Captcha</b>La · standalone demo</a>
  <nav>
    <a href="/">Home</a>
    <a href="https://captcha.la/en/docs">Docs</a>
    <a href="https://dash.captcha.la/register">Get app key</a>
  </nav>
</header>

<main>
  <h1>Inline embed</h1>
  <p class="lead">
    Verification UI rendered inline as part of your page layout — no modal, no floating widget.
    The user sees a verification block where you place it.
    <a href="/inline.html">View source</a>.
  </p>

  <nav class="tabs">
    <a href="/popup.html">Popup</a>
    <a href="/float.html">Float</a>
    <a href="/bind.html">Bind to button</a>
    <a href="/inline.html" class="active">Inline embed</a>
    <a href="/server-token.html">Server token</a>
  </nav>

  <section class="demo">
    <h2>Live demo</h2>
    <p class="subtitle">The widget is part of the page flow, like any other component.</p>

    <div class="stage" style="padding: 20px; align-items: stretch;">
      <div style="background: #fff; border-radius: 8px; padding: 16px; max-width: 420px; margin: 0 auto; width: 100%;">
        <p style="margin: 0 0 12px; color: #4B5563; font-size: 14px;">Verify to continue:</p>
        <div id="inline-container"></div>
        <div id="result" class="result" style="margin-top: 12px;"></div>
      </div>
    </div>

    <div class="actions">
      <a href="/inline.html">View HTML source</a>
      <a href="/_sdk.js">SDK loader source</a>
      <a href="/verify.php">Backend verify.php</a>
    </div>
  </section>

  <section class="demo">
    <h2>Integration code</h2>
    <pre><span class="k">&lt;script</span> src=<span class="s">"https://cdn.captcha-cdn.net/captchala.js"</span><span class="k">&gt;&lt;/script&gt;</span>

<span class="k">&lt;div</span> id=<span class="s">"captcha-inline"</span><span class="k">&gt;&lt;/div&gt;</span>

<span class="k">&lt;script&gt;</span>
Captchala.init({
  appKey: <span class="s">'YOUR_APP_KEY'</span>,
  product: <span class="s">'inline'</span>,
  container: <span class="s">'#captcha-inline'</span>,
  action: <span class="s">'default'</span>,
  onSuccess: (res) =&gt; {
    fetch(<span class="s">'/verify.php'</span>, {
      method: <span class="s">'POST'</span>,
      headers: { <span class="s">'Content-Type'</span>: <span class="s">'application/json'</span> },
      body: JSON.stringify({ token: res.token, action: <span class="s">'default'</span> })
    });
  }
});
<span class="k">&lt;/script&gt;</span></pre>
  </section>

  <section class="demo">
    <h2>When to use inline</h2>
    <p class="subtitle" style="margin-bottom: 0;">
      Embedding verification as part of a flow where it's the explicit subject of attention — e.g. before a high-value action that's the only thing on the page. Less common than popup or float, but useful when verification is its own step rather than a gate before something else.
    </p>
  </section>
</main>

<footer>
  <a href="https://captcha.la">CaptchaLa</a>
  <a href="https://captcha.la/en/privacy">Privacy</a>
  <a href="https://captcha.la/en/terms">Terms</a>
  <a href="/LICENSE">MIT License</a>
</footer>

<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>
<script>
function showResult(ok, msg) {
  const el = document.getElementById('result');
  el.className = 'result ' + (ok ? 'ok' : 'err');
  el.textContent = msg;
}
loadCaptchala(function () {
  // SDK product enum: popup / float / bind / embed (no 'inline')
  Captchala.init({
    appKey: 'demo_app',
    product: 'embed',
    action: 'default',
  })
  .onSuccess(async function (res) {
    try {
      const r = await fetch('/verify.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token: res.token, action: 'default' })
      });
      const j = await r.json();
      if (j.ok) showResult(true, '✓ verified · risk_score=' + (j.risk_score ?? 'n/a'));
      else showResult(false, '✗ backend rejected: ' + (j.error || 'unknown'));
    } catch (e) { showResult(false, '✗ network error: ' + e.message); }
  })
  .onError(function (err) { showResult(false, '✗ ' + (err && err.message || 'verification failed')); })
  .appendTo('#inline-container');
}, function (err) { showResult(false, '✗ SDK load failed: ' + (err && err.message || err)); });
</script>

</body>
</html>