Donation form broken - Can't switch back to credit card after selecting checking account

There seems to be an issue with the buttons not accurately checking the radio buttons that they're supposed to represent. What I've done in the past is add a script inside of an html caption at the bottom of the form. The script finds each button in the payment container and adds a click event listener. When the click is registered, the event listener calls a function to find the corresponding radio button and mark it as checked.

@Nicholas Birbilis ,

The issue is a common occurrence on donation pages when the wrapper inserts a new version of jQuery and does not rely on the one provided by Luminate (v.1.6). The root cause is the combination of HTML markup that is less than ideal (<label><a></a></label>) and the jQuery versions. When a user clicks on a label, they are actually clicking on a link, which does not produce any results.

On your donation page, the newer jQuery is inserted, thus causing this same issue. We found that the best solution is to update HTML with JavaScript to remove the link and let the labels do the toggling.

Here's a function that use on donation forms on page load that achieve this and prevents issues.

Hope this helps

/**
* Fixes the payment methods toggle, as higher versions of jQuery breaks
* Luminate default functionality
* @param {jQuery Object} $form donation form object
* @return {jQuery Object} donation form object
*/

function fixPaymentMethodToggle($form) {
var $labels;
var $paymentOptions = $form.find('.payment-type-option');

// assign values to variables
$labels = $paymentOptions.find('label');

// remove inner link from within the label, so it doesn't block the default JS firing
$labels.each(function (index, element) {
var $label = $(element);
var $link = $label.find('a');

$label.html($link.html());
});

return $form;
}