Make Ajax Call Wait Until Response

I have a legacy script for a client that I'm trying to get their original authorize.net coding to work with the new acceptJS coding format.

The following code makes a call out to a credit card processing service (authorize.net).  When it returns with validated info, it pops up a dialog box that the person then responds to in order to finalize the processing.

When it makes the call to authorize.net, a token is returned. But because JavaScript is running in asyncronos mode, if the person is on a slow internet connection, the box pops up before a reply has been received from authorize.net.

What I need to have this do is to postpone the processing of the popup dialog until I get a valid answer of either "Error" or "Ok" from authnet. Anything else should wait for that reply.

In the script below, the call to auth.net is made on line 23:  var resp = sendPay2Auth(apiLoginID, clientID, extr);

On the next line it then looks for the value of resp.respcd.  If it says, "Error" it returns false and thus the dialog box does not pop up.

If it returns "Ok" it pops up the dialog box for them to continue.

But the problem is if the call to authorize.net has sent back a response yet, it gives a value of "undefined" in which case it then just does nothing at this point. Which leaves the customer hanging.

So what I'm looking for is how to code this so that the script will just "wait" until it gets back either an "Ok" or and "Error" in the field designated as "resp.respcd"   Any insight would be appreciated.  Thanks.

<script language="javascript">
  var accpeted = false;
  var currency = "$"; 
  var decimals = 0; /** echo with php here **/

$(document).ready(function() {

		// this is the pop-up box that asks for confirmation  CONFOPOP
		// To DEBUG, run on the console logs
		$('#eventPay').submit(function(e) {
			// console.log('At button press');
			if(accpeted == false) {
				e.preventDefault();
				var type = $('[name="method"]:checked').val();
				var amt = $('.due').eq(1).text();
				var ccnum = $('[name="cardNumber"]').val().substr($('[name="cardNumber"]').val().length - 4);
				var acptJS = $('[name="acceptJS"]').val();
				// console.log('At INLINE acceptJSPayButton');
				e.preventDefault();
				var clientID = 'hidden';
				var apiLoginID  = 'hidden';
				var extr = 'zp';
				var resp = sendPay2Auth(apiLoginID, clientID, extr);
				if (resp.respcd === 'Error') return false;
				else if (resp.respcd === 'Ok') {
				     if (ccnum > 0) var payPhrase = 'Your Credit Card ending in ' + ccnum + ' is about to be charged ' + amt;
				     else return false; 
				} // 
				
				var dialogbox = $('<div></div>').html(payPhrase + '.  If you agree to this, click the Ok button or select cancel to exit.');

				//console.log(dialogbox);
				
				dialogbox.dialog({
					buttons: [
						{
							text: "Ok",
							click: function() { 
								accpeted = true;
								$('#eventPay').submit(); 
								$(this).dialog("close"); 
							}
						},{
							text: "Cancel",
							click: function() { 
								accpeted = false; 
								$(this).dialog("close"); 
							}
						}
					]
				});
			}
		});
		

});
</script>

Select allOpen in new window