​
Basic Integration Example

This example demonstrates a simple integration of the PaySight Widget, including initialization, event handling, and basic error management.

​
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: 2999, // $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 / 100);

      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: 2999,
  environment: 'production',
  threeDSRequired: true,
  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