К сожалению, пользовательские заголовки должны быть сделаны с javascript / XMLHttpRequest, а не с <form>
.что-то вроде
<div id="myform">
<input type="hidden" name="amount" value="100" />
<input type="hidden" name="currency" value="USD" />
<input type="hidden" name="reference" value="jsd342113" />
<input type="hidden" name="ipn_url" value="http://demowebsite.com/ipn" />
<input type="submit" value="Pay Now" />
<script>
document.querySelector("#myform > [type=submit]").addEventListener("click", function() {
var all = document.querySelectorAll("#myform > input");
var inputs = new FormData();
for (var i = 0; i < all.length; ++i) {
inputs.append(all[i].name, all[i].value);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://demo/api/x");
xhr.setRequestHeader("Authorization", "Bearer <TOKEN>");
xhr.send(inputs);
});
</script>
</div>
теперь, пожалуйста, отправьте жалобу в W3C об отсутствии контроля заголовка в <form>
сообщениях.