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.
This covers the general user experience requirements for redirection, confirmation, error handling, and history management across Open Finance payment flows.
1. Success Confirmation
After a successful payment or authorization, you must display a clear confirmation to the user.
The screen should include:
A success message (e.g., “Pagamento bem-sucedido!”) with a visual indicator.
Value of the payment/transaction.
Payment method.
Receiver information (Name, CPF/CNPJ).
Authorization or payment date and time.
Authorization ID / Transaction ID.
Origin institution name and payment type.
For recurring payments: periodicity and consent duration.
A clear button or link to return to the merchant / originating app.
2. Error Handling
If the payment fails, times out, or is cancelled, the error screen must:
Clearly explain what happened in simple language.
Display the error code and message returned from Juspay.
Provide actionable next steps (e.g., try again, choose another method, return to merchant).
Avoid technical jargon and ensure the message is easy for users to understand.
3. Payment Receipt Requirements
Users must be able to view—and download—a detailed payment receipt.
The receipt must include:
Payment amount.
Payment method.
Payment date.
Receiver information.
Service fee (if applicable).
For recurring payments:
Payment frequency.
Consent term.
First and last payment dates.
4. Additional UI Expectations
Display “via Open Finance” next to the payment option (if using your own payment page).
Ensure success, failure, and pending states are clear and contextual.
Provide a downloadable receipt option in the post-payment flow.
5. Order History / My Payments
Your application must include a My Payments or Order History section where users can review all their past transactions.
Each record should show:
Payment amount.
Payment method.
Receiver and payer details.
Authorization date/time.
Scheduling information (if applicable).
First/last payment date for recurring payments.
Payment frequency.
Authorization number (last section of
consentId).
Expectation: Open Finance transactions should be clearly labeled or marked with an icon.
6. Payment Management (JSR & PIX Automatico)
This covers the design items/screens needed for users to manage ongoing payment authorizations for JSR and recurring payments.
List of Authorizations (
Minhas autorizações):Provide a central screen where users can view all their active, pending, or expired payment authorizations or enrolments.
For each item, show the institution name, payment method (e.g., "NuBank Biométrico"), and a masked account/card identifier.
Display a clear status for each authorization (e.g., "Ativo", "Pendente").
Authorization Detail Page:
Show all relevant linked information: User's Name, CPF, Bank Agency (
Agência), and Account Number (Conta Corrente), original confirmation date (Data de confirmação), unique consent ID (ID de Consentimento).Provide a prominent and clearly labeled button to revoke the authorization (e.g., "Remover Conta salva" or "Cancelar autorização").
Termination Confirmation:
Before finalizing a revocation, present a confirmation modal or screen. Use clear, direct language to explain the consequence emphasizing that the action is irreversible to the user.
Provide two clear choices: a confirmation action (e.g., "Sim, encerrar" - Yes, end) and a cancellation action (e.g., "Voltar" - Go back).