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:- Displays a payment form that collects an amount and customer information.
- Submits the data via JavaScript to the Payment API endpoint.
- Shows the API’s JSON response in the 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.
Related References
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.