@createlex/onetapforms-sdk

v1.2.1

Published

3 days ago

Free SDK for instant form completion. Faster conversions, better UX, verified data - zero cost for developers. Users pay for convenience.

0High
0Medium
0Low

createlex

onetapforms forms biometric authentication sdk face-id touch-id

@createlex/onetapforms-sdk

OneTapForms SDK for secure, biometric-authenticated form completion. Enable instant form completion through Face ID/Touch ID authentication on iOS devices.

Quick Start (30 seconds)

Choose the installation method that matches your skill level:

Option 1: Script Tag (Easiest - No Build Tools Required)

Perfect for HTML websites, WordPress, or any site where you can add a script tag:

<!-- 1. Add the script to your page -->
<script src="https://cdn.jsdelivr.net/npm/@createlex/onetapforms-sdk@latest/dist/onetapforms.umd.min.js"></script>

<!-- 2. Add a button with data attributes -->
<button
  data-onetapforms
  data-client-id="YOUR_CLIENT_ID"
  data-purpose="Complete your profile"
  data-bundles="basic,contact">
  Fill with OneTapForms
</button>

<!-- 3. Handle the result -->
<script>
document.querySelector('[data-onetapforms]')
  .addEventListener('onetapforms:complete', function(e) {
    console.log('Token:', e.detail.token);
    // Send token to your server to get user data
  });
</script>

That's it! The SDK automatically shows a QR modal when the button is clicked.

Option 2: npm Install (For React, Vue, Next.js, etc.)

npm install @createlex/onetapforms-sdk

import { OneTapForms } from '@createlex/onetapforms-sdk';

const onetap = new OneTapForms({
  clientId: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET'
});

await onetap.request({
  purpose: 'Job Application',
  bundles: ['basic', 'contact'],
  onQRReady: (qrUrl) => {
    // Show QR code to user
    document.getElementById('qr').src = qrUrl;
  },
  onComplete: ({ token }) => {
    // Exchange token for data on your server
    fetch('/api/exchange', {
      method: 'POST',
      body: JSON.stringify({ token })
    });
  }
});

Free for Developers

The SDK is completely free! No fees, usage limits, or restrictions.

Faster Form Completion - Users fill forms in seconds
Higher Conversion Rates - Reduce form abandonment
Better UX - No typing errors
Verified Data - Pre-verified user information
Zero Cost - Free SDK, free integration

Revenue comes from end users who subscribe to OneTapForms ($9-29/month) to store their data securely.

Widget Mode Reference (Script Tag)

Data Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | data-onetapforms | Yes | Marks element as OneTapForms trigger | | data-client-id | Yes | Your client ID | | data-client-secret | No | Your client secret | | data-purpose | No | Purpose shown to user (default: "Complete form") | | data-bundles | No | Comma-separated bundles (default: "basic") | | data-form-id | No | Auto-inject token into this form | | data-api-url | No | Custom API URL |

Events

Listen for these custom events on your button/element:

// Success - user approved the request
element.addEventListener('onetapforms:complete', (e) => {
  const { token, requestId } = e.detail;
  // Send token to your server
});

// Error - something went wrong
element.addEventListener('onetapforms:error', (e) => {
  const { error } = e.detail;
  console.error('Failed:', error.message);
});

Auto-Inject Token into Form

Use data-form-id to automatically add the token to a form:

<form id="myForm" method="POST" action="/submit">
  <input type="text" name="email" placeholder="Email">

  <button
    type="button"
    data-onetapforms
    data-client-id="YOUR_ID"
    data-form-id="myForm">
    Autofill with OneTapForms
  </button>

  <button type="submit">Submit</button>
</form>

<!-- Token is automatically added as: -->
<!-- <input type="hidden" name="onetapforms_token" value="..."> -->

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
  <title>Job Application</title>
