Custom checkout button markup can cause a JS error when clicked.

[cklosowski]

Bug Report

Expected behavior

When I customize my checkout button, I expect it to work still when clicked.

Actual behavior

Due to these changes in the edd-ajax.js file https://github.com/easydigitaldownloads/easy-digital-downloads/blob/master/assets/js/edd-ajax.js#L402-L405, a customized checkout button will not have the attribute, and therefore possibly fail.

Steps to reproduce the behavior

1. Customize your checkout button markup.
2. Try and checkout.

Information (if a specific version is affected):

PHP Version: All

EDD Version (or branch): 2.11

WordPress Version: All

Any other relevant information:

[cklosowski]

So this issue was caused by the edd-ajax.js file now requiring that the checkout button has an ID attribute of edd-purchase-button. That has never been required prior to this. The default button has had the ID since 2012, so it's pretty safe to assume it's there, but if anyone else sees this, the fix is to add the id="edd-purchase-button" attribute to your custom checkout button.

[cklosowski]

Some feedback:

Based on the JS in edd-ajax.js, it shouldn't even be necessary to set the
submit button to a variable since it should already be accessible via
'this'.

Simply making this change *should* enable the new button behavior without
breaking existing custom buttons that lack id attributes.

[cklosowski]

going to re-open to see if this is something we can take as an approach for backwards compatibility and to reduce that technical debit of specific attributes here.

[ashleyfae]

I don't think this change requires a specific ID, it just requires any ID.

But the feedback should be correct. I think we should be able to remove this line completely: https://github.com/easydigitaldownloads/easy-digital-downloads/blob/master/assets/js/edd-ajax.js#L402

and change this line to:

$(this).attr('data-original-value', complete_purchase_val);

[cklosowski]

Steps to replicate:

1. Add this to an mu plugin:

function ck_custom_purchase_button( $button_markup ) {
	$button_markup = '<input type="submit" class="edd-submit green button" name="edd-purchase" value="Complete Checkout"/>';
	return $button_markup;
}
add_filter( 'edd_checkout_button_purchase', 'ck_custom_purchase_button', 9999, 1 );

2. Go to the checkout and see the green button
3. Attempt to checkout with Stripe.