​
Installation Guide

This guide provides detailed instructions for installing and setting up the PaySight Widget SDK in your web application.

​
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