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.

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:

---

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 (Biometric Flow Only)

Biometric-enabled merchants must allow users to view and revoke consents directly within their application.

You may implement this by:

• Integrating Juspay’s Session API (action: paymentManagement),
  or

• Building your own consent management module.

Each consent record should display:

• Payment amount(s).

• Payment method.

• Receiver and payer details.

• Authorization date/time.

• First and last scheduled payment dates.

• Payment frequency.

• Consent / Authorization ID.

• Service fee (if applicable).

Action: Ensure users have a simple and intuitive interface to review and revoke their consents at any time.