Clickable area too large for payment modules on checkout_payment

[sbbemn]

On the checkout_payment page, the payment modules are clickable for the entire radio box and text area. Is there a way to only have the radio box be selectable/clickable?

The problem is we have customers choose credit card, then want to scroll down to the Continue button - to do this, they click to the right and bottom of screen which is picking up another payment option (check/money order) and they complete the order... then get upset that we ask for money before shipping.

[DrByte]

Are you saying that you want desktop users to have to only be able to choose a payment by finding and clicking that tiny little radio button with their mouse else they'll get an error because they didn't choose a payment choice?

Sounds like yours is a mobile-specific issue.

Assuming you're using the built-in template code for checkout, the reason that the text is usable for making a selection, is because the template is using proper HTML markup for radio buttons by associating the <label> with the <input> element. This makes navigation less painful for shoppers.
If you're having problems with that in mobile mode, then I encourage you to look at considering why customers are frequently even needing to click on things that are causing problems. Is a different layout better? Is the font size wrong? Too many choices on the page causing excessive scrolling requirements?

I suppose you could bandage it by either breaking the HTML so that desktop users are handicapped, or you could use javascript to rewrite the HTML on mobiles to change the <label>s to <span>s instead so the text has no clickability, and then fix whatever layout problems that causes.

[sbbemn]

No mobile at all, stock template. 1.5.1

The label and span are clickable too. I could live with the radio + label only - you do have a good point there. Can I disable the span elements from being clickable?

[DrByte]

Dunno which spans you're talking about. The payment modules only generate <label> and <input> stuff.

[sbbemn]

To clarify - stock template with a modified check/moneyorder module renamed "Other Pay Options". I basically summed up all pay options checks/purchase order/western union etc to one selection.
See the span of "other pay options" is clickable for the entire area all the way over.
Would like to only have the radio and label clickable to avoid accidental clicks.

[stevesh]

I guess we'd have to see your code including the span. On my stock Zencart test site, with Paypal and Check/Money Order installed, only the button and label are clickable. The <span> element isn't used on that section.

[sbbemn]

I see. Looks like I may need to adjust the use of this code as it's found INSIDE the label... I had to edit this as the forum code tags were not showing proper results using [PHP]

define('MODULE_PAYMENT_MONEYORDER_TEXT_TITLE', 'Other Pay Options <span style="font-size:10px; font-family: Arial, Verdana;">(read details <a href="/index.php?main_page=paymentinfo" target="_blank"><font color="blue"><u>here</u></font></a>)<ul><li>Gift Certificate | Money Order | Western Union</li><li>USA Only: Personal Check | Purchase Order</li></ul></span>');

SOLVED with the use of onclick="return false;"
Would come in handy for anyone out there looking to add text to the payment modules on the checkout payment page.

define('MODULE_PAYMENT_MONEYORDER_TEXT_TITLE', 'Other Pay Options <span style="font-size:10px; font-family: Arial, Verdana;">(read details <a href="/index.php?main_page=paymentinfo" target="_blank"><font color="blue"><u>here</u></font></a>)</span><span onclick="return false;" style="font-size:10px; font-family: Arial, Verdana;"><ul><li>Gift Certificate | Money Order | Western Union</li><li>USA Only: Personal Check | Purchase Order</li></ul></span>');