Customization: Loading States

Overview

The ConnexPay payments SDK has several distinct loading phases that require different UI treatments:

SDK Initialization - Script loading and merchant verification
Form Creation - Payment form rendering inside iframe
Payment Processing - Transaction submission and response

Each phase provides specific events to help you create smooth loading experiences.

SDK Initialization Loading

Basic Loading State

Show a loading indicator while the SDK initializes:

const connexpay = ConnexPay('your_client_id');

// Show initial loading state
showSDKLoading();

if (connexpay.isSDKReady()) {
    hideSDKLoading();
    initializePaymentForm();
} else {
    connexpay.on('ready', () => {
        hideSDKLoading();
        initializePaymentForm();
    });
}

connexpay.on('error', (error) => {
    hideSDKLoading();
    showError('Failed to initialize payment system');
});

function showSDKLoading() {
    document.getElementById('sdk-loading').style.display = 'block';
    document.getElementById('payment-section').style.display = 'none';
}

function hideSDKLoading() {
    document.getElementById('sdk-loading').style.display = 'none';
}

HTML Loading Structure

<div id="payment-container">
    <!-- SDK Loading -->
    <div id="sdk-loading" class="loading-state">
        <div class="spinner"></div>
        <p>Initializing secure payment system...</p>
    </div>
    
    <!-- Form Loading -->
    <div id="form-loading" class="loading-state" style="display: none;">
        <div class="spinner"></div>
        <p>Loading payment form...</p>
    </div>
    
    <!-- Payment Form -->
    <div id="payment-section" style="display: none;">
        <div id="connexpay-element"></div>
        <button id="submit-button" disabled>Pay Now</button>
    </div>
    
    <!-- Processing Loading -->
    <div id="processing-loading" class="loading-state" style="display: none;">
        <div class="spinner"></div>
        <p>Processing payment...</p>
    </div>
</div>

Form Creation Loading

Form Rendering States

Handle loading while the payment form is being created:

async function initializePaymentForm() {
    try {
        // Show form loading
        showFormLoading();
        
        // Configure appearance and customer data
        await connexpay.setAppearance({ theme: 'light' });
        await connexpay.setCustomer({
            firstName: 'Sarah',
            lastName: 'Johnson',
            email: '[email protected]'
        });
        
        // Get checkout session
        const session = await createCheckoutSession();
        
        // Create payment form
        await connexpay.createPaymentForm({
            element: '#connexpay-element',
            checkoutSessionID: session.checkoutSessionId
        });
        
    } catch (error) {
        hideFormLoading();
        showError('Failed to load payment form');
    }
}

// Form is ready when rendered event fires
connexpay.on('rendered', () => {
    hideFormLoading();
    showPaymentSection();
});

function showFormLoading() {
    document.getElementById('form-loading').style.display = 'block';
    document.getElementById('payment-section').style.display = 'none';
}

function hideFormLoading() {
    document.getElementById('form-loading').style.display = 'none';
}

function showPaymentSection() {
    document.getElementById('payment-section').style.display = 'block';
    document.getElementById('submit-button').disabled = false;
}

Payment Processing Loading

Submit Button States

Provide clear feedback during payment processing:

async function submitPayment() {
    const submitButton = document.getElementById('submit-button');
    const originalText = submitButton.textContent;
    
    try {
        // Show processing state
        showProcessingState(submitButton);
        
        // Process payment
        const result = await connexpay.confirmPayment();
        
        if (result.success) {
            showSuccessState(submitButton);
            // Redirect after showing success
            setTimeout(() => {
                window.location.href = '/payment-success';
            }, 1500);
        }
        
    } catch (error) {
        hideProcessingState(submitButton, originalText);
        showError(error.message || 'Payment failed');
    }
}

function showProcessingState(button) {
    button.disabled = true;
    button.innerHTML = `
        <span class="spinner-sm"></span>
        Processing...
    `;
    button.classList.add('processing');
}

function showSuccessState(button) {
    button.innerHTML = `
        <span class="checkmark">✓</span>
        Payment Successful
    `;
    button.classList.remove('processing');
    button.classList.add('success');
}

function hideProcessingState(button, originalText) {
    button.disabled = false;
    button.textContent = originalText;
    button.classList.remove('processing');
}

Next Steps

Learn about Payment Methods
Explore Error Handling