EVRY Payment Client
Executive Summary
A banking payment system enabling international and domestic payments, transfers, standing orders, and foreign exchange operations through a modern React-based frontend integrated with core banking APIs for seamless financial transaction processing.
Business Problem
The banking institution operated legacy payment interfaces that were difficult for both customers and internal staff to navigate. Processing international payments required switching between multiple disconnected systems for currency conversion, compliance checks, and routing decisions. Standing order management was entirely manual, leading to processing errors and customer complaints. The existing interfaces could not support the growing volume of digital payment transactions or meet modern user experience expectations. The challenge was building a unified payment client that consolidated international payments, domestic transfers, standing orders, and foreign exchange into a single, intuitive interface while maintaining strict compliance with banking regulations and real-time integration with core banking systems.
Architecture Overview
The solution implements a single-page application architecture built with React and Redux for predictable state management across complex payment workflows. The frontend communicates with multiple backend APIs including Inward Payment, Invoice Periodic, Foreign Exchange, Payment Renewal, and Bank to Bank services. MongoDB provides flexible document storage for payment records and transaction history. The application is deployed on AWS with Jenkins managing the CI/CD pipeline for automated testing and deployment.
Solution Design
The React-based frontend uses Redux for centralized state management, handling complex multi-step payment workflows where form state, validation results, and API responses must be coordinated. Modular components handle different payment types (international, domestic, standing orders, FX) with shared validation logic and consistent UX patterns. The styling layer uses SASS and LESS preprocessors for maintainable, themed stylesheets. Backend integration happens through RESTful APIs with Node.js middleware handling authentication, request validation, and response transformation. MongoDB stores transaction records with flexible schema design accommodating different payment type structures. Jasmine provides the testing framework for comprehensive unit and integration test coverage. GitHub manages source control with branch-based workflows and pull request reviews.
Architecture Diagrams
Technology Stack
Security
Banking payment systems require strict security controls. The application implements token-based authentication with session management for secure API access. All payment transactions require multi-factor confirmation before execution. Input validation prevents injection attacks across all payment form fields. HTTPS enforces encrypted communication between client and banking APIs. Transaction audit logs maintain immutable records of all payment operations for regulatory compliance. Role-based access controls restrict payment approval authority based on transaction amounts and types.
Scalability
The React SPA architecture minimizes server load by handling UI rendering and state management client-side. Redux state normalization prevents redundant data storage and enables efficient re-rendering of complex payment forms. The Node.js middleware layer handles concurrent API requests efficiently through its event-driven architecture. MongoDB horizontal scaling supports growing transaction volumes through sharding strategies aligned to payment date ranges. AWS infrastructure auto-scales based on transaction processing demand patterns.
Performance Metrics
- Payment form submission to confirmation response in under 2 seconds
- Foreign exchange rate lookups return real-time quotes within 500ms
- Application supports 5,000+ concurrent active payment sessions
- Standing order processing accuracy improved to 99.97% from 94%
- Page load time under 1.5 seconds for initial application bundle
Challenges
- Coordinating multi-step payment workflows across Redux state with real-time API validation required careful action sequencing and optimistic UI updates with rollback handling
- Foreign exchange rate volatility demanded real-time quote management with configurable validity windows to prevent stale rate submissions
- Supporting multiple payment types (international, domestic, standing orders, FX) within a unified interface while maintaining distinct compliance rules per type
- Legacy API integration required adapting inconsistent response formats from different banking services into a normalized frontend data model
Lessons Learned
- Redux middleware proved essential for managing complex asynchronous payment workflows — saga patterns handled multi-step API orchestration more cleanly than raw promise chains
- Component-level form validation combined with API-level validation provides the best user experience for financial forms where field dependencies are complex
- Building payment type as a pluggable module architecture allowed rapid addition of new payment instruments without disrupting existing functionality
- Comprehensive Jasmine test coverage for payment calculation logic prevented regression bugs that could have significant financial impact
- SASS/LESS preprocessing with BEM naming conventions maintained stylesheet scalability as the application grew to cover 5+ payment types
Business Outcomes
- Consolidated 4 separate payment interfaces into a single unified application
- Standing order processing errors reduced from 6% to 0.03% through automated validation
- Customer payment processing time reduced by 65% through streamlined workflows
- International payment rejection rate decreased by 40% through real-time compliance validation
- Developer velocity increased 3x through component reuse across payment types
Questions
FAQ
How does the application handle payment failures and retries?
The system implements idempotency keys for all payment submissions to prevent duplicate transactions on retry. Failed payments are categorized by failure type — transient errors trigger automatic retry with exponential backoff, while validation failures return detailed error messages for user correction. A payment status tracker provides real-time visibility into processing stages.
How is foreign exchange rate management handled for international payments?
Real-time FX rates are fetched on form focus with a configurable validity window (typically 30 seconds for volatile pairs). The UI displays countdown indicators showing rate expiry. If a rate expires before submission, the system automatically fetches a fresh quote and prompts the user to confirm the updated amount. Rate lock functionality is available for larger transactions.
What accessibility considerations were implemented for the payment forms?
All form fields include proper ARIA labels and error announcements for screen readers. Keyboard navigation follows logical tab order through payment workflows. Error messages are associated with their fields via aria-describedby. Focus management returns users to the first error field on validation failure, and currency amounts are formatted with proper screen reader pronunciation.
Future Roadmap
Planned enhancements include real-time payment tracking with push notifications for transaction status updates, AI-powered fraud detection for outbound payment validation, biometric authentication for high-value transaction approval, and expansion to support cryptocurrency payment rails alongside traditional banking infrastructure.