Iframe integration

You can use our iframe to embed Finove into your existing ecommerce solutions.

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

Integration overview

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

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'

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

Step 3 - Listen for webhooks

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.

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) in order for the payment to be processed. See the webhooks 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.

Last updated