Embeddable Components

<!-- CDN (Recommended) -->
<script src="https://cdn.withacclaim.com/v1/acclaim.js"></script>

<!-- NPM -->
npm install @acclaim/sdk

// ES6 Import
import Acclaim from '@acclaim/sdk';

// CommonJS
const Acclaim = require('@acclaim/sdk');

const acclaim = new Acclaim({
    apiKey: 'pk_live_your_api_key_here',
    environment: 'production' // or 'sandbox'
});

const paymentRequest = await acclaim.createPaymentRequest({
    amount: 29999,           // Amount in cents ($299.99)
    currency: 'USD',        // ISO currency code
    description: 'POL-1234 Premium',
    customer: {
        email: '[email protected]',
        name: 'John Doe'
    },
    allowedMethods: ['card', 'apple_pay', 'google_pay', 'paypal'],
    returnUrl: 'https://yoursite.com/success',
    cancelUrl: 'https://yoursite.com/cancel',
    metadata: {
        policy_id: 'pol_123',
        source: 'web'
    }
});

// Create payment element
const element = await acclaim.createElement(paymentRequest.id, {
    theme: 'default',       // 'default', 'dark', 'minimal'
    locale: 'en',          // Language code
    appearance: {
        primaryColor: '#007bff',
        borderRadius: '8px',
        fontFamily: 'Inter, sans-serif'
    }
});

// Mount to DOM
await element.mount('#payment-container');

const element = await acclaim.createElement(requestId, {
    appearance: {
        primaryColor: '#6366f1',        // Brand color
        backgroundColor: '#ffffff',     // Background color
        textColor: '#1f2937',          // Text color
        borderColor: '#d1d5db',        // Border color
        borderRadius: '8px',           // Border radius
        fontFamily: 'Inter, sans-serif', // Font family
        fontSize: '16px',              // Base font size
        padding: '12px',               // Input padding
        focusColor: '#3b82f6'          // Focus highlight color
    }
});

element.on('payment_method', async (paymentMethod) => {
    try {
        // Confirm the payment
        const result = await paymentRequest.confirm(paymentMethod.id);
        
        if (result.status === 'succeeded') {
            // Payment successful
            window.location.href = '/success';
        } else if (result.status === 'requires_action') {
            // 3D Secure or additional authentication required
            // Acclaim handles this automatically
            console.log('Additional authentication in progress...');
        } else if (result.status === 'failed') {
            // Payment failed
            showError(result.error.message);
        }
    } catch (error) {
        showError(error.message);
    }
});

element.on('error', (error) => {
    showError(error.message);
});

async function setupPayment() {
    // Initialize Acclaim
    const acclaim = new acclaim({
        apiKey: 'pk_test_your_api_key',
        environment: 'sandbox'
    });
    
    // Create payment request
    const paymentRequest = await acclaim.createPaymentRequest({
        amount: 29999, // $299.99
        currency: 'USD',
        description: 'POL-1234 Premium',
        customer: {
            email: '[email protected]'
        },
        allowedMethods: ['card', 'apple_pay', 'google_pay']
    });
    
    // Create and mount element
    const element = await acclaim.createElement(paymentRequest.id);
    await element.mount('#payment-form');
    
    // Handle payment completion
    element.on('payment_method', async (method) => {
        const submitButton = document.querySelector('#submit-button');
        submitButton.disabled = true;
        submitButton.textContent = 'Processing...';
        
        try {
            const result = await paymentRequest.confirm(method.id);
            
            if (result.status === 'succeeded') {
                window.location.href = '/success';
            } else {
                throw new Error(result.error?.message || 'Payment failed');
            }
        } catch (error) {
            showError(error.message);
            submitButton.disabled = false;
            submitButton.textContent = 'Pay Now';
        }
    });
    
    element.on('error', (error) => {
        showError(error.message);
    });
}

function showError(message) {
    const errorElement = document.querySelector('#error-message');
    errorElement.textContent = message;
    errorElement.style.display = 'block';
}

const tokenRequest = await acclaim.createTokenizationRequest({
    customer: {
        id: 'cust_123',
        email: '[email protected]'
    },
    allowedMethods: ['card'],
    usage: 'reusable',      // 'single_use' or 'reusable'
    metadata: {
        source: 'profile_page'
    }
});

