đ§âđģ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 tohttps://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 forevent.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
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
Last updated