Javascript override for “Place Order button” using custom Woocommerce payment gateway

I am currently developing a custom Woocommerce 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.

Sandbox details: http://ift.tt/1OaoZ9M

You can checkout with any test email.

Test card: 4123 4501 3100 1381
Any valid date beyond this month
CVV = 883

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.

Thanks

P.S. I posted this on wordpress stackexchange earlier but I can't get any attention there and I'm on a tight deadline.

via Chebli Mohamed