Basic Integration Example
This example demonstrates a simple integration of the Paysight Widget, including initialization, event handling, and basic error management.Live demo
Open the interactive sandbox demo playground.
Playground guide
Full walkthrough of all presets including this basic checkout scenario.
Complete Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paysight Widget - Basic Integration</title>
<!-- Add basic styling -->
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
margin: 0;
padding: 20px;
background-color: #f8fafc;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 24px;
}
.header {
text-align: center;
margin-bottom: 24px;
}
.header h1 {
margin: 0;
color: #0f172a;
font-size: 24px;
}
.header p {
margin: 8px 0 0;
color: #64748b;
}
.status-message {
padding: 12px;
border-radius: 6px;
margin-bottom: 16px;
display: none;
}
.error {
background-color: #fee2e2;
border: 1px solid #ef4444;
color: #b91c1c;
}
.success {
background-color: #dcfce7;
border: 1px solid #22c55e;
color: #15803d;
}
.widget-container {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Complete Your Payment</h1>
<p>Secure payment processing by Paysight</p>
</div>
<div id="success-message" class="status-message success"></div>
<div id="error-message" class="status-message error"></div>
<div id="widget-container" class="widget-container"></div>
</div>
<!-- Add the Paysight Widget SDK -->
<script src="https://payment.paysight.io/widget-sdk.js"></script>
<script>
// Widget configuration
const config = {
productId: YOUR_PRODUCT_ID, // Replace with your product ID
sessionId: \`session_\${Date.now()}\`, // Generate unique session ID
amount: 29.99,
environment: 'production',
threeDSRequired: true,
ecom: true, // Enable ecommerce mode
currency: 'USD',
locale: 'en-US',
// Add tracking data
data: {
clickId: 'clk_123xyz', // Add click tracking ID
gclid: 'CjwKCAiAzc2tBhA4EiwA5gFXtqxZQn8H9XdF9jKm', // Google Click Identifier
wbraid: 'CLjQ5oGVqvsCFQiNaAodgM4PqA', // Web BRAID for Google Ads
gbraid: 'CLjQ5oGVqvsCFQiNaAodgM4PqA' // Google BRAID for app tracking
}
};
// Initialize widget
const widget = PaySightSDK.createWidget({
targetId: 'widget-container',
config,
onReady: handleWidgetReady,
onError: handleError,
onMessage: handleMessage
});
// Widget ready handler
function handleWidgetReady() {
console.log('Widget is ready');
// Optional: Pre-fill customer data if available
widget.update({
customer: {
email: 'customer@example.com'
}
});
}
// Error handler
function handleError(error) {
console.error('Widget error:', error);
showError(error.message);
}
// Message handler
function handleMessage(message) {
console.log('Message received:', message);
switch (message.type) {
case 'PAYMENT_START':
hideMessages();
break;
case 'PAYMENT_SUCCESS':
handlePaymentSuccess(message.payload);
break;
case 'PAYMENT_ERROR':
handlePaymentError(message.payload);
break;
case 'PAYMENT_3DS_START':
showMessage('Verifying payment...', 'info');
break;
case 'PAYMENT_3DS_ERROR':
handlePaymentError(message.payload);
break;
}
}
// Payment success handler
function handlePaymentSuccess(payload) {
const { transactionId, amount, currency } = payload;
const formattedAmount = new Intl.NumberFormat('en-US', {
style: 'currency',
currency
}).format(amount);
showSuccess(
`Payment successful! Amount: ${formattedAmount}, Transaction ID: ${transactionId}`
);
// Optional: Redirect to success page
// setTimeout(() => {
// window.location.href = '/payment-success';
// }, 2000);
}
// Payment error handler
function handlePaymentError(payload) {
showError(payload.message);
}
// UI Helper functions
function showSuccess(message) {
const element = document.getElementById('success-message');
element.textContent = message;
element.style.display = 'block';
document.getElementById('error-message').style.display = 'none';
}
function showError(message) {
const element = document.getElementById('error-message');
element.textContent = message;
element.style.display = 'block';
document.getElementById('success-message').style.display = 'none';
}
function hideMessages() {
document.getElementById('success-message').style.display = 'none';
document.getElementById('error-message').style.display = 'none';
}
</script>
</body>
</html>
Key Components
1. Basic Setup
<!-- Add the SDK -->
<script src="https://payment.paysight.io/widget-sdk.js"></script>
<!-- Create container -->
<div id="widget-container"></div>
2. Configuration
const config = {
productId: YOUR_PRODUCT_ID,
sessionId: \`session_\${Date.now()}\`,
amount: 29.99,
environment: 'production',
threeDSRequired: true,
failOnThreeDSChallenge: false,
cancelOnThreeDSFailure: false,
ecom: true,
// Add tracking data
data: {
clickId: 'clk_123xyz', // Track click ID for attribution
gclid: 'CjwKCAiAzc2tBhA4EiwA5gFXtqxZQn8H9XdF9jKm', // Google Click Identifier
wbraid: 'CLjQ5oGVqvsCFQiNaAodgM4PqA', // Web BRAID for Google Ads
gbraid: 'CLjQ5oGVqvsCFQiNaAodgM4PqA' // Google BRAID for app tracking
}
};
3. Initialization