I am building a web app with Next.js 14 and need to integrate a payment gateway into it. The payment gateway has provided me with a submission API URL to which I need to post some data. Once the data is posted to this API URL, the user will be redirected to the payment gateway’s website to complete their transaction.

<form
              method="post"
              action="https://example.com/Transaction/PostTransaction"
              className="flex justify-start"
            >
              <input type="TEXT" name="CURRENCY_CODE" value="USD" hidden />

              <input type="TEXT" name="MERCHANT_ID" value="12345" hidden />

              

              <input type="TEXT" name="TOKEN" value={token} hidden />

              
              
              

              <input type="TEXT" name="TXNAMT" value={txtamt} hidden />

              <input type="TEXT" name="BASKET_ID" value={basket} hidden />

              <button
                size="large"
                className="w-full bg-blue-600 shadow-sm rounded-xl px-8 font-bold py-2 text-white mt-5"
                type="submit"
              >
                Pay Now
              </button>
            </form>

When clicking the ‘Pay Now’ button, the user is successfully directed to the payment gateway website. However, the concern arises from the fact that any user can potentially view hidden details in the source code and alter them, which poses a security risk. Is there a method to handle this process on the server side?