Skip to main content

HTML Data Attributes

Zero-JavaScript integration using data-aho-* attributes on any button

Installation

npm 
npm install @aho-sdk/verify

Quick Start

Add data-aho-verify="credential" to any button. The SDK auto-discovers and enhances these elements.

<button
  data-aho-verify="credential"
  data-aho-claims="age_over_21"
  data-aho-publishable-key="aho_pub_xxx"
  class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Verify Age (21+)
</button>

Request multiple claims with comma-separated values:

<button
  data-aho-verify="credential"
  data-aho-claims="given_name, family_name, age_over_18"
  data-aho-publishable-key="aho_pub_xxx"
  class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
  Verify Identity
</button>

Examples

Zero-JavaScript integration using data-aho-* attributes. Works with any existing button element.

Basic Usage

Add data-aho-verify="credential" to any button. The SDK auto-discovers and enhances these elements.

<button
  data-aho-verify="credential"
  data-aho-claims="age_over_21"
  data-aho-publishable-key="your_publishable_key"
  class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Verify Age (21+)
</button>

Multiple Claims

Request multiple claims with comma-separated values.

<button
  data-aho-verify="credential"
  data-aho-claims="given_name, family_name, age_over_18"
  data-aho-publishable-key="your_publishable_key"
  class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
  Verify Identity
</button>

Event Handling

Listen for verification events on the button element.

Click button to see events...
const btn = document.querySelector('[data-aho-verify="credential"]');

btn.addEventListener('aho:credential:verified', (e) => {
  console.log('Verified:', e.detail.result);
});

btn.addEventListener('aho:credential:error', (e) => {
  console.error('Error:', e.detail.message);
});

Custom Styling

Use your own button styles. The SDK only adds behavior, not appearance.

<button
  data-aho-verify="credential"
  data-aho-claims="given_name"
  data-aho-publishable-key="your_publishable_key"
  class="bg-gradient-to-r from-pink-500 to-violet-500 text-white px-6 py-3 rounded-full font-semibold shadow-lg hover:shadow-xl transition-shadow">
  Custom Styled Button
</button>

Available Attributes

Attribute Required Description
data-aho-verify="credential" Yes Marks the element as a credential verification button
data-aho-publishable-key Yes Your publishable key (aho_pub_xxx)
data-aho-claims Yes Comma-separated list of claims to request

API Reference

Data Attributes

Mark buttons for auto-discovery with these data attributes:

Attribute Required Description
data-aho-verify Yes Marks button for auto-discovery (no value needed)
data-aho-publishable-key No Publishable key (aho_pub_xxx). Required unless set via configure() or AhoProvider.
data-aho-claims Yes Claims to request. Comma-separated string or array. Use 'all' for all claims.
data-aho-return-claims No Which claims to return in the result. true=all requested, false=none, 'all'=all, array=specific claims. Must be subset of claims.
data-aho-document-types No Accepted document types (e.g., 'mDL', 'passport'). Defaults to all.
data-aho-client-name No Display name shown in wallet dialog.
data-aho-base-url No API base URL. Defaults to production.
data-aho-unsupported No Behavior when browser doesn't support Digital Credentials API.
data-aho-disabled No Disable the button.

Events

Events are dispatched on the button element:

Event Detail Description
aho:credential:started { claims: string[] } Verification process started.
aho:credential:statechange { state: VerifyState, previousState: VerifyState } Verification state changed.
aho:credential:verified { result: VerifyResult } Verification completed successfully.
aho:credential:failed { error: Error } Verification failed (credential rejected).
aho:credential:error { error: Error } Error occurred during verification.
aho:credential:cancelled {} User cancelled the verification.
aho:credential:unsupported { reason: string, platform: Platform, apiAvailable: boolean } Browser doesn't support Digital Credentials API.