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 loads <botshield-verify signals="true">
2. Cloudflare edge scores the request (ASN, TLS, headers)
3. Component runs behavioral fingerprint (canvas, WebGL, mouse, timing)
4. Combined score determines pass/fail
5. Events deliver result to your code

<!-- 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>