Issues With Pop-Up Blocking (this shouldn't be

2019-07-21 11:30发布

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:

  1. User selects "new card" as payment method and enter's the recipient's shipping address
  2. User clicks "Place Order," which uses an AJAX call to validate the address, and IF valid, syncs it with the database.
  3. 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);

                                },

0条回答
登录 后发表回答