@confirmo/overlay

Confirmo

npm

npm install @confirmo/overlay

yarn

yarn add @confirmo/overlay

CDN

<!-- To always install exact version (recommended - avoid future breaking changes) -->
<script src="https://cdn.jsdelivr.net/npm/@confirmo/overlay@4.4.1/dist/confirmo.js"></script>
<!-- To always install exact major version -->
<script src="https://cdn.jsdelivr.net/npm/@confirmo/overlay@4/dist/confirmo.js"></script>
<!-- To always install the latest version -->
<script src="https://cdn.jsdelivr.net/npm/@confirmo/overlay@latest/dist/confirmo.js"></script>

Overlay

Bundlers

import { Invoice } from '@confirmo/overlay';

/**
 * Opens Confirmo invoice overlay
 *
 * @param {string} invoice_url - URL of invoice.
 * @param {callback} [callback_fnc] - Optional - callback which is called when overlay was closed
 * @param {InvoiceOverlayConfig} [overlayConfig] - Optional - Confirmo overlay configuration (currently only for auto-close when invoice is paid)
 *
 * @example
 *
 * // URL of invoice created from REST API
 * const invoice_url = 'https://confirmo.net/public/invoice/invv9e1rxdz8?m=mer951dkwdw1';
 *
 * // (optional) Callback which is called when overlay was closed
 * const callback_fnc = () => alert('Overlay has been closed');
 *
 * // (optional) Confirmo overlay configuration
 * const overlayConfig = {
 *   closeAfterPaid: true,
 *   closeAfterPaidTimeoutMs: 2000, // when unspecified, default is 2000ms
 * }
 *
 */
const overlay = Invoice.open(invoice_url, callback_fnc, overlayConfig);

/**
 * Closes Confirmo invoice overlay
 */
overlay.close();

Script Tag

<script>
  const overlay = Confirmo.Invoice.open(invoice_url, callback_fnc, overlayConfig);

  overlay.close();
</script>

Payment button

HTML

<div id="placeholder-for-button"></div>

Bundlers

import { PaymentButton } from '@confirmo/overlay';

/**
 * Creates Confirmo payment button
 */
const button = PaymentButton.initialize(
  {
    id: 'placeholder-for-button',
    paymentButtonId: 'pbt16354asde',
    buttonType: 'SIMPLE',
    values: {
      productName: 'Some cool product',
      productDescription: 'Simple description',
      reference: 'merchantRef',
      returnUrl: 'https://my-cool-eshop.com/?q=this+is+return+url',
      merchantId: 'mer951dkwdw1',
      overlay: true,
    },
  },
  /**
   * Overlay related properties (relevant only if values.overlay set to `true`)
   */
  // (optional) Callback function called on Invoice.close() (see overlay.d.ts)
  () => {
    console.log('Overlay has been closed!');
  },
  // (optional) Invoice overlay config
  overlayConfig,
);

/**
 * Removes Confirmo payment button
 */
button.remove();

Script Tag

<script>
  const button = Confirmo.PaymentButton.initialize(
    {
      id: 'placeholder-for-button',
      paymentButtonId: 'pbt16354asde',
      buttonType: 'SIMPLE',
      values: {
        productName: 'Some cool product',
        productDescription: 'Simple description',
        reference: 'merchantRef',
        returnUrl: 'https://my-cool-eshop.com/?q=this+is+return+url',
        merchantId: 'mer951dkwdw1',
      },
    },
    /**
     * Overlay related properties (relevant only if values.overlay set to `true`)
     */
    // (optional) Callback function called on Invoice.close() (see overlay.d.ts)
    () => {
      console.log('Overlay has been closed!');
    },
    // (optional) Invoice overlay config
    overlayConfig,
  );

  button.remove();
</script>

Overlay events

Events fired from Public invoice view via window#postMessage API https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

A component using @confirmo/overlay can listen to InvoiceOverlayMessageEventData accordingly:

import { ConfirmoOverlayInvoiceStatus, ConfirmoOverlayMessageAction, Invoice } from '@confirmo/overlay';

const overlay = Invoice.open(invoiceUrl, callback_fnc);

// Custom implementation of closing Confirmo overlay after invoice being paid
window.addEventListener('message', (event) => {
  if (
    invoiceUrl.includes(event.origin) &&
    event.data.action === ConfirmoOverlayMessageAction.CONFIRMO_OVERLAY_INVOICE_STATUS_CHANGE &&
    event.data.status === ConfirmoOverlayInvoiceStatus.PAID
  ) {
    // handle paid invoice (e.g. by closing the overlay)
    setTimeout(() => {
      overlay.close();
    }, 2000); // close overlay after 2 seconds
  }
});

Note: the same effect as shown above can be achieved simply by setting overlayConfig's closeAfterPaid

import { Invoice } from '@confirmo/overlay';

const overlayConfig = {
  closeAfterPaid: true,
};

Invoice.open(invoiceUrl, callback_fnc, overlayConfig);