🧑‍đŸ’ģShow login page

Using an Iframe

To seamlessly integrate PayPangea's authentication process within your application, you mustp use an iframe. This method provides a cohesive user experience, keeping the user within your application environment throughout the payment process.

Steps:

  • Embed the Iframe: Insert an iframe into your HTML, setting its src attribute to https://paypangea.com/request/auth/?walletconnect=${showwalletconnect}, where ${showwalletconnect} is is either true or false depending on the fact if you want to show wallet connect button or not.

<iframe src="https://paypangea.com/request/auth/?walletconnect=${showwalletconnect}" width="600" height="400"></iframe>

  • Listen for Iframe Events: PayPangea's iframe integration emits several events that you can listen to for managing the payment flow:

    • PAYPANGEA_WIDGET_CLOSE: Triggered when the payment widget is closed.

    • PAYPANGEA_WIDGET_OPEN: Triggered when the payment widget is opened.

    • PAYPANGEA_WIDGET_CLOSE_REQUEST: Emitted when a request to close the widget is made. This is crucial for detecting the end of a payment process.

    • PAYPANGEA_WIDGET_INITIALISED: Indicates that the widget has been initialized and is ready to use.

  • Handling Login outcome: Monitor the PAYPANGEA_WIDGET_CLOSE_REQUEST event for event.data.outcome.code = 200 to confirm a successful login.

window.addEventListener('message', (event) => {
    if (event.data.type === 'PAYPANGEA_WIDGET_CLOSE_REQUEST' && event.data.outcome.code === 200) {
        // Handle successful payment
    }
});

Response object

PreviousIntegration stepsNextServer-side verification

Last updated