# Iframe integration

The iframe experience allows users to remain in your checkout experience, while applying for financing and completing the purchase through our system. You can think of it as simply another payment method you offer. Your system can receive updates about the state of the application and financing through iframe messages or webhooks (more secure).

![Example of the embedded Finove experince](/files/-MGQJhocPbIrSi0E9GK9)

## Integration overview

![Overview of the integration process](/files/qHb9G9CqfBPbLqM9Q2tm)

**Steps:**

1. Server: Create a Payment Request
2. Client: Embed iframe and pass payment request code
3. Server: Listen for webhooks
4. Client: On payment completion, update client UI to success state

### Step 1 - Create a Payment Request

First, we must [create a Payment Request](/embed-in-website/payment-request.md). In this step, you register the order information with our system so that we can direct the customer through the application process and ultimately complete the purchase.&#x20;

In short, you send us information about the purchase and we send you a url with a unique id code. You then pass that url to the iframe and we use that unique code to pull in the correct purchase information.

### Step 2 - Embed iframe and pass Payment Request URL as 'src'

```javascript
<iframe
  src="https://app.finove.com.br/financing/7b3f230e-c361-409a-9c9c-0261f9a89305"
  height="100%"
  width="100%"
/>
```

### Step 3 - Listen for [webhooks](/webhooks/overview.md)

We will notify your system via a webhook event when the payment process is completed by the customer. You should use these webhook events to update the state of your system.&#x20;

**payment.authorized** - When the payment has the `authorized` status, it means the payment has been finalized by the client and is ready for the merchant to [upload and submit the invoice(s)](/embed-in-website/payments/upload-invoices.md) in order for the payment to be processed. See the [webhooks](/webhooks/overview.md) documentation for more details. When you receive this webhook, you can move on to step 4.

This webhook event will contain the Payment Request ID, as well as the `orderId` and all of the meta data you passed to payment request. You can use this data to connect the payment to the payment request you created through your systems.

### Step 4 - Update client UI to success state

If a customer successfully completes a financing through the Finove iframe, the iframe will display a message that the payment was successfully made. You will likely want to display your own success state for the user. To do this, you should listen for webhooks and then update the UI. This is usually done via polling your servers over a set interval or setting up a web sockets connection.


---

# 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://developers.finove.com.br/iframe.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.
