Home Forums Event Espresso Premium New Payment Method – Hook Into "Proceed to Finalize Registration" Call

New Payment Method – Hook Into "Proceed to Finalize Registration" Call

Posted: September 22, 2020 at 10:12 am


September 22, 2020 at 10:12 am

Hi All,

I’m developing a new payment method for Secure Submit, and with Secure Submit, I need to be able to intercept the ‘ee-spco-payment_options-reg-step-form’ form submit event and make a call to the Secure Submit API to get a token that needs to be posted with the form.

Unfortunately, the form does not follow a normal submit() process (uses AJAX instead). Is there a way I can run a javascript function before the AJAX POST request is sent with the main registration form?

The secure submit js used is:

// add event handler for form submission
$(this).submit(function (e) {

var theForm, data, i, cardType;

// stop form from submitting

It then makes a token request, gets the token, places it as a hidden input in the form, and then submits the form. How do I do this with my payment method? submit() is never called on the form due to the way it’s working via an AJAX call.

I need a way to run a function that completes before submitting the ajax registration call.


September 22, 2020 at 12:51 pm

Well, I figured out a tricky work-around.

The new payment method appears to be working… Source is here:


  • Support Staff

September 23, 2020 at 4:32 am

Hi there,

What you are trying to do above sounds a little similar to how the Stripe payment method worked and it would simply hide the Finalize button when the Stripe payment method was selected and trigger a click on that element when it was done processing.

Your license has access to that add-on so I’d recommend taking a look in eea-stripe-gateway\scripts\espresso_stripe_onsite.js to see how it handles this.

Thank you for sharing your payment method and whilst you haven’t asked for feedback I did some quick testing with your payment method so I’ll add my notes here should you wish to take them on board.

When you initially activate the payment method it will break any registrations attempting to take place on the site as there will be no public key set, so THIS breaks check out completely. That might not seem like an issue but we’ve seen in the past that people will activate payment methods, realize they don’t have credentials and go off to find them meaning during that time registrations are blocked on their site with your PM. The text displayed doesn’t give any indication that it is from the payment method and the registrant wouldn’t be able to change it either way. Right now it will kill the stript on the attendee information step, like this:

All I’ve done there is select some tickets after the PM was activated. So I recommend switching that out to simply display a message in the payment form when someone selects the payment method.

A bigger issue is that your JS still runs after the user has selected a different payment method if they’ve selected yours at all. So say you have this payment method and Invoice enabled, on the payment options select this PM and select Invoice, once Invoice has loaded click to Finalize:

You JS is still running and prevents me from finalizing. If you take the same path the Stripe payment method uses you’ll see how we prevent that within the add-on.

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 1 month ago ago

Topic Tags


This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/new-payment-method-hook-into-proceed-to-finalize-registration-call/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Phone</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>