Lightbox SDK

Appearance

On this page

Playground ​

Url ​

It is the target url that will be displayed in the lightbox.

Allow Redirects ​

Type: boolean

Default: true

Determines whether to allow redirects (backupTarget: "self") from the lightbox to another URL for users who are on an iOS device or a Safari browser. Does not affect popup or blank fallback options.

Close Button ​

Type: boolean

Default: true

Determines if the button to close the lightbox is displayed.

Backup Target ​

Type: select

Default: self

Defines fallback behavior when the lightbox cannot open normally (e.g., in Safari or iOS). Choose "self" to redirect in the same window, "popup" to open a popup window with informative backdrop, or "blank" to open in a new tab.

Code ​

js
import { createLightbox } from '@placetopay/lightbox-sdk';

const lightbox = createLightbox('', { 
    allowRedirects: true, 
    closeButton: true,
    backupTarget: 'self'
});

lightbox.open();

// Close programmatically after 30 seconds (works for lightbox AND popup)
setTimeout(() => lightbox.close(), 30000);

Enhanced Close() Method ​

The lightbox.close() method now automatically handles all scenarios:

Normal browsers (Chrome, Firefox, Edge):

  • Opens as regular lightbox iframe
  • close() removes iframe and cleans up styles

Safari/iOS browsers:

  • backupTarget: 'popup' → Opens popup with backdrop
  • close() closes popup window and removes backdrop
  • backupTarget: 'blank' → Opens new tab
  • close() closes tab window (if accessible)
  • backupTarget: 'self' → Redirects current window
  • close() has no effect (already navigated away)

Testing: Try the playground above with different configurations. The close behavior will automatically adapt to what was actually opened.