Highlighting Incompatible Payment Gateways
Preventing Lost Sales Through Proactive Merchant Warnings
Challenge: Merchants had no signal when incompatible payment gateways were activated together.
Solution: Built detection and notice surfaces in WooCommerce Blocks that explain conflicts directly in the checkout editor.
Result: Support tickets dropped and launches moved faster.
ReactReduxTypeScriptWordPressPHP
Clear warnings help merchants identify payment setup issues immediately
Preventing Silent Checkout Failures
Merchants adopting the new Cart & Checkout Blocks in WooCommerce often faced confusion and potential lost sales when their existing, essential payment gateways weren't compatible with the blocks. There was no built-in mechanism to inform them of this incompatibility proactively, leading to support requests and frustration only discovered when customers couldn't complete purchases.
My Role & Contributions
Recognizing this critical gap, I spearheaded a research spike aimed at finding graceful ways to inform merchants about incompatible extensions within the block editor environment.
- Led Research Spike: Conducted in-depth research into plugin compatibility detection methods, explored solutions used by other teams, and analyzed the technical feasibility of various approaches
- Synthesized Findings: Authored a comprehensive P2 post detailing the problem space and proposing several solutions, which garnered significant attention across teams (Product, Design, Engineering)
- Developed Proof-of-Concept: Created a working proof-of-concept specifically targeting the most critical incompatibility issue – payment gateways – demonstrating how merchants could be warned
- Implemented Feature: Based on the success and clear need demonstrated by the research and PoC, I was tasked with developing and implementing this warning system as a high-priority feature
Key Features
Before: No indication of compatibility issues
After: Clear highlighting of incompatible gateways
Before: No compatibility warnings in sidebar
After: Clear warning with list of incompatible gateways
Technical Implementation
The implementation required careful coordination between frontend and backend systems:
✨ Highlights
- Led research initiative that evolved into a shipped feature
- Prevented potential lost sales from silent checkout failures
- Reduced support burden by proactively warning merchants
🔍 Challenges
- Tracing data flow between WooCommerce PHP backend and React frontend
- Designing non-intrusive yet noticeable warning UI
- Handling edge cases with disabled or partially configured gateways
🛠️ Skills Demonstrated
- Research & Analysis: Identifying user pain points and investigating solutions
- React & TypeScript: Building type-safe UI components
- Redux/@wordpress/data: Managing complex state for compatibility detection
Key Takeaways
- Gained experience in driving features from research to implementation
- Deepened understanding of WooCommerce's payment gateway architecture
- Learned effective patterns for editor notifications in WordPress
- Improved skills in debugging across frontend/backend boundaries
- Developed expertise in creating user-friendly technical warnings
- Enhanced ability to advocate for UX improvements through research
Technologies Used
⚙️ Core Stack
- React
- Redux (@wordpress/data)
- TypeScript
- PHP
- WordPress Block Editor
📦 Libraries
- WooCommerce Blocks
- @wordpress/components
- @wordpress/i18n
- @wordpress/element
🔧 Tools
- WordPress Development Environment
- Chrome DevTools
- Redux DevTools
- Git/GitHub