Design Guidelines
Open Finance has outlined specific design guidelines that must be followed. A summary of these guidelines is provided below. Please ensure all necessary user-facing information is displayed in accordance with them. There are no restrictions on the choice of colors or UI components. Please refer to the Figma file
provided below for design inspiration.
General UI/UX Flow Requirements
This covers the general user experience requirements for redirection, confirmation, error handling, and history management across Open Finance payment flows.
Success Confirmation:
Display a clear success message (e.g., "Pagamento bem-sucedido!") with a visual indicator (like a green checkmark).
Present a summary of the completed operation with key details:
Value of the payment/transaction.
Payment method.
Recipient information (Name, CPF/CNPJ).
Date and time of authorization/payment.
Authorization ID/ Transaction ID.
Origin Institution Name / Payment Type / Transaction Type.
Periodicity and consent duration for recurring payments.
Provide a clear button or link to return to the originating merchant/initiator page.
Error Handling:
Error messages must clearly communicate what happened, explain the cause in simple language, and provide guidance and actionable options for the user to proceed.
Display the error code and message received from Juspay
Transaction History & Details (Área de Gestão):
You should include sections for "Meus Pagamentos" (My Payments), displaying a complete history of all payments /transactions.
Include detailed information for each payment, including all relevant specifics (e.g., transaction ID, payment date, amount, institution, payment type)