1. Merchant page loads <botshield-verify>
2. User clicks "Verify human presence"
3. BotShield verification opens (new tab)
4. User completes passkey challenge
5. Widget updates to "Human presence verified"
6. onsuccess callback fires with signed token
7. Merchant server validates token

1. Merchant page embeds iframe from cdn.botshield.ai/challenge
2. Cloudflare edge scores the request (ASN, TLS, headers)
3. iframe runs behavioral fingerprint (canvas, WebGL, mouse, timing)
4. Combined score determines pass/fail
5. postMessage sends result to parent page

<!-- Load the SDK -->
<script src="https://cdn.botshield.ai/sdk.js"></script>

<!-- Add the verification widget -->
<botshield-verify
  site-key="pk_live_YOUR_SITE_KEY"
  theme="auto"
  onsuccess="onBotShieldVerified"
  onfailure="onBotShieldFailed"
></botshield-verify>

<script>
  function onBotShieldVerified({ token }) {
    // Human verified -- enable checkout
    document.querySelector('[name=checkout]').disabled = false;

    // Send token to your server for validation
    fetch('/api/verify-botshield', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  }

  function onBotShieldFailed({ reason }) {
    console.error('BotShield verification failed:', reason);
  }
</script>