Biometric Pix Widget

❗️

Early preview of upcoming product

The following documentation is an early preview of Belvo's upcoming Biometric Pix product. As such:

  • Parameter key names, values, and structure may change before the final product is implemented.

However, the general flow of information and required steps will not change.

With Belvo's Biometric Pix, collecting payments from users becomes seamless, removing the need for users to navigate to their financial institution to approve each individual payment request.

👍

We support Dark Mode! 🤩

Our Biometric Pix widget not only supports Dark Mode but also additional color customization. For more details, check our dedicated Branding and Customization (Biometric Pix Widget) article (Coming soon).

In this guide, we’ll take you through each step, from device enrollment to successfully initiating a payment request.

Prerequisites

  • Please make sure you have completed all the steps in our dedicated prerequisites article before continuing this guide.

General Flow

In the diagram below, you can see the overall enrollment and payment flow:

  1. Your user selects to pay with Biometric Pix.
  2. You generate an access token (with the required details for the enrollment and payment) and append it to the widget URL.
  3. You redirect your user to the widget URL.
  4. Your user goes through the enrollment and payment process within the widget.
    1. You will receive webhook events detailing the status of the enrollment, payment, and charge.
  5. Your user is redirected back to your application.
  6. You receive a transaction webhook confirming that the payment was processed.

And that's it! The entire enrollment and payment process only requires one POST call to the Belvo API! The rest is handled by the Biometric Pix Widget.


Generate an access_token

👍

Recommend always sending through the enrollment and payment info

To make things easier on your workflow, we recommend that you always send through the enrollment and payment_intent objects. This will allow the widget to handle the entire flow for you (new enrollments, existing enrollments, and payments).

To generate an access token for the Biometric Pix widget that will do both the enrollment of the device and the payment, you will need to make a POST call to /api/payments/br/token with the following payload:

❗️

Associate the user's CPF with a unique internal ID

Make sure that in your database you associate your user's CPF with a unique ID and pass that ID in the metadata fields in both the enrollment and payment_intent objects.

Our API will return with the following payload:

{
    "refresh": "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MjMzNDY1MDY5MiwiaWF0IjoxNzEyNTcwNjkyLCJqdGkiOiIxMDAxMTg4NDU4Y2M0ZTlhOThmMDA4MmU3MDU3YzBmNyIsInVzZXJfaWQiOiI2ZTliZTg4NC00NzgxLTQxNDMtYjY3My1hY2EwMjQ3NWVlOGMiLCJvcmdhbml6YXRpb25fbmFtZSI6IkRvbWluaWsgQ2hvbGV3c2tpJ3MgdGVhbSIsIm9yZ2FuaXphdGlvbl9pZCI6IjZlOWJlODg0LTQ3ODEtNDE0My1iNjczLWFjYTAyNDc1ZWU4YyIsInNjb3BlcyI6WyJyZWFkX2luc3RpdHV0aW9ucyIsIndyaXRlX2xpbmtzIl0sImVudmlyb25tZW50Ijoic2FuZGJveCIsImFwaV91cmwiOiJzYW5kYm94LmJlbHZvLmNvbSIsImNyZWRlbnRpYWxzX3N0b3JhZ2UiOiIzMGQiLCJzdGFsZV9pbiI6IjM2NWQiLCJmZXRjaF9yZXNvdXJjZXMiOlsiQUNDT1VOVFMiLCJUUkFOU0FDVElPTlMiLCJPV05FUlMiXSwiaXNzIjoic2FuZGJveC5iZWx2by5jb20ifQ.X43VAc6c37U0JbiYgSd_r4SESjvGOuMgOpK5_DbuMHF7seATr7atO1QiUGwxdwBlEHo9ECST_9QKiHjv7G2czg",
    "access": "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzEyNTcxODkyLCJpYXQiOjE3MTI1NzA2OTIsImp0aSI6ImFiNjRmYjkyZmY1ZjQ0MTU4N2IwM2Y2MDJhMzhhMjNhIiwidXNlcl9pZCI6IjZlOWJlODg0LTQ3ODEtNDE0My1iNjczLWFjYTAyNDc1ZWU4YyIsIm9yZ2FuaXphdGlvbl9uYW1lIjoiRG9taW5payBDaG9sZXdza2kncyB0ZWFtIiwib3JnYW5pemF0aW9uX2lkIjoiNmU5YmU4ODQtNDc4MS00MTQzLWI2NzMtYWNhMDI0NzVlZThjIiwic2NvcGVzIjpbInJlYWRfaW5zdGl0dXRpb25zIiwid3JpdGVfbGlua3MiXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiYXBpX3VybCI6InNhbmRib3guYmVsdm8uY29tIiwiY3JlZGVudGlhbHNfc3RvcmFnZSI6IjMwZCIsInN0YWxlX2luIjoiMzY1ZCIsImZldGNoX3Jlc291cmNlcyI6WyJBQ0NPVU5UUyIsIlRSQU5TQUNUSU9OUyIsIk9XTkVSUyJdLCJpc3MiOiJzYW5kYm94LmJlbHZvLmNvbSJ9.2Irt1KCEKo6V17Y-N3zWeX3AchEvCrUWa_AlWoZ2gIIBhHvghHGkXtupOOrXKVqW9kTCOBE77-1riyyblUo4fw"
}

