Paypal In-Context 父页面未重定向

Question

我有同样的问题as this question，但他的实现不同。

Paypal 按钮实现

我之所以这样实现它是因为我们需要将paypal button 作为link。所以我创建了类似<a ng-click="vm.generatePaypalButtonAndClick()"></a> 的东西来破解它。只需忽略参数，因为这只是一个示例。

function generatePaypalButtonAndClick(data, vm) {
    var originUrl = window.location.origin; // to get 'https://localhost:3000' or 'https://pp.website.com'

    // create hidden form element
    // production - https://www.paypal.com/cgi-bin/webscr
    var paypalForm = angular.element('<form action="https://www.sandbox.paypal.com/cgi-bin/webscr"' +
        'method="post" target="_top" id="paypal-payment-form"></form>');
    angular.element(document.body).append(paypalForm);

    // append elements inside the form
    angular.element('#paypal-payment-form').append('<input type="hidden" name="upload" value="1">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="USER" value="xxxxxxxxxxx.gmail.com">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="PWD" value="xxxxxxxxxx">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="SIGNATURE" value="xxxxxxxxxxxxxxxxxxxxxxxxxx">');

    angular.element('#paypal-payment-form').append('<input type="hidden" name="cmd" value="_cart">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="business" value="devlinpajaron-merchant@gmail.com">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="lc" value="US">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="return" value="' + originUrl + vm.returnUrl + '">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="cancel_return" value="' + originUrl + vm.cancelUrl + '">');

    // loop through all data returned
    _(data).forEach(function(value, key) {
        var idx = key + 1;
        angular.element('#paypal-payment-form').append('<input type="hidden" name="item_name_' + idx + '" value="' + value.itemName + '">');
        angular.element('#paypal-payment-form').append('<input type="hidden" name="item_number_' + idx + '" value="' + value.quantity + '">');
        angular.element('#paypal-payment-form').append('<input type="hidden" name="amount_' + idx + '" value="' + value.amount +'">');
    });

    angular.element('#paypal-payment-form').append('<input type="hidden" name="custom" value="xxxxxxxxxxxxx">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="currency_code" value="USD">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="no_note" value="1">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="no_shipping" value="1">');
    angular.element('#paypal-payment-form').append('<input type="hidden" name="rm" value="2">');

    // let paypal create the button
    window.paypalCheckoutReady = function() {
        paypal.checkout.setup('xxxxxxxxxxxxxxxxxx', {
            environment: 'sandbox', // sandbox/production
            container: 'paypal-payment-form'
        });
    };

    // trigger click
    $timeout(function() {
        var paypalFormToClick = document.getElementsByClassName('paypal-button-content');
        angular.element('.paypal-button-content').click();

    }, 1000);

    // remove form
    $timeout(function() {
        angular.element('#paypal-payment-form').remove();
    }, 1000);
}

付款完成后，我希望父页面将被重定向到vm.returnUrl中设置的url（比如说http://localhost:3000/payments/paid）。

付款后会发生什么，pop-up paypal 页面被重定向然后关闭。父页面保持原样。

我已尝试将脚本添加到应重定向用户的页面，如this answer 中所述

<script>
    top.window.opener.location = 'http://localhost:3000/payments/paid';
    // if you want to close the window
    window.close();
</script>

但它不起作用。弹出窗口关闭时我也会收到一堆错误：

checkout.js:9315 ppxo_xc_ppcheckout_unexpected_listener_init 
checkout.js:9315 ppxo_xc_ppcheckout_error
checkout.js:9315 ppxo_paypal_legacy_error 
      "Error: Unexpected init message from domain http://localhost:3000 --     expected message from https://www.sandbox.paypal.com
checkout.js:9315 ppxo_paypal_legacy_error_handler 
      "Error: Unexpected init message from domain http://localhost:3000 -- expected message from https://www.sandbox.paypal.com
checkout.js:3919 
      Uncaught Error: Unexpected init message from domain http://localhost:3000 -- expected message from https://www.sandbox.paypal.com

我已经在 paypal 设置中将Auto Redirect 设置为On。

请随意说明需要哪些额外数据。

Answer 1

我只是做了一个破解来绕过这个，但它很脏。我在路由文件中添加了一个脚本。

resolve: {
    // script for redirecting parent page after success payment
    test: [function () {
            var originUrl = window.location.origin;
            if (window.opener) { // check if opened in popup
                window.close();
                window.opener.location = originUrl + '/payments/paid';
            }
        },
    ],
},

弹出窗口仍将打开/payments/paid 页面，然后在关闭后重定向父页面。