Search code examples
angularjspaypalexpress-checkout

Paypal In-Context Parent page not redirecting

I have the same problem as this question but his implementation is different.

Paypal Button Implementation

The reason I implemented it like this because we need to have the paypal button as a link. So I created something like <a ng-click="vm.generatePaypalButtonAndClick()"></a> to hack this. Just ignore the params as this is just an example.

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="[email protected]">');
    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);
}

After the payment is done, I'm expecting that the parent page will be redirected to the url set in vm.returnUrl (let's say http://localhost:3000/payments/paid).

What happens is after the payment, the pop-up paypal page is redirected then closes. The parent page is kept as is.

I've tried adding a script to the page where user should be redirected as stated in this answer 

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

But it doesn't work. I also get a bunch of errors when the pop up closes:

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

I already set Auto Redirect to On in the paypal settings.

Feel free to state what additional data is needed.

Solution

  • I just did a hack to bypass this but it is dirty. I added a script to my route file.

    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';
            }
        },
    ],
},

    The pop-up window will still open the /payments/paid page then redirect the parent page once it closes.