How to pass the CSRF token from codeigniter to Paypal Express Checkout?

advertisements

I am integrating Paypal Express Checkout with server-side REST into my codeigniter website. As per Paypal doc's i added the following to my checkout page:

<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
    var CREATE_PAYMENT_URL  = 'https://#######/paypal/create';
    var EXECUTE_PAYMENT_URL = 'https://######/paypal/execute';

    paypal.Button.render({

        env: 'production', // Or 'sandbox'

        commit: true, // Show a 'Pay Now' button

        payment: function() {
            return paypal.request.post(CREATE_PAYMENT_URL).then(function(data) {
                return data.id;
            });
        },

        onAuthorize: function(data) {
            return paypal.request.post(EXECUTE_PAYMENT_URL, {
                paymentID: data.paymentID,
                payerID:   data.payerID
            }).then(function() {

                // The payment is complete!
                // You can now show a confirmation message to the customer
            });
        }

    }, '#paypal-button');
</script>

Everything is working perfectly but, when i turn on codeigniter CSRF protection the call that checkout.js makes to my server using the CREATE_PAYMENT_URL gets rejected do to the fact of the missing CSRF token. I have very little knowledge of JavaScript, I need some help to pass the token to checkout.js, Paypal's doc are no help.

What I've tried:

Turn off CSRF on codeigniter config Works! Paypal express checkout works perfectly but this is not an option, CSRF security must be on. Excluded the URI from the CSRF check in codeignter config Again works perfectly but I am not satisfied. There must be a way to protect the call to server with CSRF token. I hope my problem is clear and you can suggest some solution. Thank you!


You should be able to resolve this by adding the X-CSRF-TOKEN parameter to your http headers for ajax requests. Assuming you are utilizing jquery, the below should resolve the issue:

$(document).ready(function(){

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{PUT_YOU_CSRF_VARIABLE_HERE}}'
        }
    });

    var CREATE_PAYMENT_URL  = 'https://#######/paypal/create';
    var EXECUTE_PAYMENT_URL = 'https://######/paypal/execute';

    paypal.Button.render({

        env: 'production', // Or 'sandbox'

        commit: true, // Show a 'Pay Now' button

        payment: function() {
            return paypal.request.post(CREATE_PAYMENT_URL).then(function(data) {
                return data.id;
            });
        },

        onAuthorize: function(data) {
            return paypal.request.post(EXECUTE_PAYMENT_URL, {
                paymentID: data.paymentID,
                payerID:   data.payerID
            }).then(function() {

                // The payment is complete!
                // You can now show a confirmation message to the customer
            });
        }

    }, '#paypal-button');

});