@ecommission/epg-modal

React modal component with iframe support for eCommission EPG integration.

Installation

npm install @ecommission/epg-modal

Usage

Add the EpgModal component to your app root:

import EpgModal from "@ecommission/epg-modal";

function App() {
  return (
    <>
      {/* Your app content */}
      <EpgModal />
    </>
  );
}

Open the modal from anywhere using the global function:

window.openEpgModal("https://cdn.ecommission.com/lw/terms.php?jwt=...");

For the payment-authorization clickwrap (auth.php) use epg_auth — it opens a slightly wider/taller modal (660 × 590) sized for the authorization text plus the Accept/Decline buttons:

window.epg_auth("https://cdn.ecommission.com/lw/auth.php?jwt=...");

The modal closes automatically when it receives a close message from the iframe.

Vanilla / non-React usage

For non-React pages (e.g. server-rendered PHP), use the prebuilt global bundle — no React required. It registers the same window.openEpgModal / window.epg_auth globals and closes on the iframe's postMessage:

<script src="https://unpkg.com/@ecommission/epg-modal/dist/epg-modal.global.js"></script>
<script>
  window.epg_auth("https://cdn.ecommission.com/lw/auth.php?jwt=...");
</script>

(Or self-host dist/epg-modal.global.js.) Business logic — e.g. handling Accept vs Decline from the auth clickwrap — stays in your own message listener; this bundle only opens/closes the modal.

License

MIT