</head>
<body>
  <h1>Apply Now</h1>

  <form id="applicationForm" action="/apply" method="POST">
    <input name="name" placeholder="Full Name">
    <input name="email" placeholder="Email">
    <input name="phone" placeholder="Phone">

    <button
      type="button"
      data-onetapforms
      data-client-id="your_client_id"
      data-purpose="Job application at ACME Corp"
      data-bundles="basic,contact"
      data-form-id="applicationForm"
      style="background: #007AFF; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer;">
      Fill with OneTapForms
    </button>

    <button type="submit">Submit Application</button>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/@createlex/onetapforms-sdk@latest/dist/onetapforms.umd.min.js"></script>
  <script>
    document.querySelector('[data-onetapforms]').addEventListener('onetapforms:complete', function(e) {
      alert('Form ready! Token received.');
      // Token is auto-injected into the form - submit when ready
    });
  </script>
</body>
</html>

npm API Reference

Constructor

import { OneTapForms } from '@createlex/onetapforms-sdk';

const onetap = new OneTapForms({
  clientId: 'your_client_id',       // Required
  clientSecret: 'your_secret',      // Recommended
  apiUrl: 'https://api.createlex.com', // Optional
  debug: true                       // Optional: enable logging
});

request(options)

Create a form completion request.

await onetap.request({
  // Content
  purpose: 'Complete your profile',   // Required
  bundles: ['basic', 'contact'],      // Optional
  fields: ['name', 'email'],          // Optional

  // Mode
  mode: 'auto',                       // 'auto' | 'qr' | 'redirect'
  returnUrl: 'https://...',           // For redirect mode

  // Callbacks
  onQRReady: (qrDataUrl) => {},       // QR code ready (desktop)
  onComplete: ({ token }) => {},      // User approved
  onError: (error) => {}              // Error occurred
});

handleCallback()

Handle redirect flow callback (mobile):

const result = onetap.handleCallback();
if (result) {
  const { token, requestId } = result;
  // Exchange token on server
}

cancelPolling()

Cancel active polling (cleanup):

onetap.cancelPolling();

showDownloadPrompt(options)

Encourage app downloads:

onetap.showDownloadPrompt({
  title: 'Complete Forms Faster!',
  message: 'Download OneTapForms for instant form completion.',
  buttonText: 'Download App'
});

getAppDownloadUrl()

Get App Store URL:

const url = onetap.getAppDownloadUrl();
// 'https://apps.apple.com/app/onetapforms'

Server-Side Token Exchange

Important: Always exchange tokens server-side to protect your credentials.

// Node.js example
const response = await fetch('https://api.createlex.com/api/onetapforms/exchange', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Client-ID': 'your_client_id',
    'X-Client-Secret': 'your_client_secret'
  },
  body: JSON.stringify({ token })
});

const { data } = await response.json();
// data contains: { name, email, phone, ... }

Request Modes

| Mode | When to Use | Behavior | |------|-------------|----------| | auto (default) | Most cases | Mobile = redirect, Desktop = QR | | qr | Desktop only | Shows QR code modal | | redirect | Mobile only | Opens OneTapForms app |

Getting Started

Get Credentials: Email [email protected] to receive your clientId and clientSecret (free)
Install SDK: Via script tag or npm
Add Button: With data attributes or JavaScript
Handle Token: Exchange on your server for user data

CDN URLs

# Latest version (recommended for development)
https://cdn.jsdelivr.net/npm/@createlex/onetapforms-sdk@latest/dist/onetapforms.umd.min.js

# Specific version (recommended for production)
https://cdn.jsdelivr.net/npm/@createlex/[email protected]/dist/onetapforms.umd.min.js

# Unminified (for debugging)
https://cdn.jsdelivr.net/npm/@createlex/onetapforms-sdk@latest/dist/onetapforms.umd.js

License

MIT - Free to use, modify, and distribute

Support

Issues: https://github.com/createlex/onetapforms-sdk/issues
Email: [email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@createlex/onetapforms-sdk

Quick Start (30 seconds)

Option 1: Script Tag (Easiest - No Build Tools Required)

Option 2: npm Install (For React, Vue, Next.js, etc.)

Free for Developers

Widget Mode Reference (Script Tag)

Data Attributes

Events

Auto-Inject Token into Form

Complete HTML Example

npm API Reference

Constructor

request(options)

handleCallback()

cancelPolling()

showDownloadPrompt(options)

getAppDownloadUrl()

Server-Side Token Exchange

Request Modes

Getting Started

CDN URLs

License

Support