const element = await acclaim.createElement(tokenRequest.id);
await element.mount('#save-card-form');

element.on('payment_method', async (method) => {
    try {
        const result = await tokenRequest.confirm();
        
        if (result.status === 'succeeded') {
            console.log('Payment method saved:', result.payment_method);
            // Show success message
            showSuccess('Payment method saved successfully');
        }
    } catch (error) {
        showError(error.message);
    }
});

// If you need manual control over 3DS
try {
    const result = await paymentRequest.confirm(paymentMethodId);
    
    if (result.requires_action) {
        // Handle 3DS authentication
        const authResult = await acclaim.handle3DSecure(result.payment_intent);
        
        if (authResult.status === 'succeeded') {
            // Authentication successful
            console.log('Payment completed after 3DS');
        }
    }
} catch (error) {
    console.error('3DS authentication failed:', error);
}

// Apple Pay is included in allowedMethods
const paymentRequest = await acclaim.createPaymentRequest({
    amount: 2999,
    currency: 'USD',
    allowedMethods: ['card', 'apple_pay'] // Apple Pay included
});

// Include Google Pay script before Acclaim
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://cdn.withacclaim.com/v1/acclaim.js"></script>

// Google Pay included in payment request
const paymentRequest = await acclaim.createPaymentRequest({
    amount: 2999,
    currency: 'USD',
    allowedMethods: ['card', 'google_pay']
});

const paymentRequest = await acclaim.createPaymentRequest({
    amount: 2999,
    currency: 'USD',
    allowedMethods: ['card', 'paypal'],
    returnUrl: 'https://yoursite.com/success', // Required for PayPal
    cancelUrl: 'https://yoursite.com/cancel'   // Required for PayPal
});

element.on('ready', () => {
    console.log('Element is ready');
});

element.on('change', (state) => {
    console.log('Element state changed:', state);
    // Update submit button based on validation
    document.querySelector('#submit-btn').disabled = !state.complete;
});

element.on('payment_method', (method) => {
    console.log('Payment method created:', method);
});

element.on('error', (error) => {
    console.error('Element error:', error);
});

element.on('focus', (field) => {
    console.log('Field focused:', field.elementType);
});

element.on('blur', (field) => {
    console.log('Field blurred:', field.elementType);
});

element.on('error', (error) => {
    switch (error.type) {
        case 'validation_error':
            // Invalid card number, expired card, etc.
            showFieldError(error.field, error.message);
            break;
            
        case 'card_declined':
            // Card was declined by issuer
            showError('Your card was declined. Please try a different payment method.');
            break;
            
        case 'network_error':
            // Network connectivity issues
            showError('Network error. Please check your connection and try again.');
            break;
            
        case 'api_error':
            // Server-side error
            showError('Something went wrong. Please try again.');
            break;
            
        default:
            showError(error.message);
    }
});

{
    type: 'validation_error',
    message: 'Your card number is invalid.',
    field: 'cardNumber',
    code: 'invalid_number'
}

// Default theme
const element = await acclaim.createElement(requestId, {
    theme: 'default'
});

// Dark theme
const element = await acclaim.createElement(requestId, {
    theme: 'dark'
});

// Minimal theme
const element = await acclaim.createElement(requestId, {
    theme: 'minimal'
});

const element = await acclaim.createElement(requestId, {
    appearance: {
        // Colors
        primaryColor: '#6366f1',
        backgroundColor: '#ffffff',
        textColor: '#1f2937',
        placeholderColor: '#9ca3af',
        borderColor: '#d1d5db',
        focusColor: '#3b82f6',
        errorColor: '#ef4444',
        
        // Typography
        fontFamily: 'Inter, -apple-system, sans-serif',
        fontSize: '16px',
        fontWeight: '400',
        
        // Layout
        borderRadius: '8px',
        borderWidth: '1px',
        padding: '12px 16px',
        
        // States
        ':hover': {
            borderColor: '#9ca3af'
        },
        ':focus': {
            borderColor: '#3b82f6',
            boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
        },
        '.invalid': {
            borderColor: '#ef4444'
        }
    }
});

const acclaim = new Acclaim({
    apiKey: 'pk_test_your_test_key',
    environment: 'sandbox'
});

# Install ngrok
npm install -g ngrok

# Expose local server
ngrok http 3000

# Use the HTTPS URL for webhook endpoint

new Acclaim(options)