title: Javascript override for “Place Order button” using custom Woocommerce payment gateway
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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>
  
  <p>P.S. I posted this on WordPress Stack xchange earlier but I can't get any attention there.</p>