Installation Guide

Install and set up the Paysight Widget SDK

Installation

Add the Paysight Widget SDK script to your page:

<script src="https://payment.paysight.io/widget-sdk.js"></script>

Place the script before your initialization code, typically before the closing </body> tag.

Environment

The SDK script URL is the same for all integrators. Set the target environment in config:

environment	Use for
sandbox	Testing with sandbox products and MIDs
production	Live payments

Sandbox

const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'YOUR_SESSION_ID',
    environment: 'sandbox',
    amount: 29.99,
    // ...
  },
});

Production

const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'YOUR_SESSION_ID',
    environment: 'production',
    amount: 29.99,
    // ...
  },
});

Container setup

Create a container element where the widget iframe renders:

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

For Apple Pay or Google Pay, add host-page slots above the widget container (or let the SDK create defaults):

<div id="apple-pay-slot"></div>
<div id="google-pay-slot"></div>
<div id="widget-container"></div>

Pass container IDs to createWidget:

PaySightSDK.createWidget({
  targetId: 'widget-container',
  applePayContainerId: 'apple-pay-slot',
  googlePayContainerId: 'google-pay-slot',
  config: { /* ... */ },
});

Initialize

const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: `session_${Date.now()}`,
    environment: 'sandbox',
    amount: 29.99,
    customer: { email: '[e-mail]', country: 'US' },
    fields: [
      {
        label: 'Email',
        placeholder: 'Enter your email',
        fieldType: 'email',
        position: 'above',
        size: 'full',
      },
    ],
  },
  onReady: () => console.log('Widget ready'),
  onMessage: (msg) => console.log(msg.type, msg.payload),
  onError: (err) => console.error(err),
});

customer is optional prefill. fields defines which inputs appear — your product may require a minimum set even when customer data is prefilled.

Next steps

Quickstart

Minimal working embed

Configuration

Full setup guide