# 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
<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.

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

Response object

<table><thead><tr><th width="210">Name</th><th>Type</th><th width="278">Description</th></tr></thead><tbody><tr><td>code</td><td>int</td><td>200 for succesfull login</td></tr><tr><td>message</td><td>string</td><td>OK for succesfull login, otherwise reason why it was not succesfull</td></tr><tr><td>wallet</td><td>string</td><td>WEB3 wallet address of user</td></tr><tr><td>token</td><td>string</td><td>A token to verify login on your backend</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paypangea.com/login-with-paypangea/api-integration/show-login-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.