Bug with PayPal API context checkout

Question

I have a problem with PayPal Express Checkout integration : https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings/#color

If I close the pop-up before it loads completely, the pop-up won't show up anymore until I refresh!

This does occur on all browsers. The error on Chrome console is:

ppxo_paypal_legacy_gettoken_initxo Object
print @ logger.js:65

Here is my code :

window.paypalCheckoutReady = function() {
            paypal.checkout.setup("{$PayPal_in_context_checkout_merchant_id}", {
                environment: {if $PAYPAL_SANDBOX}"sandbox"{else}"production"{/if},
                click: function(event) {
                    event.preventDefault();

                    paypal.checkout.initXO();
                    updateFormDatas();
                    var str = '';
                    if($('.paypal_payment_form input[name="id_product"]').length > 0)
                        str += '&id_product='+$('.paypal_payment_form input[name="id_product"]').val();
                    if($('.paypal_payment_form input[name="quantity"]').length > 0)
                        str += '&quantity='+$('.paypal_payment_form input[name="quantity"]').val();
                    if($('.paypal_payment_form input[name="id_p_attr"]').length > 0)
                        str += '&id_p_attr='+$('.paypal_payment_form input[name="id_p_attr"]').val();

                    $.support.cors = true;
                    $.ajax({
                        url: "{$base_dir_ssl}modules/paypal/express_checkout/payment.php",
                        type: "GET",
                        data: '&ajax=1&onlytoken=1&express_checkout='+$('input[name="express_checkout"]').val()+'&current_shop_url='+$('input[name="current_shop_url"]').val()+'&bn='+$('input[name="bn"]').val()+str,   
                        async: true,
                        crossDomain: true,


                        success: function (token) {
                            var url = paypal.checkout.urlPrefix +token;

                            paypal.checkout.startFlow(url);
                        },
                        error: function (responseData, textStatus, errorThrown) {
                            alert("Error in ajax post"+responseData.statusText);

                            paypal.checkout.closeFlow();
                        }
                    });
                },

                buttons: [
  {
    container: 'paypal_process_payment',
    type: 'checkout',
    color: 'blue',
    size: 'small',
    shape: 'pill'
  },
  {
    container: 'payment_paypal_express_checkout',
    type: 'checkout',
    color: 'gold',
    size: 'small',
    shape: 'pill'
  }
]
            });
        };

Answer 1

I ran into the same issue,

After looking into the source code, it turns out that when paypal.checkout.initXO(); the paypal.checkout.startFlow function is wrapped in a once function, which means you can only call startFlow once. and paypal.checkout.initXO is overwritten to show a warning in the console.

Inside, paypal.checkout.closeFlow there is a call to paypal.checkout.reset which is important to resetting these functions.

The problem was happening when the user clicks the close button too early, where the startFlow promise wasn't being resolved (which means when the user closes the modal it will redirect to the canceled url) nor the paypal.checkout.closeFlow catch wasn't being hit either.

I was able to resolve the issue, by keeping track of how many times the user clicked the button, if it was more than once, I called paypal.checkout.closeFlow (which will reset) before paypal.checkout.initXO();