This page provides a working example of integrating with the Paysight Payment API using a simple HTML + JavaScript form.
Do not expose your live API keys or process raw cardholder data on non-PCI compliant servers. This example is for educational / demo purposes.

​
Overview

This example:
  1. Displays a payment form that collects an amount and customer information.
  2. Submits the data via JavaScript to the Payment API endpoint.
  3. Shows the API’s JSON response in the page.
It can be used for sandbox testing or as a starting point for integrating into your own page.

​
Full HTML Example

Paste this example into an .html file and update placeholders (e.g. API key, productId) with your own test or live credentials.
Payment API Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paysight Payment API Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Paysight Payment API Integration Example</h1>
            
            <!-- Configuration Section -->
            <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                <div class="flex justify-between items-center mb-2">
                    <h2 class="text-lg font-semibold text-yellow-800">Configuration</h2>
                    <button type="button" id="sandboxPrefill" 
                            class="bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium py-2 px-4 rounded-md transition duration-200">
                        Sandbox Prefill
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                        <input type="text" id="apiKey" placeholder="Your API Key" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
                        <input type="text" id="clientId" placeholder="Your Client ID" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">User Email</label>
                        <input type="email" id="userEmail" placeholder="your-paysight-account-email@example.com" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Product ID</label>
                        <input type="number" id="productId" placeholder="123" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Payment Form -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Payment Information</h2>
                    <form id="paymentForm" class="space-y-4">
                        <!-- Card Information -->
                        <div class="space-y-3">
                            <h3 class="text-md font-medium text-gray-700">Card Details</h3>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Cardholder Name</label>
                                <input type="text" id="cardName" value="John Doe" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
                                <input type="text" id="cardNumber" value="4111111111111111" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="grid grid-cols-3 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Month</label>
                                    <input type="number" id="expiryMonth" value="12" min="1" max="12" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Year</label>
                                    <input type="number" id="expiryYear" value="2025" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
                                    <input type="text" id="cvv" value="123" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Customer Information -->
                        <div class="space-y-3">
                            <h3 class="text-md font-medium text-gray-700">Customer Details</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                                    <input type="text" id="firstName" value="John" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                                    <input type="text" id="lastName" value="Doe" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" id="email" value="john.doe@example.com" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                                <input type="tel" id="phone" value="+1234567890"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>

                        <!-- Address Information -->
                        <div class="space-y-3">
                            <h3 class="text-md font-medium text-gray-700">Billing Address</h3>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Street Address</label>
                                <input type="text" id="street" value="123 Main Street" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                                    <input type="text" id="city" value="New York" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">State</label>
                                    <input type="text" id="state" value="NY" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
                                    <input type="text" id="zip" value="10001" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                                    <input type="text" id="country" value="US" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Amount -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
                            <input type="number" id="amount" value="1.00" step="0.01" min="0" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <p class="text-xs text-gray-500 mt-1">Enter amount as decimal (e.g., 9.99 for $9.99)</p>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" id="processPayment" 
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                            Process Payment
                        </button>
                    </form>
                </div>

                <!-- Debug Section -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Debug Information</h2>
                    
                    <!-- Request Debug -->
                    <div class="mb-6">
                        <h3 class="text-md font-medium text-gray-700 mb-2">Request Payload</h3>
                        <pre id="requestDebug" class="bg-gray-900 text-green-400 p-4 rounded-md text-sm overflow-auto max-h-64 whitespace-pre-wrap">Click "Process Payment" to see the request payload</pre>
                    </div>

                    <!-- Response Debug -->
                    <div class="mb-6">
                        <h3 class="text-md font-medium text-gray-700 mb-2">Response</h3>
                        <pre id="responseDebug" class="bg-gray-900 text-blue-400 p-4 rounded-md text-sm overflow-auto max-h-64 whitespace-pre-wrap">Response will appear here after API call</pre>
                    </div>

                    <!-- Status -->
                    <div id="statusContainer" class="hidden">
                        <h3 class="text-md font-medium text-gray-700 mb-2">Status</h3>
                        <div id="status" class="p-3 rounded-md"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('paymentForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const apiKey = document.getElementById('apiKey').value;
            const clientId = document.getElementById('clientId').value;
            const userEmail = document.getElementById('userEmail').value;
            const productId = document.getElementById('productId').value;
            
            if (!apiKey || !clientId || !userEmail || !productId) {
                showStatus('Please fill in all configuration fields (API Key, Client ID, User Email, Product ID)', 'error');
                return;
            }

            // Disable button during processing
            const submitButton = document.getElementById('processPayment');
            submitButton.disabled = true;
            submitButton.textContent = 'Processing...';

            // Build request payload
            const payload = {
                card: {
                    name: document.getElementById('cardName').value,
                    pan: document.getElementById('cardNumber').value,
                    expiryMonth: parseInt(document.getElementById('expiryMonth').value),
                    expiryYear: parseInt(document.getElementById('expiryYear').value),
                    cvv: document.getElementById('cvv').value
                },
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                address: {
                    firstName: document.getElementById('firstName').value,
                    lastName: document.getElementById('lastName').value,
                    street: document.getElementById('street').value,
                    city: document.getElementById('city').value,
                    state: document.getElementById('state').value,
                    zip: document.getElementById('zip').value,
                    country: document.getElementById('country').value
                },
                amount: parseFloat(document.getElementById('amount').value),
                cascade: true
            };

            // Display request payload
            document.getElementById('requestDebug').textContent = JSON.stringify(payload, null, 2);

            try {
                // Make API call
                const response = await fetch(`https://test.paysight.io/api/${productId}`, {
                    method: 'POST',
                    headers: {
                        'Authorization': apiKey,
                        'ClientId': clientId,
                        'UserEmail': userEmail,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const responseData = await response.json();
                
                // Display response
                document.getElementById('responseDebug').textContent = JSON.stringify(responseData, null, 2);

                // Show status
                if (response.ok && responseData.chargeSuccess) {
                    showStatus(`Payment successful! Transaction ID: ${responseData.transactionId}`, 'success');
                } else if (response.ok && !responseData.chargeSuccess) {
                    showStatus(`Payment failed: ${responseData.error || responseData.message || 'Unknown error'}`, 'warning');
                } else {
                    showStatus(`API Error (${response.status}): ${responseData.error || responseData.message || 'Unknown error'}`, 'error');
                }

            } catch (error) {
                document.getElementById('responseDebug').textContent = `Error: ${error.message}`;
                showStatus(`Network error: ${error.message}`, 'error');
            } finally {
                // Re-enable button
                submitButton.disabled = false;
                submitButton.textContent = 'Process Payment';
            }
        });

        function showStatus(message, type) {
            const statusContainer = document.getElementById('statusContainer');
            const statusDiv = document.getElementById('status');
            
            statusContainer.classList.remove('hidden');
            
            // Remove existing classes
            statusDiv.classList.remove('bg-green-100', 'text-green-800', 'border-green-200');
            statusDiv.classList.remove('bg-red-100', 'text-red-800', 'border-red-200');
            statusDiv.classList.remove('bg-yellow-100', 'text-yellow-800', 'border-yellow-200');
            
            // Add appropriate classes based on type
            if (type === 'success') {
                statusDiv.classList.add('bg-green-100', 'text-green-800', 'border', 'border-green-200');
            } else if (type === 'error') {
                statusDiv.classList.add('bg-red-100', 'text-red-800', 'border', 'border-red-200');
            } else if (type === 'warning') {
                statusDiv.classList.add('bg-yellow-100', 'text-yellow-800', 'border', 'border-yellow-200');
            }
            
            statusDiv.textContent = message;
        }

        // Sandbox prefill functionality
        document.getElementById('sandboxPrefill').addEventListener('click', function() {
            // Fill configuration fields with sandbox values
            document.getElementById('apiKey').value = 'cfac1cfb96949b650f7445455936c1a4_a3a9f1f5-378f-4c0c-93a8-f4c7096d2e06';
            document.getElementById('clientId').value = '101';
            document.getElementById('userEmail').value = 'sandbox@paysight.io';
            document.getElementById('productId').value = '8617';
            
            showStatus('Sandbox configuration loaded successfully!', 'success');
        });

        // Auto-generate some test data on page load
        window.addEventListener('load', function() {
            // Generate a random session ID for demonstration
            const timestamp = Date.now();
            document.getElementById('email').value = `test${timestamp}@example.com`;
        });
    </script>
</body>
</html>

​
How to Use

1

Replace productId with your own product ID

Replace {productId} in the fetch URL with your own product ID from the Paysight dashboard.
2

Put your own API key

Replace YOUR_API_KEY with your test or live API key.
3

Test the integration on a browser

Open the file in a browser.
4

Enter payment details

Input payment details and click Process Payment.
5

Review the response

Review the API’s response displayed below the form.

Payment API

Submit and manage payments directly via API.

Widget SDK Quick Start Guide

Embed a customizable, PCI-compliant payment widget quickly.

Paysight Reports

Analyze performance, payments and trends with Paysight Reports

Webhooks

Get real-time payment event notifications automatically.
Paysight’s Payment API allows you to build fully custom payment flows. This example is a starting point for connecting your frontend to the API and handling the response.