update post api from controller

app/code/IpSupply/SyncOrder/Api/Repository.php

@@ -21,7 +21,7 @@ class Repository implements RepositoryInterface
 
         foreach ($headers as $key => $value) {
             $key = strtolower($key);
-            if ('api_key' === $key && $value === $apiKey) {
+            if ('api-key' === $key && $value === $apiKey) {
                 return true;
             }
         }

app/code/IpSupply/SyncOrder/Controller/Adminhtml/Config/Post.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace IpSupply\SyncOrder\Controller\Adminhtml\Config;
+
+use IpSupply\SyncOrder\Config\Setter;
+use IpSupply\SyncOrder\Helper;
+use Magento\Framework\App\Action\HttpGetActionInterface;
+use Magento\Framework\App\Action\HttpPostActionInterface;
+use Magento\Framework\Controller\ResultFactory;
+
+/**
+ * Note: if getUrl('...') not working, pls disable "Add Secret Key to URLs"
+ * https://www.mageplaza.com/kb/magento-2-secure-your-admin.html
+ *
+ * @author
+ */
+class Post extends \Magento\Backend\App\Action implements HttpGetActionInterface, HttpPostActionInterface
+{
+    protected $_pageFactory;
+
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\View\Result\PageFactory $pageFactory
+    ) {
+        $this->_pageFactory = $pageFactory;
+        return parent::__construct($context);
+    }
+
+    public function execute()
+    {
+        $payload = $this->getRequest()->getPostValue();
+
+        unset($payload['form_key']);
+        \IpSupply\SyncOrder\Config\Setter::set(
+            path: 'config',
+            value: json_encode($payload),
+        );
+
+        if ($this->getRequest()->getParam('isAjax')) {
+            return Helper::responseOk([
+                'status' => true
+            ]);
+        } else {
+            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
+            $resultRedirect->setPath('*/*/index');
+            return $resultRedirect;
+        }
+    }
+}

app/code/IpSupply/SyncOrder/view/adminhtml/templates/syncorder_config.phtml

@@ -1,9 +1,15 @@
 <div class="ipsupply">
-    <form id="form">
+    <form id="form" action="<?php echo $this->getUrl('*/*/post'); ?>">
+        <?= $this->getBlockHtml('formkey') ?>
         <?php foreach ($block->getForm() as $field) : ?>
         <div class="form-group">
             <label for="<?= $field['name'] ?>"><?= $field['label'] ?></label>
-                <input type="text" id="<?= $field['name'] ?>" name="<?= $field['name'] ?>" value="<?= $field['value'] ?>" />
+            <input
+                type="text"
+                id="<?= $field['name'] ?>"
+                name="<?= $field['name'] ?>"
+                value="<?= $field['value'] ?>"
+            />
         </div>
         <?php endforeach ?>
 
@@ -13,8 +19,6 @@
     </form>
 </div>
 <script>
-    const AJAX_URL = location.origin + "/rest/V1/syncorder/config"; // TODO: need /sync to /config
-
     require([
         "jquery",
         "mage/translate",
@@ -28,7 +32,7 @@
         $.ajaxSetup({
             contentType: "application/json;",
             headers: {
-                API_KEY: "<?= $block->getApiKey() ?>",
+                "API-KEY": "<?= $block->getApiKey() ?>",
             },
             success: function (data) {
                 // do something before xhr
@@ -45,32 +49,35 @@
         $("#form").on("submit", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            $(this)
-                .find('[type=submit]')
-                .attr('disabled', 'disabled');
+            $(this).find("[type=submit]").attr("disabled", "disabled");
 
-            $.post(AJAX_URL, $(this).serialize())
-                .then(res => {
+            $.ajax({
+                url: $(this).attr("action"),
+                type: "POST",
+                cache: false,
+                contentType: false,
+                processData: false,
+                data: new FormData(this),
+            })
+                .done((res) => {
                     if (res.status) {
                         alertModal({
-                            content: 'Successfully: Data saved!'
-                        })
+                            content: "Successfully: Data saved!",
+                        });
                     } else {
                         alertModal({
-                            content: 'Failed: Data not saved!'
-                        })
+                            content: "Failed: Data not saved!",
+                        });
                     }
                 })
-                .catch(() => {
+                .fail(() => {
                     alertModal({
-                        content: 'Fail saved!'
-                    })
-                })
-                .then(() => {
-                    $(this)
-                        .find('[type=submit]')
-                        .removeAttr('disabled');
+                        content: "Fail saved!",
+                    });
                 })
+                .always( () => {
+                    $(this).find("[type=submit]").removeAttr("disabled");
+                });
         });
     });
 </script>