'Use Ajax to change payment plugins state

I tried to create plugin that to customize woocommerce payments setting page , I create it with ajax code but i cant complete the plugin and make it work. My js code

(function ($) {
$(document).on('change', '.wsd-plugin-controller-toggle', function () { //checkbox
    let initiator = $(this),
        data = {
            'action_type': initiator.data('state'),
            'plugin_slug': initiator.data('plugin-slug')
        };
    $.ajax({
        url: plugins_controller.rest.endpoints.update_state,
        type: "POST",
        data: data,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-WP-Nonce', plugins_controller.rest.nonce);
            initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
        },
        success: function (response) {
            console.log(response);
            initiator.data('state', response.state);
            if (initiator.data('reload')) {
                location.reload();
            }
            $(document).trigger('wsd-plugin-state-updated', [initiator, response]);
            initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
        },
        error: function (response) {
            console.log('error ', response);
            initiator.prop('checked', false);
            $(document).trigger('wsd-plugin-state-update-failed', [initiator, response]);
            initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
        }
    });
});

})(jQuery);

and my html code

<td class="title">
                    My Fatoorah
                </td>
                <td class="status">
                    <div class="wsd-toggler">
                        <input id="toggler-csCeE5" type="checkbox" class="wsd-toggler-input  wsd-plugin-controller-toggle" data-plugin-slug="myfatoorah-woocommerce/myfatoorah-woocommerce.php" data-state="activate">
                        <label for="toggler-csCeE5" class="check-trail  wsd-toggler-shape">
                            <span class="check-handler wsd-toggler-handler"></span>
                        </label>
                        <img src="\wordpress\wp-content\plugins\store_settings\assets\images\spinner.svg" class="wsd-loading" alt="loading">
                    </div>
                </td>
                <td class="moderate">
                    <select class="wsd-payment-popup-select wsd-hidden" onchange="location = this.value;">
                        <option selected="" disabled="" hidden="">إدارة</option>
                        <option value="/wordpress/wp-admin/admin.php?page=wc-settings&amp;tab=checkout&amp;section=myfatoorah_direct">
                            الدفع المباشر
                        </option>
                        <option value="/wordpress/wp-admin/admin.php?page=wc-settings&amp;tab=checkout&amp;section=myfatoorah_v2">
                            كارت
                        </option>
                    </select>
                </td>
            </tr>

And my main page php i add

 add_action('admin_enqueue_scripts', 'load_payment_style');


function load_payment_style()
{
   wp_enqueue_style('plugins_controller_style', plugins_url('style.css', __FILE__));
   wp_enqueue_script('plugins_controller', plugins_url('plugins_controller.js', __FILE__));
   wp_localize_script( 'plugins_controller', 'plugins_controller',
  array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ,
   'ajax_nonce' => wp_create_nonce( 'plugins_controller' ) ) );
 }

I need to chang payment state (active / deactive) by toggler like this payment setting page

thank you



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source