I am currently developing a custom Woomerce payment gateway that receives credit card details via an inline popup. The gateway expects the user to click a button, then the popup loads and the user can enter his card details.

It all works fine, but the user experience flow isn't as expected because the user has to click two buttons one after the other, to checkout.

What I have done: After choosing the gateway, the user clicks a button which loads the inline popup, enters payment details and if authorized, the javascript callback sends a transaction reference as a hidden field, which is submitted when the user clicks "place order". This works well but it is not intuitive or UX-friendly to click two buttons. An unsuspecting user might click the "Place Order" button first, which triggers errors since the payment process isn't yet done.

What I want to achieve: User simply clicks "Place order", and BEFORE the order is processed, it runs the gateway JavaScript function, loads the secure inline popup as usual, and after authorization I can call-back the normal flow of the Place order button.

What I have considered: Making custom copies of the checkout form and scripts and placing in the theme. But the payment gateway script is a plugin and should be independent of the theme.

P.S. I posted this on WordPress Stack xchange earlier but I can't get any attention there.

I am currently developing a custom Woomerce payment gateway that receives credit card details via an inline popup. The gateway expects the user to click a button, then the popup loads and the user can enter his card details.

It all works fine, but the user experience flow isn't as expected because the user has to click two buttons one after the other, to checkout.

What I have done: After choosing the gateway, the user clicks a button which loads the inline popup, enters payment details and if authorized, the javascript callback sends a transaction reference as a hidden field, which is submitted when the user clicks "place order". This works well but it is not intuitive or UX-friendly to click two buttons. An unsuspecting user might click the "Place Order" button first, which triggers errors since the payment process isn't yet done.

What I want to achieve: User simply clicks "Place order", and BEFORE the order is processed, it runs the gateway JavaScript function, loads the secure inline popup as usual, and after authorization I can call-back the normal flow of the Place order button.

What I have considered: Making custom copies of the checkout form and scripts and placing in the theme. But the payment gateway script is a plugin and should be independent of the theme.

P.S. I posted this on WordPress Stack xchange earlier but I can't get any attention there.

• javascript
• wordpress
• woomerce
• payment-gateway

• You could add something like $("form.woomerce-checkout").on('submit', function(){ return gateway(...)} ). – Kenney Commented Dec 5, 2015 at 22:02
• Is the sandbox you've posted with or without your code? It appears to be without it, but a sample with your code might be a bit more useful – Rob ♦ Commented Dec 5, 2015 at 22:34
• @Kenney: The problem with that is that I need to pass the result from the gateway (in javascript) back to the "normal flow" of the woomerce order process (php). I feel there might be some woomerce hook or something that I don't know about. – Cogicero Commented Dec 5, 2015 at 22:42
• @Rob: It is a whole lot of code in multiple files (that's how a wp plugin usually is) so I don't know what is relevant to post. I was thinking maybe from testing out the sandbox maybe you could see my problem, and I could get some pointers that I could follow up in the documentation? – Cogicero Commented Dec 5, 2015 at 22:42
• That's what that line of code does: you inject a JS into the page that adds a Javascript hook to the submitting of the place order form, that "runs the gateway javascript function,", and updates the form with the result. It then returns true to have the form submitted, false if not. The normal flow is: you place the order, are redirected to the PSP, pay or cancel, get redirected back to shop page. – Kenney Commented Dec 5, 2015 at 22:46

1 Answer 1

Here's the entire JavaScript you need to inject into the page:

jQuery( function($) {     
  $("form.woomerce-checkout")
  .on('submit', function() { return gatewayFunction( this ); } ); 
} );

The outer jQuery( function($) { and } ); make sure that the code in between only gets run when the HTML document is loaded (that way the the <form> will exist by the time that code will run), and makes jQuery available as $ in between.

The return gatewayFunction( this ) passes the <form> to the function, so it can use it's values and add or update a hidden payment token field, so you'll need to add that parameter to the gatewayFunction:

function gatewayFunction( form ) {
  ...
  return is_payment_plete;
}