Paypal Adaptive payment for mobile web

Question

Im integrating Paypal Adaptive Payment API for a mobile website. But when Im submitting payment to

https://www.paypal.com/webscr?cmd=_ap-payment&paykey=value

Answer 1

The best approach I found was mini browser experience. But I had a variety of different issues on mobile devices implementing it (which is what it was meant for in the first place). You will see many similar questions about adaptive payments and all sorts of issues with using lightbox and mini browser experience.

But FINALLY... I have figured it out after hours upon hours, days upon days! 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.

Drum roll please.... here it is!! 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>

Answer 2

There is actually a simple solution to this that isn't documented anywhere. We were in discussion with PayPal about adding it a while back so I am wondering if it eventually got implemented.

Anyway, simply just redirect the user to the following URL and they will be redirected back to your site on completion:

https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapproval?preapprovalKey=PA-XXXXX&expType=redirect

The difference here is using expType=redirect rather that expType=mini. I'm not sure when this was added but after a bit of reverse engineering and some experimenting we have a surprisingly simple solution.

Answer 3

that's right - the Adaptive Payments UI is not Mobile optimized. But the closest to that it offers is what we call the MiniBrowser experience. You can try and see if that serves your needs. You can find the how-to guide here on X.com: Implementing the Mini-Browser Option

Answer 4

Try redirecting your site to

https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay?paykey=AP-XYZ&expType=mini

Fill your pay key in place of AP-XYZ

Let me know if it works.