Confirmo

$3

``
npm install @confirmo/overlay
`

$3

`
yarn add @confirmo/overlay
`

$3

`html






`

Overlay

$3

`javascript
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();
`

$3

`html

`

Payment button

$3

`html



`

$3

`javascript
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();
`

$3

`html

`

$3

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:

`javascript
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_

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

const overlayConfig = {
closeAfterPaid: true,
};

Invoice.open(invoiceUrl, callback_fnc, overlayConfig);
``