Мобильный браузер Paypal для адаптивных платежей (Safari & Chrome на iPhone)

Question

Я реализовал встроенную функцию адаптивной оплаты с мини-браузером, которая отлично работает на телефонах Android, но имеет проблемы с браузерами iPhone (Safari & Chrome)

В Safari:- Пользователь должен вручную закрыть всплывающее окно PayPal, при этом оно должно было закрыться автоматически. (После закрытия всплывающего окна вручную запускается функция обратного вызова JavaScript, которую я использую для обновления заказа)

В Chrome:- Когда пользователь нажимает кнопку "Оплатить", чтобы открыть мини-браузер авторизации Paypal, но после успешной оплаты ИЛИ отмены платежа, он не закрывает всплывающее окно автоматически и даже не вызывает обратный вызов при закрытии вручную.

Я использую следующий код

<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>

Answer 1

Это должно решить проблемы всех разных разновидностей, когда дело доходит до проблем с PayPal Adaptive Payments и проблем с:

1. По умолчанию перенаправленная страница PayPal НЕ отвечает на запросы мобильных устройств и выглядит ужасно на мобильных устройствах.
2. Лайтбокс "зависает" и не закрывается на некоторых мобильных устройствах.
3. Мини-браузер не закрывается после завершения платежа или отмены.
4. Мини-браузер не перенаправляет на callBackFunction из скрипта paypal apdg.js.
5. Не перенаправлять на returnUrl и cancelUrl после завершения платежа (или при отмене)
6. Chrome для ios (iphones) не запускает функцию обратного вызова, поэтому после завершения или отмены платежа он просто удерживает вас на странице, на которой вы запустили страницу оплаты PayPal, с которой вы не можете подтвердить успешность или неудачу платежа (это проблема Vinod's вопрос выше говорит о).

Это заменяет любые потребности в файлах JavaScript PayPal и т. Д. Все, что вам нужно, это то, что ниже, вместе с вашим собственным методом получения PayKey для добавления в URL перенаправления. Мой действующий веб-сайт с корректно работающими адаптивными платежами с использованием приведенного ниже кода - 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>