First, to clarify, I try to open a popup in response to a user event.
I am developing a Facebook application that includes e-commerce transactions, and for reasons related to my EV SSL certificates, I have to open our payment terminal in a new, fully protected window. Thus, the process is as follows:
- The user selects the "new card" as a payment method and enters the recipient's shipping address.
- The user clicks "Place an order", which uses an AJAX call to verify the address and IF, which is synchronized with the database.
- The IF address is valid (AJAX success: function ()), and the user selects the "new card", then the secure payment terminal must be opened by calling window.open.
As I understand it, most modern browsers, including Chrome, Firefox, and Safari, have to go through a chain to determine if a user-initiated source event was triggered (in this case, it was a click event), but despite this, I can’t prevent this pop-up the window is locked, and my users have a lot of problems figuring out what is happening.
Unfortunately, Chrome does not make all this noticeable when the pop-up window is blocked, so most users will not notice this and assume that the application is simply “broken”.
Any ideas? We have been a week since launch, and I am 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\ 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 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); },