🚧

The access token is only valid for 10 minutes.

Append token to widget URL

Once you receive the access token, you just need to append the value of the access parameter to the following URL:

https://pix-biometria.pay.belvo.com/?access_token=<access_token>
https://pix-biometria.pay.belvo.com/?access_token=eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MjMzNDY1MDY5MiwiaWF0IjoxNzEyNTcwNjkyLCJqdGkiOiIxMDAxMTg4NDU4Y2M0ZTlhOThmMDA4MmU3MDU3YzBmNyIsInVzZXJfaWQiOiI2ZTliZTg4NC00NzgxLTQxNDMtYjY3My1hY2EwMjQ3NWVlOGMiLCJvcmdhbml6YXRpb25fbmFtZSI6IkRvbWluaWsgQ2hvbGV3c2tpJ3MgdGVhbSIsIm9yZ2FuaXphdGlvbl9pZCI6IjZlOWJlODg0LTQ3ODEtNDE0My1iNjczLWFjYTAyNDc1ZWU4YyIsInNjb3BlcyI6WyJyZWFkX2luc3RpdHV0aW9ucyIsIndyaXRlX2xpbmtzIl0sImVudmlyb25tZW50Ijoic2FuZGJveCIsImFwaV91cmwiOiJzYW5kYm94LmJlbHZvLmNvbSIsImNyZWRlbnRpYWxzX3N0b3JhZ2UiOiIzMGQiLCJzdGFsZV9pbiI6IjM2NWQiLCJmZXRjaF9yZXNvdXJjZXMiOlsiQUNDT1VOVFMiLCJUUkFOU0FDVElPTlMiLCJPV05FUlMiXSwiaXNzIjoic2FuZGJveC5iZWx2by5jb20ifQ.X43VAc6c37U0JbiYgSd_r4SESjvGOuMgOpK5_DbuMHF7seATr7atO1QiUGwxdwBlEHo9ECST_9QKiHjv7G2czg

Redirect user to the URL

In your application, redirect your user to the URL you formed in the previous step. This will load the widget and your user will be guided through the enrollment and payment process.

Widget enrollment flows

Below you can see the process your user will go through in the widget to complete the enrollment process.

Webhook notifications

During the enrollment flow, you will receive the following webhook notifications:

Webhook CodeType (Resource)DescriptionTrigger
OBJECT_CREATEDCUSTOMERSIn the case that the CPF you sent through for your user has not been registered yet for your account in our system, we will create the customer and notify via webhook and provide you with the customer.id. We recommend you store this ID with the associated user in your database.User has selected their institution and is redirected to it.
OBJECT_CREATEDENROLLMENTSOnce we begin the enrollment process and create it in our system, we notify you via webhook and provide with the enrollment.id. We recommend you store this ID with the associated user in your database.

Note 1: To associate the enrollment with your user, please check the details.metadata.{provided_key} for the unique identifier you provided for the widget session.

Note 2: A user can have multiple enrollments (for each institution and for each device). In other words, there is a 1:N relationship between the customer and number of enrollments associated with the customer.
User has selected their institution and is redirected to it.
STATUS_UPDATEENROLLMENTSWhen the user is redirected from their institution back to the widget, you will receive a STATUS_UPDATE notification, indicating whether the enrollment process was successful or not. You can receive one of the following webhook events:

- SUCCEEDED
- FAILEDFor more details, see our dedicated Enrollments Webhooks section.
User is redirected back to the widget.

Widget Payment flow

Below you can see the process your user will go through in the widget to complete the enrollment process.

Webhook notifications

During the payment flow, you will receive the following webhook notifications:

Webhook CodeType (Resource)DescriptionTrigger
OBJECT_CREATEDPAYMENT_INTENTSOnce we begin the payment process and create it in our system, we notify you via webhook and provide with the payment_intent.id.

Note: To associate the payment intent with your user (or enrollment), please check the details.metadata.{provided_key} for the unique identifier you provided for the widget session.
User has selected which enrollment to use and clicked continue.
OBJECT_CREATEDCHARGESOnce we begin the payment process and create it in our system, we notify you via webhook and provide with the charge.id.User has selected which enrollment to use and clicked continue.
STATUS_UPDATEPAYMENT_INTENTSDuring the widget and payment process you will receive the following STATUS_UPDATE webhooks for the payment intent:

- REQUIRES_ACTION
- PROCESSING
- SUCCEEDED
- FAILED
You will receive the REQUIRES_ACTION and PROCESSING events at the same time as OBJECT_CREATED. The latter two you receive when the payment is completed successfully or fails.
STATUS_UPDATECHARGESDuring the widget and payment process you will receive the following STATUS_UPDATE webhooks for the charge:

- SUCCEEDED
- FAILED
When the payment is completed successfully or fails.
OBJECT_CREATEDTRANSACTIONSOnce the payment intent and associated charge has been succesfully processed, Belvo will create a Transaction.The transaction was successfully processed by the institution.

Making subsequent payments

To make subsequent payments for the user, you can actually use the same access_token payload as in Step 1 - Generate an access_token. Our widget will automatically detect if your user has any existing enrollments and if so, immediately start the widget in the Widget Payment Flow.