Embedding Checkout

If you prefer to keep the whole payment flow on your own website you can also embed the hosted checkout without redirecting the shopper to it. The @confirmo/overlay npm library library provides a robust and secure way to embed the payment flow directly into your website. By wrapping the invoice in an iframe, it keeps the customer within your site's context, leading to a more consistent brand experience. Beyond just displaying the invoice, it's particularly valuable for handling post-payment actions, like redirecting customers back to your order confirmation page.

Enabling "Back to Merchant" Functionality

When you use @confirmo/overlay, the "Back to merchant" button works out of the box. This is because the library is designed to manage the iframe's behavior and can trigger a callback function or automatically close the iframe once the invoice is paid. This provides a direct and reliable way to guide your customers back to your site.

Troubleshooting "Back to Merchant" with Custom Iframes

We understand that some merchants prefer to use their own custom iframes for displaying the Confirmo invoice. While this offers flexibility, it's important to note that the "Back to merchant" button's direct functionality will not work in a custom iframe setup. This is because the custom iframe doesn't have the inherent communication channels with our system that @confirmo/overlay provides.

However, don't worry! If you choose to use your custom iframe, you can still achieve the desired "Back to merchant" behavior by listening for specific events. This allows you to programmatically close your iframe and redirect your customer.

Here are two primary ways to handle this:

1. Listening for the CLOSE_CONFIRMO_OVERLAY Event

This event is fired when the "Back to merchant" button within the Confirmo invoice is clicked, even if it's inside your custom iframe. By listening for this event, you can trigger your own actions, such as closing your custom iframe and redirecting the user.

Here's an example of how you can implement this:

window.addEventListener('message', (event) => {
  if (event.data.action === 'CLOSE_CONFIRMO_OVERLAY') {
    // Implement your logic here:
    // 1. Close your custom iframe
    // 2. Redirect the user to your desired page (e.g., order confirmation)
    console.log('Confirmo overlay close event received. Taking action...');
    // Example: Close your modal/overlay here
    // Example: window.location.href = 'https://yourstore.com/order-confirmed';
  }
});

2. Monitoring CONFIRMO_OVERLAY_INVOICE_STATUS_CHANGE

For more granular control, you can listen for changes in the invoice status. The CONFIRMO_OVERLAY_INVOICE_STATUS_CHANGE event provides real-time updates on the invoice's progress. You can then perform actions, such as redirecting the customer, once the invoice reaches a paid status.

Here are the possible invoice statuses:

• PREPARED
• ACTIVE
• CONFIRMING
• PAID
• EXPIRED
• ERROR

Here's an example of how to listen for the paid status:

window.addEventListener('message', (event) => {
  if (
    event.data.action === 'CONFIRMO_OVERLAY_INVOICE_STATUS_CHANGE' &&
    event.data.status === 'paid'
  ) {
    // Implement your logic here:
    // 1. Close your custom iframe (if still open)
    // 2. Redirect the user to your desired page
    console.log('Confirmo invoice paid status received. Taking action...');
    // Example: Close your modal/overlay here
    // Example: window.location.href = 'https://yourstore.com/order-success';
  }
});