The Senior Software Engineer (UI) will build and enhance production-grade services, focusing on responsive UI using React and TypeScript, integrating backend APIs, and ensuring performance and accessibility standards.
Our Purpose
Mastercard powers economies and empowers people in 200+ countries and territories worldwide. Together with our customers, we're helping build a sustainable economy where everyone can prosper. We support a wide range of digital payments choices, making transactions secure, simple, smart and accessible. Our technology and innovation, partnerships and networks combine to deliver a unique set of products and services that help people, businesses and governments realize their greatest potential.
Title and Summary
Senior Software Engineer (UI)
Overview
Who We Are - Mastercard
Mastercard is a global technology company in the payments industry, operating in over 210+ countries and territories. Our mission is to power an inclusive, sustainable, digital economy that benefits everyone, everywhere - by making transactions safe, simple, smart, and accessible.
We harness secure data, world-class networks, deep partnerships, and relentless innovation to help individuals, financial institutions, businesses, and governments reach their greatest potential.
Our culture is guided by our Decency Quotient (DQ) - a core value that influences every decision we make and how we treat all who rely on us.
About AI & Decision Product Enablement (AI&DPE)
AI & Decision Product Enablement (AI&DPE) is Mastercard's innovation engine for AI-driven decisioning at global scale.
We build and enhance the platforms that power real-time intelligence across Mastercard's network - enabling:• Millisecond-latency decisioning• Resilient, highly available global services• Hundreds of AI models• Hundreds of thousands of business rules• 0 50+ market-facing products across Mastercard Services
Products that protect revenue, mitigate fraud, and empower customers worldwide
AI&DPE teams ensure Mastercard delivers industry-leading agility, intelligence, resiliency, and scalability in every product we build.
Role:
Build, enhance, and run production-grade services by taking solution blueprints from Product Engineering teams and owning end-to-end delivery-from design refinement and implementation through release, monitoring, and operational excellence.
What you'll do (Key responsibilities):• Build responsive, accessible (WCAG-aware) user interfaces using React and modern TypeScript patterns.• Translate UX/UI designs (Figma/Sketch) into high-quality, reusable components aligned to a design system.• Design front-end architecture for scalability and maintainability (routing, state management, component composition, data-fetching patterns).• Integrate with backend APIs (REST/GraphQL) and handle authentication/authorization patterns (e.g., OAuth/OIDC flows) in partnership with platform teams.• Implement robust testing practices: unit/component tests, integration tests, and end-to-end tests; contribute to quality gates in CI/CD.• Drive performance and reliability: bundle optimization, rendering performance, caching strategies, error handling, and monitoring of client-side issues.• Ensure secure front-end practices: dependency hygiene, safe handling of user input, and adherence to secure SDLC standards.• Collaborate closely with Product, Design, Backend, and QA; contribute to iterative delivery, code reviews, and technical design discussions.
Ways of working:• Comfortable collaborating with product and design partners; can clarify ambiguity and deliver iteratively.• Communicates clearly in PRs and technical notes; advocates for accessibility and performance as first-class concerns.• Balances speed with quality; pragmatic about trade-offs while maintaining engineering standards.• Proactive about production health and user experience, using data to drive improvements.
Typical Deliverables:• UI technical design notes (component boundaries, state/data flow, API integration patterns)• Reusable React components and/or design-system contributions (documentation and examples)• Automated test suites (unit/component and end-to-end) integrated into CI/CD• Performance and accessibility improvements with measurable outcomes• Production readiness artifacts (feature flags, rollout notes, error monitoring dashboards/alerts where applicable)
All About You
• Must be detail-oriented, proactive, and able to function under pressure in a delivery-focused environment.• Demonstrates high ownership and strong follow-through; comfortable taking work from concept to production.• Possesses strong communication skills-both verbal and written-and strong collaborative/relationship-building skills.• Comfortable working in a matrixed, diverse, and geographically distributed team.• Deep understanding of modern software delivery practices including Agile and test-driven development.
Core technical requirements (must-have):• Strong proficiency in React with TypeScript (functional components, hooks, composition patterns).• Solid understanding of HTML5, CSS3, responsive design, and modern styling approaches (CSS Modules, CSS-in-JS, Tailwind or equivalent).• Experience with state management and data-fetching patterns (Context, Redux Toolkit, Zustand, React Query/SWR or equivalent).• Strong testing discipline: Jest/Vitest, React Testing Library, and end-to-end testing (Cypress/Playwright).• Production experience with build tooling and performance optimization (Vite/Webpack, code-splitting, bundle analysis, lazy loading).• Experience integrating with APIs (REST and/or GraphQL), handling async flows, and implementing robust client-side error handling.• CI/CD familiarity for front-end apps (pipelines, quality gates, automated tests, artifact builds, environment promotion).• Accessibility fundamentals (semantic HTML, keyboard navigation, ARIA usage) and commitment to inclusive UX.
Nice to have:• Experience building and maintaining design systems and component libraries (Storybook, token-based theming).• Familiarity with Next.js (SSR/SSG), route-based code splitting, and server components concepts.• Experience with observability for front-end applications (client-side logging, real user monitoring, error tracking).• Knowledge of secure front-end patterns (OWASP Top 10 awareness, CSP, XSS mitigation, dependency scanning).• Exposure to fintech/payments domain or other regulated environments.• Experience collaborating on API contracts and using API schema/contract tooling (OpenAPI, GraphQL schemas).
Success measures (example):• Features delivered from design to production with low defect rates and minimal rework.• Improved user experience metrics (performance, accessibility compliance, usability feedback).• Well-tested UI with reliable releases through CI/CD and repeatable deployment practices.• Reduced production issues via observability, fast triage, and effective root-cause fixes.
Experience level (guidance):
Typically 3 - 7+ years in front-end/UI engineering with meaningful ownership of production web applications.
Corporate Security Responsibility
All activities involving access to Mastercard assets, information, and networks comes with an inherent risk to the organization and, therefore, it is expected that every person working for, or on behalf of, Mastercard is responsible for information security and must:
Mastercard powers economies and empowers people in 200+ countries and territories worldwide. Together with our customers, we're helping build a sustainable economy where everyone can prosper. We support a wide range of digital payments choices, making transactions secure, simple, smart and accessible. Our technology and innovation, partnerships and networks combine to deliver a unique set of products and services that help people, businesses and governments realize their greatest potential.
Title and Summary
Senior Software Engineer (UI)
Overview
Who We Are - Mastercard
Mastercard is a global technology company in the payments industry, operating in over 210+ countries and territories. Our mission is to power an inclusive, sustainable, digital economy that benefits everyone, everywhere - by making transactions safe, simple, smart, and accessible.
We harness secure data, world-class networks, deep partnerships, and relentless innovation to help individuals, financial institutions, businesses, and governments reach their greatest potential.
Our culture is guided by our Decency Quotient (DQ) - a core value that influences every decision we make and how we treat all who rely on us.
About AI & Decision Product Enablement (AI&DPE)
AI & Decision Product Enablement (AI&DPE) is Mastercard's innovation engine for AI-driven decisioning at global scale.
We build and enhance the platforms that power real-time intelligence across Mastercard's network - enabling:• Millisecond-latency decisioning• Resilient, highly available global services• Hundreds of AI models• Hundreds of thousands of business rules• 0 50+ market-facing products across Mastercard Services
Products that protect revenue, mitigate fraud, and empower customers worldwide
AI&DPE teams ensure Mastercard delivers industry-leading agility, intelligence, resiliency, and scalability in every product we build.
Role:
Build, enhance, and run production-grade services by taking solution blueprints from Product Engineering teams and owning end-to-end delivery-from design refinement and implementation through release, monitoring, and operational excellence.
What you'll do (Key responsibilities):• Build responsive, accessible (WCAG-aware) user interfaces using React and modern TypeScript patterns.• Translate UX/UI designs (Figma/Sketch) into high-quality, reusable components aligned to a design system.• Design front-end architecture for scalability and maintainability (routing, state management, component composition, data-fetching patterns).• Integrate with backend APIs (REST/GraphQL) and handle authentication/authorization patterns (e.g., OAuth/OIDC flows) in partnership with platform teams.• Implement robust testing practices: unit/component tests, integration tests, and end-to-end tests; contribute to quality gates in CI/CD.• Drive performance and reliability: bundle optimization, rendering performance, caching strategies, error handling, and monitoring of client-side issues.• Ensure secure front-end practices: dependency hygiene, safe handling of user input, and adherence to secure SDLC standards.• Collaborate closely with Product, Design, Backend, and QA; contribute to iterative delivery, code reviews, and technical design discussions.
Ways of working:• Comfortable collaborating with product and design partners; can clarify ambiguity and deliver iteratively.• Communicates clearly in PRs and technical notes; advocates for accessibility and performance as first-class concerns.• Balances speed with quality; pragmatic about trade-offs while maintaining engineering standards.• Proactive about production health and user experience, using data to drive improvements.
Typical Deliverables:• UI technical design notes (component boundaries, state/data flow, API integration patterns)• Reusable React components and/or design-system contributions (documentation and examples)• Automated test suites (unit/component and end-to-end) integrated into CI/CD• Performance and accessibility improvements with measurable outcomes• Production readiness artifacts (feature flags, rollout notes, error monitoring dashboards/alerts where applicable)
All About You
• Must be detail-oriented, proactive, and able to function under pressure in a delivery-focused environment.• Demonstrates high ownership and strong follow-through; comfortable taking work from concept to production.• Possesses strong communication skills-both verbal and written-and strong collaborative/relationship-building skills.• Comfortable working in a matrixed, diverse, and geographically distributed team.• Deep understanding of modern software delivery practices including Agile and test-driven development.
Core technical requirements (must-have):• Strong proficiency in React with TypeScript (functional components, hooks, composition patterns).• Solid understanding of HTML5, CSS3, responsive design, and modern styling approaches (CSS Modules, CSS-in-JS, Tailwind or equivalent).• Experience with state management and data-fetching patterns (Context, Redux Toolkit, Zustand, React Query/SWR or equivalent).• Strong testing discipline: Jest/Vitest, React Testing Library, and end-to-end testing (Cypress/Playwright).• Production experience with build tooling and performance optimization (Vite/Webpack, code-splitting, bundle analysis, lazy loading).• Experience integrating with APIs (REST and/or GraphQL), handling async flows, and implementing robust client-side error handling.• CI/CD familiarity for front-end apps (pipelines, quality gates, automated tests, artifact builds, environment promotion).• Accessibility fundamentals (semantic HTML, keyboard navigation, ARIA usage) and commitment to inclusive UX.
Nice to have:• Experience building and maintaining design systems and component libraries (Storybook, token-based theming).• Familiarity with Next.js (SSR/SSG), route-based code splitting, and server components concepts.• Experience with observability for front-end applications (client-side logging, real user monitoring, error tracking).• Knowledge of secure front-end patterns (OWASP Top 10 awareness, CSP, XSS mitigation, dependency scanning).• Exposure to fintech/payments domain or other regulated environments.• Experience collaborating on API contracts and using API schema/contract tooling (OpenAPI, GraphQL schemas).
Success measures (example):• Features delivered from design to production with low defect rates and minimal rework.• Improved user experience metrics (performance, accessibility compliance, usability feedback).• Well-tested UI with reliable releases through CI/CD and repeatable deployment practices.• Reduced production issues via observability, fast triage, and effective root-cause fixes.
Experience level (guidance):
Typically 3 - 7+ years in front-end/UI engineering with meaningful ownership of production web applications.
Corporate Security Responsibility
All activities involving access to Mastercard assets, information, and networks comes with an inherent risk to the organization and, therefore, it is expected that every person working for, or on behalf of, Mastercard is responsible for information security and must:
- Abide by Mastercard's security policies and practices;
- Ensure the confidentiality and integrity of the information being accessed;
- Report any suspected information security violation or breach, and
- Complete all periodic mandatory security trainings in accordance with Mastercard's guidelines.
Similar Jobs at Mastercard
Blockchain • Fintech • Payments • Consulting • Cryptocurrency • Cybersecurity • Quantum Computing
The Lead Platform Architect designs and delivers internet infrastructure solutions, generates technical documents, and resolves internet architectural problems while collaborating with multiple teams to meet evolving requirements.
Top Skills:
Application ServersCloud TechnologiesDatabase TechnologiesInternet SecurityInternet TechnologiesLoad BalancersMicrosoft VisioWeb Application FirewallsWeb ServersYaml
Blockchain • Fintech • Payments • Consulting • Cryptocurrency • Cybersecurity • Quantum Computing
The Senior Software Engineer will develop and maintain microservices, manage the full SDLC, and implement AI-driven workflows while collaborating with various teams.
Top Skills:
DockerGrpcKubernetesLangchainLanggraphPythonRest
Blockchain • Fintech • Payments • Consulting • Cryptocurrency • Cybersecurity • Quantum Computing
The role entails creating developer-facing content to enhance API adoption, conducting training, and collaborating with various teams for content strategy and performance metrics.
Top Skills:
AnalyticsAPIsSeoTechnical WritingVideo Production
What you need to know about the Edinburgh Tech Scene
From traditional pubs and centuries-old universities to sleek shopping malls and glass-paneled office buildings, Edinburgh's architecture reflects its unique blend of history and modernity. But the fusion of past and future isn't just visible in its buildings; it's also shaping the city's economy. Named the United Kingdom's leading technology ecosystem outside of London, Edinburgh plays host to major global companies like Apple and Adobe, as well as a growing number of innovative startups in fields like cybersecurity, finance and healthcare.
