0

I've implemented the embedded adaptive payment with mini browser option, which is working fine on Android phones but having problems with iPhone browsers (Safari & Chrome)

On Safari:- User has to manually close the PayPal popup, while it should have closed automatically. (After closing the popup manually it triggers the JavaScript callback function which I am using to update the order)

On Chrome:- When user clicks on Pay button to open Paypal authorization mini browser, but after successful payment OR cancelling the payment, it doesn't auto closes the popup and not even triggering the callback on manual close.

I am using the following code

<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame">
<input id="type" type="hidden" name="expType" value="mini">
<input id="paykey" type="hidden" name="paykey" value="AP-XXXXXXXXXXX"> 
<input type="submit" id="PPsubmitBtn" value="Pay">
</form>
<script src="https://www.paypalobjects.com/js/external/apdg.js"></script>
<script>
var dgFlowMini = new PAYPAL.apps.DGFlowMini({trigger: 'PPsubmitBtn', callbackFunction: 'updateOrder'});

function updateOrder() {
     //My order stuff update code goes here
}
</script>
Murf
  • 487
  • 5
  • 9
Vinod K
  • 148
  • 2
  • 16
  • Today (6 Jan, 2017), I tested it again on iOS 10.1.1 (14B100) - Safari & Chrome, both were working fine. – Vinod K Jan 06 '17 at 06:34
  • Hi Vinod, I am using exactly the same code. When I click "Pay" button, I see a popup, however nothing is loaded in that popup. I am expecting to see PayPal "Login" screen. I have noticed that, URL section in popup is "about:blank". Can you please direct me towards any potential root cause of this behavior? Thanks. – NetDemo Nov 21 '17 at 12:08

1 Answers1

1

This should solve everyone's problems of all different varieties when it comes to issues with PayPal Adaptive Payments and the issues with:

  1. The default redirected paypal page is NOT mobile responsive and looks horrible on mobile devices.
  2. The lightbox gets "hung up" and does not close on some mobile devices.
  3. The mini browser doesn't close after completing payment or cancelling.
  4. The mini browser doesn't redirect to the callBackFunction from paypal apdg.js script.
  5. Not redirecting to returnUrl and cancelUrl after payment completion (or when cancelling)
  6. Chrome for ios (iphones) doesn't initiate the callbackfunction and therefore after payment completion or cancellation, it just keeps you at the page you launched the paypal payment page from which prevents you from validating success or failure of payment (this is the problem Vinod's question above talks about).

This replaces any need for PayPal javascript files etc. All you need is what is below along with your own method of obtaining the PayKey to add to the redirect url. My live website, with adaptive payments working correctly using below code, is https://www.trackabill.com.

<div>
    <?php $payUrl = 'https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=mini&paykey=' . $payKey ?>

    <button onclick="loadPayPalPage('<?php echo $payUrl; ?>')" title="Pay online with PayPal">PayPal</button>
</div>
<script>
    function loadPayPalPage(paypalURL)
    {
        var ua = navigator.userAgent;
        var pollingInterval = 0;
        var win;
        // mobile device
        if (ua.match(/iPhone|iPod|Android|Blackberry.*WebKit/i)) {
            //VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
                //See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
            win = window.open(paypalURL,'_blank');

            pollingInterval = setInterval(function() {
                if (win && win.closed) {
                    clearInterval(pollingInterval);
                    returnFromPayPal();
                }
            } , 1000);
        }
        else
        {
            //Desktop device
            var width = 400,
                height = 550,
                left,
                top;

            if (window.outerWidth) {
                left = Math.round((window.outerWidth - width) / 2) + window.screenX;
                top = Math.round((window.outerHeight - height) / 2) + window.screenY;
            } else if (window.screen.width) {
                left = Math.round((window.screen.width - width) / 2);
                top = Math.round((window.screen.height - height) / 2);
            }

            //VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
                //See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
            win = window.open(paypalURL,'_blank','top=' + top + ', left=' + left + ', width=' + width + ', height=' + height + ', location=0, status=0, toolbar=0, menubar=0, resizable=0, scrollbars=1');

            pollingInterval = setInterval(function() {
                if (win && win.closed) {
                    clearInterval(pollingInterval);
                    returnFromPayPal();
                }
            } , 1000);
        }
    }

    var returnFromPayPal = function()
    {
       location.replace("www.yourdomain.com/paypalStatusCheck.php");
        // Here you would need to pass on the payKey to your server side handle (use session variable) to call the PaymentDetails API to make sure Payment has been successful
        // based on the payment status- redirect to your success or cancel/failed page
    }
</script>
Murf
  • 487
  • 5
  • 9