🧑‍💻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

Name	Type	Description
code	int	200 for succesfull login
message	string	OK for succesfull login, otherwise reason why it was not succesfull
wallet	string	WEB3 wallet address of user
token	string	A token to verify login on your backend