> For the complete documentation index, see [llms.txt](https://docs.paypangea.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.paypangea.com/login-with-paypangea/api-integration/show-login-page.md).
# 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.
```html
```
* **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.
```javascript
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