First to clarify, I am trying to open a pop-up in response to a user event.
I am developing an application on Facebook that involves e-commerce transactions, and for reasons related to my EV SSL certificates, I have to open our billing terminal in a new, fully-secure window. As such, the process goes as follows:
- User selects "new card" as payment method and enter's the recipient's shipping address
- User clicks "Place Order," which uses an AJAX call to validate the address, and IF valid, syncs it with the database.
- IF address is valid (AJAX success: function()), and the user selected "new card," then the secure billing terminal is supposed to open using a window.open call.
As I understand it, most modern browsers including Chrome, Firefox, and Safari are supposed to traverse up the chain to determine if the source event was user-initiated (in this case, it was--a click event), however despite this I cannot seem to prevent this pop-up from getting blocked and my users are having a great deal of trouble figuring out what's going on.
Unfortunately Chrome doesn't make it all that noticeable when a pop-up is blocked, so most users will not notice this and will assume that the app is simply "broken."
Any ideas? We're a week from launch and I'm getting desperate...
[EDIT] Here is the code for reference:
/* -- Step 3: Complete Checkout Click -- */
$('div.finishGroupOrder').live('click', function() {
/* User is Click-Happy? */
if ( $('div#billing-contents div#loader').length ) {
alert('Your order is processing. We know it\'s hard, but please be patient.');
return false;
}
var paymentMethod = $('input[name="method"]:checked').val(); // Payment Method Selected ( Card on File / New / PayPal )
var secureSession = $(this).attr('secure'); // Secure Session ID
var orderData = { addressSelection: $('input[name="address"]:checked').val(),
price: $('div.price').attr('value') };
/* Form Validation */
switch( orderData.addressSelection ) {
case 'new': // User chose to enter address manually
var allInputs = $('div#new-address').find('input:not(#address2), select');
var validInputs = $('div#new-address').find('input[value!=""]:not(#address2), select[value!=""]');
if ( allInputs.length === validInputs.length ) { // All inputs are valid, capture their contents
allInputs.removeClass('bad-value');
var address = { phone: $('input#phone').val(),
address1: $('input#address1').val(),
address2: $('input#address2').val(),
city: $('input#city').val(),
state: $('select#state').val(),
zip: $('input#zipcode').val() };
var validatedAddress = validation.validateAddress(address);
if (validatedAddress) {
address.address1 = validatedAddress.address1;
address.address2 = validatedAddress.address2;
address.city = validatedAddress.city;
address.state = validatedAddress.state;
address.timeOffset = validatedAddress.timeOffset; // Time offset from EST (PST = -3, EST = 0, etc.)
$('input#timezone').val(address.timeOffset);
} else {
allInputs.addClass('bad-value');
return false;
}
} else { // Some inputs are invalid, prompt the user to fix them
allInputs.filter(function() { return ($.inArray( this, validInputs ) > -1) ? false : true; }).addClass('bad-value');
return false;
}
break;
case 'verified': // User chose to ship to verified address
var address = { address1: 'verified' };
break;
default:
alert('Please choose an address where you want the flowers to be delivered.');
return false;
break;
}
/* Sync Order With Updated Address Information */
$.ajax({ type: 'POST',
url: location.protocol + '//' + location.host + '/_ajax/order.ajax.php',
data: 'action=update_order&' + $.param( address ),
success: function() {
/* Load Selected Payment Method */
switch( paymentMethod ) {
//case 'paypal': paypal(); break;
case 'member':
newGroupOrderDialogActions.payAsMember();
break;
case 'newCard':
newGroupOrderDialogActions.payWithCard( secureSession );
//$('div.group-secure-terminal').trigger('click');
break;
}
}
});
And the newGroupOrderActions.payWithCard()...
/* -- Pay With a New Credit Card -- */
payWithCard: function( session ) {
var windowHeight = 769; // Terminal Height
var windowWidth = 638; // Terminal Width
var w = screen.availWidth; // Available Screen (W)
var h = screen.availHeight; // Available Screen (H)
var top = (h-windowHeight)/2; // Center Positioning
var left = (w-windowWidth)/2; // Center Positioning
/* Open Secure Order Terminal */
var secureTerminal = window.open('https://secure.mydomain.ly/contribute?id=' + session, 'myCompany: Secure Checkout', 'menubar=0,toolbar=0,location=1,resizable=0,scrollbars=1,height='+windowHeight+',width='+windowWidth+',top='+top+',left='+left);
/* Check for Secure Order Terminal Close Event */
var onFinish = setInterval(function() {
try {
if (secureTerminal.closed) { // Window has been unloaded, check the order to see if it has been approved
clearTimeout(onFinish);
$.ajax({ type: 'POST',
url: location.protocol + '//' + location.host + '/_ajax/redirect.ajax.php',
data: 'action=group_order_status_redirect',
success: function(redirect) { newGroupOrderDialogActions.publishOrder( redirect ) } // If redirect is not null, order was successful. Redirect to order page
});
}
} catch (e) {}
}, 200);
},
