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:
- Your user selects to pay with Biometric Pix.
- You generate an access token (with the required details for the enrollment and payment) and append it to the widget URL.
- You redirect your user to the widget URL.
- Your user goes through the enrollment and payment process within the widget.
- You will receive webhook events detailing the status of the enrollment, payment, and charge.
- Your user is redirected back to your application.
- 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
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
andpayment_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 theenrollment
andpayment_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 Code | Type (Resource) | Description | Trigger |
---|---|---|---|
OBJECT_CREATED | CUSTOMERS | In 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_CREATED | ENROLLMENTS | Once 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_UPDATE | ENROLLMENTS | When 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 - FAILED For 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 Code | Type (Resource) | Description | Trigger |
---|---|---|---|
OBJECT_CREATED | PAYMENT_INTENTS | Once 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_CREATED | CHARGES | Once 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_UPDATE | PAYMENT_INTENTS | During 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_UPDATE | CHARGES | During 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_CREATED | TRANSACTIONS | Once 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.
Updated about 9 hours ago