Skip to content

feat: add card grid UI for payment gateway selection #1830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sapayth wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

feat: add card grid UI for payment gateway selection #1830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aecdbd0
feat: add card grid UI for payment gateway selection
sapayth Mar 13, 2026
b008c7b
update css
sapayth Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Lib/Gateway/Paypal_Gateway.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ protected function init() {
$this->id = 'paypal';
$this->admin_label = __( 'PayPal', 'wp-user-frontend' );
$this->checkout_label = __( 'PayPal', 'wp-user-frontend' );
$this->icon = apply_filters( 'wpuf_paypal_checkout_icon', WPUF_ASSET_URI . '/images/paypal.png' );
$this->icon = apply_filters( 'wpuf_paypal_checkout_icon', WPUF_ASSET_URI . '/images/paypal-mark.svg' );
$this->supports_subscription = true;

// Initialize PayPal-specific properties
Expand Down
79 changes: 79 additions & 0 deletions Lib/WeDevs_Settings_API.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?php

/**
* weDevs Settings API wrapper class

Check failure on line 4 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Doc comment short description must start with a capital letter
*
* @version 1.3 (27-Sep-2016)
*
Expand All @@ -9,22 +9,22 @@
* @link https://tareq.co Tareq Hasan
* @example example/oop-example.php How to use the class
*/
if ( !class_exists( 'WeDevs_Settings_API' ) ):

Check failure on line 12 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Space between opening control structure and T_COLON is required

Check failure on line 12 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Expected 1 space after closing parenthesis; found 0

Check failure on line 12 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Expected 1 space after "!"; 0 found
class WeDevs_Settings_API {

Check failure on line 13 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected 1 tabs, found 0

/**

Check failure on line 15 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected at least 2 tabs, found 1
* settings sections array

Check failure on line 16 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Doc comment short description must start with a capital letter
*
* @var array
*/
protected $settings_sections = array();

Check failure on line 20 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected at least 2 tabs, found 1

/**

Check failure on line 22 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected at least 2 tabs, found 1
* Settings fields array
*
* @var array
*/
protected $settings_fields = array();

Check failure on line 27 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected at least 2 tabs, found 1

public function __construct() {
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
Expand All @@ -36,7 +36,7 @@
function admin_enqueue_scripts() {
wp_enqueue_script( 'jquery' );

if ( isset( $_GET['page'] ) && ( $_GET['page'] == 'wpuf-settings' || $_GET['page'] == 'wpuf-post-forms' || $_GET['page'] == 'wpuf-modules' || $_GET['page'] == 'wpuf-profile-forms' ) ) {

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Loose comparisons are not allowed. Expected: "==="; Found: "=="

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Processing form data without nonce verification.

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Loose comparisons are not allowed. Expected: "==="; Found: "=="

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Processing form data without nonce verification.

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Loose comparisons are not allowed. Expected: "==="; Found: "=="

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Processing form data without nonce verification.

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Loose comparisons are not allowed. Expected: "==="; Found: "=="

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Processing form data without nonce verification.

Check warning on line 39 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Processing form data without nonce verification.
wp_enqueue_media();
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'wp-color-picker' );
Expand Down Expand Up @@ -101,7 +101,7 @@
function admin_init() {
//register settings sections
foreach ( $this->settings_sections as $section ) {
if ( false == get_option( $section['id'] ) ) {

Check warning on line 104 in Lib/WeDevs_Settings_API.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Loose comparisons are not allowed. Expected: "==="; Found: "=="
add_option( $section['id'], array() );
}

Expand Down Expand Up @@ -344,6 +344,85 @@
echo wp_kses( $html, array('fieldset' => [],'label' => ['for' => []],'input' => ['type' => [],'class' => [],'id' => [],'name' => [],'value' => [],'checked' => [],],'br' => [],'span' => ['class' => []],'svg' => ['width' => [],'height' => [],'viewBox' => [],'fill' => [],'xmlns' => [],],'path' => ['d' => [], 'fill' => []],'p' => ['class' => [] ] ) );
}

/**
* Displays a Texty-style card grid for selecting payment gateways
*
* Renders each gateway as a clickable card with icon and name.
* Multiple cards can be checked (multi-select). Clicking a card
* also reveals that gateway's settings panel below the grid.
*
* @since WPUF_SINCE
*
Comment on lines +354 to +355
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Replace the placeholder @since value.

@since WPUF_SINCE should be replaced with the actual release version before merge.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@Lib/WeDevs_Settings_API.php` around lines 354 - 355, Locate the docblock in
the WeDevs_Settings_API class in Lib/WeDevs_Settings_API.php that currently uses
the placeholder "@since WPUF_SINCE" and replace that placeholder with the actual
release version string (e.g., "1.2.3") used across the project; ensure the
`@since` tag format matches other `@since` entries in the repository.

* @param array $args settings field args
*
* @return void
*/
function callback_gateway_selector( $args ) {
$value = $this->get_option( $args['id'], $args['section'], $args['std'] );
$value = $value ? $value : [];

// Inline SVG fallback icons (no image files exist for these)
$bank_svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#787c82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M3 10h18"/><path d="M12 3l9 7H3l9-7z"/><path d="M5 10v8"/><path d="M9 10v8"/><path d="M15 10v8"/><path d="M19 10v8"/></svg>';
$generic_svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#787c82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>';
?>
<fieldset>
<input type="hidden" name="<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>]" value="" />

<div class="wpuf-gateway-cards">
<?php foreach ( $args['options'] as $key => $gateway ) :
$is_checked = in_array( $key, $value, true );
$is_pro = ! empty( $gateway['is_pro_preview'] ) && $gateway['is_pro_preview'];
$disabled = $is_pro ? 'disabled' : '';
$active_class = $is_checked ? ' wpuf-gateway-card--active' : '';
$pro_class = $is_pro ? ' wpuf-gateway-card--pro-locked' : '';
$icon = ! empty( $gateway['icon'] ) ? $gateway['icon'] : '';
$admin_label = $gateway['admin_label'];
?>
<div class="wpuf-gateway-card<?php echo esc_attr( $active_class . $pro_class ); ?>"
data-gateway="<?php echo esc_attr( $key ); ?>">

<input type="checkbox"
class="wpuf-gateway-card__checkbox"
id="wpuf-<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
name="<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
value="<?php echo esc_attr( $key ); ?>"
<?php checked( $is_checked, true ); ?>
<?php echo esc_attr( $disabled ); ?> />

<label class="wpuf-gateway-card__toggle"
for="wpuf-<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
title="<?php echo esc_attr( sprintf( __( 'Enable %s', 'wp-user-frontend' ), $admin_label ) ); ?>">
<svg class="wpuf-gateway-card__check-on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
<circle cx="12" cy="12" r="12" fill="#00a32a"/>
<path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg class="wpuf-gateway-card__check-off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
<circle cx="12" cy="12" r="11" fill="none" stroke="#c3c4c7" stroke-width="2"/>
</svg>
</label>

<div class="wpuf-gateway-card__icon">
<?php if ( $icon ) : ?>
<img src="<?php echo esc_url( $icon ); ?>" alt="<?php echo esc_attr( $admin_label ); ?>" />
<?php elseif ( 'bank' === $key ) : ?>
<?php echo $bank_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Hardcoded SVG ?>
<?php else : ?>
<?php echo $generic_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Hardcoded SVG ?>
<?php endif; ?>
</div>

<div class="wpuf-gateway-card__name">
<?php echo esc_html( $admin_label ); ?>
</div>
</div>
<?php endforeach; ?>
</div>

<?php echo wp_kses_post( $this->get_field_description( $args ) ); ?>
</fieldset>
<?php
}

/**
* Displays a multicheckbox a settings field
*
Expand Down
98 changes: 98 additions & 0 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1603,3 +1603,101 @@ body.wpuf-modal-open {
.wpuf-login-settings-row.hidden {
display: none !important;
}
.wpuf-gateway-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.wpuf-gateway-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 150px;
padding: 20px 16px 14px;
border: 2px solid #e0e0e0;
border-radius: 6px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpuf-gateway-card:hover {
border-color: #c3c4c7;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.wpuf-gateway-card--active:hover {
border-color: #10b981;
}
.wpuf-gateway-card--focused {
border-color: #10b981;
box-shadow: 0 0 0 1px #10b981;
}
.wpuf-gateway-card--focused:hover {
border-color: #10b981;
}
.wpuf-gateway-card--pro-locked {
opacity: 0.6;
cursor: not-allowed;
}
.wpuf-gateway-card__checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.wpuf-gateway-card__toggle {
position: absolute;
top: 4px;
right: 4px;
cursor: pointer;
line-height: 1;
padding: 4px;
z-index: 2;
}
.wpuf-gateway-card__toggle:hover {
opacity: 0.8;
}
Comment on lines +1625 to +1661
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Locked cards still look clickable.

--pro-locked only lowers opacity. The generic hover rule and the toggle’s pointer/hover styles still apply, so a locked gateway keeps advertising affordances as if it can be enabled.

Proposed CSS adjustment 
 .wpuf-gateway-card--pro-locked {
   opacity: 0.6;
   cursor: not-allowed;
 }
+.wpuf-gateway-card--pro-locked:hover,
+.wpuf-gateway-card--pro-locked.wpuf-gateway-card--focused {
+  border-color: `#e0e0e0`;
+  box-shadow: none;
+}
+.wpuf-gateway-card--pro-locked .wpuf-gateway-card__toggle,
+.wpuf-gateway-card--pro-locked .wpuf-gateway-card__toggle:hover {
+  cursor: not-allowed;
+  opacity: 1;
+}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@assets/css/admin.css` around lines 1625 - 1661, The locked-card state
(.wpuf-gateway-card--pro-locked) currently only reduces opacity so hover and
toggle affordances remain; update the CSS to override hover and pointer
behaviors for locked cards by adding rules such as
.wpuf-gateway-card--pro-locked:hover { border-color: inherit; box-shadow: none;
} and .wpuf-gateway-card--pro-locked { cursor: not-allowed; } plus disable
interactions on children: .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__toggle { pointer-events: none; opacity: 0.6; cursor:
not-allowed; } and ensure .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__checkbox keeps pointer-events: none so the card no longer
advertises clickability.

.wpuf-gateway-card__check-on {
display: none;
}
.wpuf-gateway-card__check-off {
display: block;
}
.wpuf-gateway-card--active .wpuf-gateway-card__check-on {
display: block;
}
.wpuf-gateway-card--active .wpuf-gateway-card__check-off {
display: none;
}
.wpuf-gateway-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
margin-bottom: 8px;
}
.wpuf-gateway-card__icon img {
max-width: 100px;
max-height: 48px;
object-fit: contain;
}
.wpuf-gateway-card__icon svg {
max-width: 48px;
max-height: 48px;
}
.wpuf-gateway-card__name {
font-size: 13px;
font-weight: 500;
color: #1d2327;
text-align: center;
line-height: 1.3;
}
tr.wpuf-gateway-setting-row {
transition: opacity 0.15s ease;
}
tr.wpuf-gateway-setting-row.wpuf-gateway-setting-hidden {
display: none;
}
3 changes: 3 additions & 0 deletions assets/css/frontend-forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,6 +937,9 @@ body #wpuf-payment-gateway ul.wpuf-payment-gateways {
body #wpuf-payment-gateway ul.wpuf-payment-gateways li {
margin: 0;
}
body #wpuf-payment-gateway ul.wpuf-payment-gateways li.wpuf-gateway-paypal img {
max-width: 15px;
}
Comment on lines +940 to +942
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Check for Tailwind configuration and package.json
fd -t f -e json "tailwind|package" | head -20

Repository: weDevsOfficial/wp-user-frontend

Length of output: 233

🏁 Script executed:

# Search for Tailwind CSS imports or configuration
rg -i "tailwind|daisyui" --type json --type js --type css -A 3 | head -50

Repository: weDevsOfficial/wp-user-frontend

Length of output: 2404

🏁 Script executed:

# Check the structure of the CSS file to understand styling approach
cat -n assets/css/frontend-forms.css | head -50

Repository: weDevsOfficial/wp-user-frontend

Length of output: 1598

🏁 Script executed:

# Check if there are any Tailwind or CSS imports in the HTML/PHP files
rg -i "tailwind|scoped.*preflight" --type php --type html | head -20

Repository: weDevsOfficial/wp-user-frontend

Length of output: 890

🏁 Script executed:

# Check the beginning of frontend-forms.css to see if it has `@tailwind` directives
head -20 assets/css/frontend-forms.css

Repository: weDevsOfficial/wp-user-frontend

Length of output: 585

🏁 Script executed:

# Look at context around lines 940-942
sed -n '935,950p' assets/css/frontend-forms.css

Repository: weDevsOfficial/wp-user-frontend

Length of output: 534

🏁 Script executed:

# Check if frontend-forms.css has any Tailwind directives
rg "@tailwind|@layer" assets/css/frontend-forms.css

Repository: weDevsOfficial/wp-user-frontend

Length of output: 57

🏁 Script executed:

# Check package.json for build scripts and Tailwind configuration
cat package.json | head -100

Repository: weDevsOfficial/wp-user-frontend

Length of output: 2457

🏁 Script executed:

# Verify if tailwind.config.js references assets/css or src/css
cat tailwind.config.js | head -50

Repository: weDevsOfficial/wp-user-frontend

Length of output: 1840

🏁 Script executed:

# Check if frontend-forms.css exists in src/ directory
find . -name "frontend-forms.css" -o -name "*frontend-forms*" | grep -v node_modules

Repository: weDevsOfficial/wp-user-frontend

Length of output: 140

🏁 Script executed:

# Check Gruntfile for Tailwind build configuration
fd -t f "Gruntfile" | xargs cat | head -100

Repository: weDevsOfficial/wp-user-frontend

Length of output: 3396

🏁 Script executed:

# Check if assets/css files are in git or generated
git status assets/css/ 2>/dev/null | head -20

Repository: weDevsOfficial/wp-user-frontend

Length of output: 140

🏁 Script executed:

# Look for a build config that might compile src/ to assets/
rg "tailwind|src/css|assets/css" Gruntfile.js -A 5 -B 5 2>/dev/null | head -50

Repository: weDevsOfficial/wp-user-frontend

Length of output: 1821

Avoid adding styles to the legacy LESS pipeline; migrate to Tailwind CSS instead.

The rule at lines 940-942 is being added to assets/less/frontend-forms.less, which bypasses the required Tailwind CSS 3 + DaisyUI + scoped preflight pipeline. This file is part of the legacy LESS-based styling layer. Per coding guidelines, new styles should use Tailwind utilities or be added to the modern src/css/ pipeline with proper Tailwind directives.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@assets/css/frontend-forms.css` around lines 940 - 942, The new CSS rule
targeting body `#wpuf-payment-gateway` ul.wpuf-payment-gateways
li.wpuf-gateway-paypal img must not be added to the legacy LESS pipeline; remove
that rule from the LESS file and instead implement the sizing via the modern
Tailwind CSS pipeline: either add the equivalent Tailwind utility class to the
img element (e.g., a max-width utility) or create a small component/utility in
your Tailwind stylesheet (using `@layer` components or utilities) that targets the
same selector and sets the max-width, and ensure the change is included in the
Tailwind build so it follows the Tailwind + DaisyUI + scoped preflight pipeline.

body #wpuf-payment-gateway ul.wpuf-payment-gateways li .wpuf-payment-instruction {
padding: 8px 10px;
margin: 0 10px;
Expand Down
Binary file added assets/images/modules/razorpay.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/paypal-mark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading