EC Payment Widget

A lightweight Drupal Commerce module that enhances payment method selection with descriptions and improved theming capabilities.

Overview

By default, Drupal Commerce displays payment methods as simple radio buttons with labels only. This module extends the payment method widget to include payment instructions (descriptions) below each option, making the checkout process more user-friendly and informative.

Features

• Enhanced Display: Shows payment gateway descriptions (Payment Instructions field) alongside radio button labels
• Clickable Area: The entire label and description area acts as a clickable region for better UX
• Easy Theming: Provides a dedicated template for customization without additional hooks
• Native Compatibility: Maintains standard widget behavior, including Ajax support
• Clean Styling: Includes basic CSS with hidden radio inputs for a modern look
• Zero Dependencies: Only requires commerce_payment module

Requirements

• Drupal ^10 || ^11
• Commerce Payment module

Installation

1. Download and place the module in /modules/custom/ec_payment_widget
2. Enable the module: drush en ec_payment_widget

Configuration

No additional configuration needed. The module automatically:

• Detects active payment gateways
• Retrieves "Payment Instructions" from gateway configuration (e.g., admin/commerce/config/payment-gateways/manage/manual)
• Displays instructions below each payment method option during checkout

Theming

Override the template in your theme for custom styling:

your_theme/templates/form-element--radio--payment-method.html.twig

Default CSS classes:

• .payment-method-item - Container
• .payment-method-label - Label text
• .payment-method-description - Instructions text

How It Works

1. Alters commerce_checkout_flow forms
2. Injects payment gateway instructions as field descriptions
3. Provides a theme suggestion for payment method radio buttons
4. Applies minimal styling for consistent presentation

License

This project is licensed under the GPL-2.0+.

Author

Pavel Kasianov.

Linkedin: https://www.linkedin.com/in/pkasianov/
Drupal org: https://www.drupal.org/u/pkasianov

Support

For issues or feature requests, please contact the module maintainer.