Open Source • Professional

Payment Gateway Conflict Alerts

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.

React
Redux
TypeScript
WordPress
PHP

Discuss this project View Contribution

WooCommerce editor showing incompatible payment gateway warnings — Clear warnings help merchants identify payment setup issues immediately

Context

Preventing Silent Checkout Failures

Why this work mattered and the environment it lived in.

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.

Full background

This critical gap meant merchants would unknowingly configure their stores with payment methods that wouldn't work at checkout, potentially losing sales and damaging customer trust. The issue was particularly problematic because payment gateway compatibility wasn't obvious - merchants had no way to know which of their installed gateways would work with the new block-based checkout until customers reported checkout failures.

Snapshot

Highlights, Challenges, Skills

A concise readout for quick evaluators.

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

Role

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 Contributions

Features & Outcomes

Open narratives that explain the impact of each slice of work.

Contribution 01

Intelligent Payment Gateway Detection

Automatically identifies incompatible payment methods

Implemented front-end logic using TypeScript and the Redux store (@wordpress/data) to flag any enabled payment gateways that are not detected by WooCommerce Blocks as compatible. The detection system:

Retrieves payment gateway data from allSettings.globalPaymentMethods (which comes from the PHP backend via WC_Payment_Gateways)
Dynamically compares the list of all enabled payment gateways with the list of payment methods registered as compatible with WooCommerce Blocks (this list is discovered at runtime using the Blocks registration hooks)
Excludes disabled gateways to reduce noise and focus on active configuration issues
Updates in real-time as merchants enable or disable payment methods

This required careful integration between the data provided by the WooCommerce backend and the detection logic in the React frontend, ensuring merchants are always informed about gateways that will not appear in their block-based checkout.

Payment options before implementation — Before: No indication of compatibility issues

Payment options with incompatibility highlighting — After: Clear highlighting of incompatible gateways

Contribution 02

Clear UI Notifications

Non-intrusive warnings that merchants can't miss

Created a comprehensive notification system that alerts merchants through multiple touchpoints:

Dismissible Sidebar Notice:

Developed the IncompatiblePaymentGatewaysNotice React component
Appears prominently when incompatible gateways are detected
Lists specific incompatible payment methods clearly
Can be dismissed but reappears if new incompatibilities are detected

Inspector Controls Highlighting:

Added visual indicators directly within the "Payment Options" block settings
Incompatible methods are marked with warning icons and explanatory text
Provides context-sensitive information right where merchants configure payments

The dual-notification approach ensures merchants are aware of issues without being overly disruptive to their workflow.

Editor sidebar before warning implementation — Before: No compatibility warnings in sidebar

Editor sidebar showing incompatibility warning — After: Clear warning with list of incompatible gateways

Technical Deep Dive

Technical Implementation

The implementation required careful coordination between frontend and backend systems:

Frontend Architecture:

Modified Redux store actions and selectors in the payments store to handle compatibility data
Created new React components with TypeScript for type safety
Implemented proper internationalization for all user-facing strings
Added appropriate styling following WooCommerce design patterns

Backend Integration:

Debugged data flow from core WooCommerce functions through the Blocks backend
Ensured proper data structure when passing payment gateway information to the frontend
Traced through PHP payment gateway registration to understand data availability

State Management:

Leveraged @wordpress/data for global state management
Implemented selectors to efficiently compute incompatible gateways
Created actions for dismissing notifications while maintaining state consistency

Growth

Key Learnings

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

Toolkit

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

← Back to All Projects Contact Me