dcapi-org-iso-mdoc

v1.0.3

Published

2 months ago

JavaScript SDK for age verification services using QR code and iframe integration

0High
0Medium
0Low

hatflabs

age-verification sdk javascript iframe qr-code modal

OneProof Age Verification - dcapi-org-iso-mdoc

Simple JavaScript library for age verification using digital credentials.

NPM Package: https://www.npmjs.com/package/dcapi-org-iso-mdoc

Installation

Via CDN (Recommended):

<!-- jsDelivr (Recommended) -->
<script src="https://cdn.jsdelivr.net/npm/dcapi-org-iso-mdoc@1/dist/dcapi-org-iso-mdoc.min.js"></script>

<!-- unpkg (Alternative) -->
<script src="https://unpkg.com/dcapi-org-iso-mdoc@1/dist/dcapi-org-iso-mdoc.min.js"></script>

Via NPM:

npm install dcapi-org-iso-mdoc

Quick Start (3 lines of code!)

<!-- 1. Include the library -->
<script src="https://cdn.jsdelivr.net/npm/dcapi-org-iso-mdoc@1/dist/dcapi-org-iso-mdoc.min.js"></script>

<!-- 2. Add a verify button -->
<button onclick="verifyAge()">Verify Age</button>

<!-- 3. Call the verification -->
<script>
  async function verifyAge() {
    const dataToVerify = {
      dataElements: {
        isoMain: {
          age_over_18: false,
          age_over_21: false,
          portrait: false,
        },
      },
    };
    const result = await DCAPIorgIsoMdoc.requestCredential({
      verifierUrl: "https://dcapi.oneproof.com",
      dataElements: dataToVerify.dataElements,
    });
    alert("Age verified!");
  }
</script>

Complete Example

<!DOCTYPE html>
<html>
  <head>
    <title>My Store</title>
    <!-- Optional: Include CSS for better UI -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/dcapi-org-iso-mdoc@1/dist/dcapi-org-iso-mdoc.css"
    />
  </head>
  <body>
    <h1>Purchase Alcohol</h1>

    <button id="verifyAge">Verify Age to Continue</button>

    <!-- Include OneProof Library -->
    <script src="https://cdn.jsdelivr.net/npm/dcapi-org-iso-mdoc@1/dist/dcapi-org-iso-mdoc.min.js"></script>

    <script>
      document.getElementById("verifyAge").onclick = async function () {
        try {
          // Verify user's age
          const dataToVerify = {
            dataElements: {
              isoMain: {
                age_over_18: false,
                age_over_21: false,
                portrait: false,
              },
            },
          };
          const result = await DCAPIorgIsoMdoc.requestCredential({
            verifierUrl: "https://dcapi.oneproof.com",
            dataElements: dataToVerify.dataElements,
          });

          // User verified - allow purchase
          alert("✅ Age verified! Proceeding to checkout...");
          window.location.href = "/checkout";
        } catch (error) {
          // Verification failed
          alert("❌ Age verification required to continue");
        }
      };
    </script>
  </body>
</html>

What It Does

User clicks "Verify Age"
Digital Credentials API opens (built into modern browsers)
User presents their digital ID (e.g., mobile driver's license)
Age is verified without sharing full ID details
Result returned to your website

Browser Support

Works in:

✅ Chrome (with Digital Credentials enabled)
✅ Edge (with Digital Credentials enabled)
⚠️ Other browsers: Coming soon

To enable in Chrome/Edge:

Go to chrome://flags
Enable "Experimental Web Platform features"
Restart browser

API Reference

Basic Usage

DCAPIorgIsoMdoc.requestCredential(options);

Parameters:

options.verifierUrl (required): Your verification server URL

Returns: Promise that resolves with verification result

Example with Error Handling

document.getElementById("buyButton").onclick = async function () {
  try {
    const verification = await DCAPIorgIsoMdoc.requestCredential({
      verifierUrl: "https://dcapi.oneproof.com",
    });

    // Success - enable purchase
    console.log("User verified:", verification);
    enableCheckout();
  } catch (error) {
    // Handle errors
    if (error.message.includes("not available")) {
      alert("Please use a supported browser");
    } else {
      alert("Verification failed. Please try again.");
    }
  }
};

Advanced: Custom Data Elements

Request specific age thresholds or portrait:

await DCAPIorgIsoMdoc.requestCredential({
  verifierUrl: "https://dcapi.oneproof.com",
  dataElements: {
    isoMain: {
      age_over_18: false, // Request age_over_18
      age_over_21: false, // Request age_over_21
      portrait: false, // Request portrait photo
    },
  },
});

For Walmart & Large Retailers

Integration Steps:

Add script tag to your checkout page header
Add verification button before payment
Handle result - proceed if verified

Security Features:

✅ Subresource Integrity - Code cannot be tampered
✅ HTTPS Required - Secure transmission
✅ Minified & Obfuscated - Protected source code
✅ Privacy-preserving - Only age verified, no full ID shared

Production Deployment

Use CDN version with integrity hash for security:

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dcapi-org-iso-mdoc.min.js"
  integrity="sha384-YOUR_INTEGRITY_HASH_HERE"
  crossorigin="anonymous"
></script>

Get the latest SRI hash from: https://www.jsdelivr.com/package/npm/dcapi-org-iso-mdoc

Support

📧 Email: [email protected]
📚 Documentation: https://docs.oneproof.com
🐛 Issues: https://github.com/oneproof/dcapi-org-iso-mdoc/issues

License

MIT License - See LICENSE file for details