​
Installation Methods

​
HTML Script Tag

The simplest way to add the Paysight Widget SDK to your application: 
<script src="https://payment.paysight.io/widget-sdk.js"></script>
Add this script tag to your HTML file before the closing </body> tag for optimal loading performance. Production (recommended): 
<script src="https://payment.paysight.io/widget-sdk.js"></script>
Staging (for testing): 
<script src="https://staging.payment.paysight.io/widget-sdk.js"></script>
Development (for local development): 
<script src="https://dev.payment.paysight.io/widget-sdk.js"></script>

​
Environment Setup

​
Production

const widget = PaysightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    environment: 'production',
    // ... other config options
  }
});

​
Staging

const widget = PaysightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_STAGING_PRODUCT_ID,
    environment: 'sandbox',
    // ... other config options
  }
});

​
Development

const widget = PaysightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_DEV_PRODUCT_ID,
    environment: 'development',
    // ... other config options
  }
});

​
Container Setup

​
Basic Container

Create a container element where the widget will be rendered: 
<div id="widget-container"></div>

​
Styled Container

Add basic styling to your container: 
<style>
  .widget-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
</style>

<div id="widget-container" class="widget-container"></div>

​
Responsive Container

Make your container responsive: 
<style>
  .widget-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  @media (max-width: 640px) {
    .widget-container {
      padding: 16px;
    }
  }
</style>

<div id="widget-container" class="widget-container"></div>

​
Initialization

​
Basic Initialization

Initialize the widget with minimal configuration: 
const widget = PaysightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'unique-session-id',
    environment: 'production',
    amount: 2999
  }
});

​
Complete Initialization

Initialize with all recommended options: 
const widget = PaysightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'unique-session-id',
    environment: 'production',
    amount: 2999,
    threeDSRequired: true,
    currency: 'USD',
    locale: 'en-US'
  },
  onReady: () => {
    console.log('Widget is ready');
  },
  onError: (error) => {
    console.error('Widget error:', error);
  },
  onMessage: (message) => {
    console.log('Widget event:', message);
  }
});

​
Verification

​
Check Installation

Verify the SDK is loaded correctly: 
if (typeof PaysightSDK === 'undefined') {
  console.error('Paysight Widget SDK not loaded');
} else {
  console.log('Paysight Widget SDK loaded successfully');
}

​
Test Configuration

Verify your configuration: 
const testConfig = {
  productId: YOUR_PRODUCT_ID,
  sessionId: 'test-session',
  environment: 'sandbox',
  amount: 2999
};

try {
  const widget = PaysightSDK.createWidget({
    targetId: 'widget-container',
    config: testConfig
  });
  console.log('Widget configuration valid');
} catch (error) {
  console.error('Widget configuration invalid:', error);
}

​
Troubleshooting

​
Common Issues

  1. Script Loading Failed 
    // Add error handling for script loading
const script = document.createElement('script');
script.src = 'https://payment.paysight.io/widget-sdk.js';
script.onerror = () => console.error('Failed to load Paysight Widget SDK');
document.body.appendChild(script);
  2. Container Not Found 
    // Check if container exists before initialization
const container = document.getElementById('widget-container');
if (!container) {
  console.error('Widget container not found');
  return;
}
  3. Invalid Configuration 
    // Validate configuration before initialization
if (!config.productId || !config.sessionId) {
  console.error('Missing required configuration options');
  return;
}

​
Next Steps

Event Handling

Understand how to handle widget events for a complete integration.

Styling Guide

Learn how to customize the widget appearance to match your brand.

Basic Integration Example

View implementation examples