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.
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');
}
});
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!