Micro Documentation

Auth Element

The Auth Element provides a secure authentication interface for users to access paywall-protected content. Once authenticated, you receive a session token that can be used to make paywall requests.

Basic Integration

Add the Auth Element to your page and listen for the authorized event:

import { loadMicroPayments } from '@todaqmicro/payment-js';

// Initialize MicroPayments
const micro = await loadMicroPayments('YOUR_PUBLIC_SECRET');
const elements = micro.elements();

// Create the auth element
const authElement = await elements.create('auth', {
  theme: 'light',
});

// Mount the element
authElement.mount('#auth-container');

// Listen for successful authentication
document.addEventListener('authorized', async (event) => {
    const { session } = event.detail;
    console.log('User authenticated! Session:', session);
    
    // Make a paywall request with just the amount
    const response = await fetch('https://pay.m.todaq.net/v3/paywall', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Cookie': `session_id=${session}`
        },
        body: JSON.stringify({
            amount: 5.00  // Payment amount in dollars
        })
    });
    
    if (response.ok) {
        console.log('Payment approved!');
        // Grant access to your content
    } else if (response.status === 408) {
        console.log('Payment timeout - user did not approve in time');
    }
});

Simplified Paywall API

The paywall endpoint now only requires the amount parameter. The system automatically:

This means you don’t need to manage payment type hashes or destination URLs - just specify how much to charge!