Skip to main content

​
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:
environmentUse for
sandboxTesting with sandbox products and MIDs
productionLive 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: 'customer@example.com', 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