Ajax onepage checkout magento 2

Question

I add a checkbox input to the checkout page in magento 2. The way I add it is really simple, just add an item in checkout_index_index.xml.

When clicking on the checkbox, I want to call a PHP function. My plan is to create a controller. But I don't know what should be the URL of the controller. I can create a route but how to get that value in the js file?

If I set the URL to 'custom/index' then it automatically POST to shop_url/checkout/custom/index. How to do AJAX in checkout page?

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/totals'
], function (Component, totals) {
    "use strict";

    return Component.extend({

           handleCheckbox: function() {

                $.ajax({
                    method: "POST",
                    url: 'WHAT SHOULD BE THE URL HERE',
                    data: {form_key: window.FORM_KEY},
                    dataType: "json",
                    showLoader: true,
                }).done(function( response ) {
                   console.log('GOT RESPNSE: ', response)
                });
            },

        /**
         * Order totals
         *
         * @return {Object}
         */
        totals: totals.totals(),

        /**
         * Is display reward points totals
         *
         * @return {boolean}
         */
        isDisplayed: function() {
            return this.getPureValue() !== 0;
        },

        /**
         * Get total value
         *
         * @return {number}
         */
        getPureValue: function() {
            var price = 0,
                fee;

            if (this.totals) {
                fee = totals.getSegment('fee');

                if (fee) {
                    price = fee.value;
                }
            }
            return price;
        },

        /**
         * Get total value
         *
         * @return {string}
         */
        getValue: function() {
            return this.getFormattedPrice(this.getPureValue());
        }
    });
});

Answer 1

You need to change this code as below

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/totals',
    'mage/url'
], function (Component, totals, url) {
    "use strict";

    return Component.extend({

           handleCheckbox: function() {
                url.setBaseUrl(BASE_URL);
                var linkUrl = url.build('checkout/custom/index');
                $.ajax({
                    method: "POST",
                    url: linkUrl,
                    data: {form_key: window.FORM_KEY},
                    dataType: "json",
                    showLoader: true,
                }).done(function( response ) {
                   console.log('GOT RESPNSE: ', response)
                });
            },

        /**
         * Order totals
         *
         * @return {Object}
         */
        totals: totals.totals(),

        /**
         * Is display reward points totals
         *
         * @return {boolean}
         */
        isDisplayed: function() {
            return this.getPureValue() !== 0;
        },

        /**
         * Get total value
         *
         * @return {number}
         */
        getPureValue: function() {
            var price = 0,
                fee;

            if (this.totals) {
                fee = totals.getSegment('fee');

                if (fee) {
                    price = fee.value;
                }
            }
            return price;
        },

        /**
         * Get total value
         *
         * @return {string}
         */
        getValue: function() {
            return this.getFormattedPrice(this.getPureValue());
        }
    });
});