Integrate I2P UI iFrame

If you would rather keep customers inside your own application than send them off to a standalone page, you can embed the Invite2Pay payment experience in an iframe. The page to embed is the invite link returned when you create an I2P transaction (see Start an I2P Flow). This configuration can be made by modifying your payment orchestrator.

The invite link points at HatchPay’s customer payment site and follows this shape, where the host depends on the environment and the path carries your tenant and the single-use I2P code:

https://payments.{env}.hatch-pay.gcp.acg.aaa.com/{tenant_id}/i2p/{i2p_code}

Embed that URL as the src of an iframe:

<iframe src="https://payments.qa.hatch-pay.gcp.acg.aaa.com/4b8fafc0-2011-4e1a-9941-4bf4832f5fb2/i2p/ABC123"></iframe>

Within the iframe, the customer sees the transaction’s line items and a secure form served directly by the payment gateway, so sensitive card data never touches your application. When the customer completes payment, the transaction status updates just as it would for a hosted invite — poll the transaction or subscribe to webhooks to learn the outcome. Make sure the origin where you host the iframe is permitted to embed the payment site for your environment.