diff --git a/app/views/settings/payment_method_settings/_form.html.erb b/app/views/settings/payment_method_settings/_form.html.erb
index 1b2af479..66e22fab 100755
--- a/app/views/settings/payment_method_settings/_form.html.erb
+++ b/app/views/settings/payment_method_settings/_form.html.erb
@@ -1,39 +1,69 @@
 <% breadcrumb_add t("payment_methods"), settings_payment_method_settings_path, settings_payment_method_settings_path, t("views.btn.#{action_name}") %>
 
 <div class="row">
-  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
-    <div class="card">
-      <div class="body">
-        <%= simple_form_for([:settings, @settings_payment_method_setting]) do |f| %>
-        <%= f.error_notification %>
+    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
+      <div class="card">
+        <div class="body">
+          <%= simple_form_for([:settings, @settings_payment_method_setting]) do |f| %>
+          <%= f.error_notification %>
 
-        <div class="form-inputs p-l-15">
-          <%= f.input :payment_method %>
-          <%= f.input :is_active %>
-          <!-- <div class="form-group gateway_communication_type bmd-form-group">
-            <%= f.label :gateway_communication_type, 'Gateway Communication Type'%>
-            <select class="form-control col-md-12 gateway_type"  name="gateway_communication_type" >
-            <option value="">Select Gateway Type</option>
-              <option value="Api">Api</option>
-              <option value="Device">Device</option>
-              <option value="Default">Default</option>
-            </select> 
-          </div>  -->
-           <%= f.input :gateway_communication_type,:class=>'gateway_type', collection: [ "Api", "Device", "Manual"] %>
-          <%= f.input :gateway_url ,:class=>'gateway_type', :required => true %>
-          <%= f.input :auth_token ,:class=>'auth_token', :required => true %>
-          <%= f.input :merchant_account_id ,:class=>'merchant_id', :required => true%>
-          <%= f.input :additional_parameters, as: :text %>
+          <div class="form-inputs p-l-15">
+            <%= f.input :payment_method %>
+            <%= f.input :is_active %>
+            <%= f.input :gateway_communication_type, collection: [ "Api", "Device", "Manual"] %>
+            <%= f.input :gateway_url, required: true %>
+            <%= f.input :auth_token, required: true %>
+            <%= f.input :merchant_account_id, required: true %>
 
+            <!-- JSON Key-Value Editor -->
+            <div class="form-group">
+              <%= f.label :additional_parameters, 'Additional Parameters (Key-Value Pairs)' %>
+              <div id="json-fields">
+                <% if @settings_payment_method_setting.additional_parameters.present? %>
+                  <% JSON.parse(@settings_payment_method_setting.additional_parameters).each do |key, value| %>
+                    <div class="key-value-pair row mb-2">
+                      <div class="col-md-5">
+                        <input type="text" name="param_keys[]" class="form-control" placeholder="Key" value="<%= key %>">
+                      </div>
+                      <div class="col-md-5">
+                        <input type="text" name="param_values[]" class="form-control" placeholder="Value" value="<%= value %>">
+                      </div>
+                      <div class="col-md-2">
+                        <button type="button" class="btn btn-danger remove-field">Remove</button>
+                      </div>
+                    </div>
+                  <% end %>
+                <% else %>
+                  <div class="key-value-pair row mb-2">
+                    <div class="col-md-5">
+                      <input type="text" name="param_keys[]" class="form-control" placeholder="Key">
+                    </div>
+                    <div class="col-md-5">
+                      <input type="text" name="param_values[]" class="form-control" placeholder="Value">
+                    </div>
+                    <div class="col-md-2">
+                      <button type="button" class="btn btn-danger remove-field">Remove</button>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
+
+              <button type="button" id="add-field" class="btn btn-primary mt-2">
+                <i class="material-icons">add</i> Add Parameter
+              </button>
+
+              <%= f.hidden_field :additional_parameters, id: 'additional-parameters-json' %>
+            </div>
+
+          </div>
+
+          <div class="form-actions p-l-15">
+            <%= f.submit "Submit", class: 'btn btn-primary submitBtn btn-lg waves-effect' %>
+          </div>
+          <% end %>
         </div>
-
-        <div class="form-actions p-l-15">
-          <%= f.submit "Submit",:class => 'btn btn-primary submitBtn btn-lg waves-effect' %>
-        </div>
-        <% end %>
       </div>
     </div>
-  </div>
   <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
     <div class="card">
       <div class="body">
@@ -57,23 +87,98 @@
           2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br>
         </p>
       </div>
-    </div>  
+    </div>
   </div>
 </div>
 
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const jsonFields = document.getElementById('json-fields');
+  const jsonOutput = document.getElementById('additional-parameters-json');
+
+  document.getElementById('add-field').addEventListener('click', function() {
+    const newPair = document.createElement('div');
+    newPair.className = 'key-value-pair row mb-2';
+    newPair.innerHTML = `
+      <div class="col-md-5">
+        <input type="text" name="param_keys[]" class="form-control" placeholder="Key">
+      </div>
+      <div class="col-md-5">
+        <input type="text" name="param_values[]" class="form-control" placeholder="Value">
+      </div>
+      <div class="col-md-2">
+        <button type="button" class="btn btn-danger remove-field">Remove</button>
+      </div>
+    `;
+    jsonFields.appendChild(newPair);
+    attachRemoveListener(newPair);
+    attachInputListeners(newPair);
+  });
+
+  function attachRemoveListener(element) {
+    const removeBtn = element.querySelector('.remove-field');
+    if (removeBtn) {
+      removeBtn.addEventListener('click', function() {
+        element.remove();
+        updateJsonOutput();
+      });
+    }
+  }
+
+  function attachInputListeners(element) {
+    element.querySelectorAll('input').forEach(input => {
+      input.addEventListener('input', updateJsonOutput);
+    });
+  }
+
+  function updateJsonOutput() {
+    const keys = document.querySelectorAll('input[name="param_keys[]"]');
+    const values = document.querySelectorAll('input[name="param_values[]"]');
+    const data = {};
+    let hasData = false;
+
+    keys.forEach((keyInput, index) => {
+      const key = keyInput.value.trim();
+      const value = values[index]?.value.trim() || '';
+
+      if (key) {
+        data[key] = value;
+        hasData = true;
+      }
+    });
+
+    jsonOutput.value = hasData ? JSON.stringify(data) : '';
+  }
+
+  document.querySelectorAll('.key-value-pair').forEach(pair => {
+    attachRemoveListener(pair);
+    attachInputListeners(pair);
+  });
+
+  updateJsonOutput();
+
+  document.querySelector('form').addEventListener('submit', function(e) {
+    updateJsonOutput();
+    if (!confirm('Are you sure you want to save these parameters?')) {
+      e.preventDefault();
+    }
+  });
+});
+</script>
+
 <!--  <script type="text/javascript">
-  $(function() { 
+  $(function() {
     $(document).on('click', '#payment_method_setting_gateway_communication_type', function(event){
       if ($(this).val() == "Api") {
         $('.submitBtn').attr("disabled", true);
       }else{
         $('.submitBtn').removeAttr("disabled");
       }
-    });  
+    });
     $( "#payment_method_setting_gateway_url" ).keypress(function() {
-      
+
     });
   });
 </script>
 
- -->
\ No newline at end of file
+ -->