如何直接从 Html 表单付款

Question

我有一个表单，允许用户在付款前输入他们的详细信息。如何在不将输入值保存在数据库表中的情况下将这些输入值从 HTML 复制到支付代码网关？

这是我的 HTML 表单

     <form>
          <label>Full Name</label>
          <input type="text" name="full_name" />
          <label>Email</label>
          <input type="text" name="email" />
          <label>Amount (NGN)</label>
          <input type="number"  name="amount" placeholder="Min Amount 1000"/>
          <script src="https://js.paystack.co/v1/inline.js"></script>
          <button type="button" onclick="payWithPaystack()"> Pay </button> 
     </form>

这是付款代码

<script>
            function payWithPaystack(){
              var handler = PaystackPop.setup({
                key: 'pk_test_f5e677',
                email: 'customer@email.com',
                amount: 10000,
                currency: "NGN",
                ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
                metadata: {
                   custom_fields: [
                      {
                          display_name: "Mobile Number",
                          variable_name: "mobile_number",
                          value: "+2348012345678"
                      }
                   ]
                },
                callback: function(response){
                    alert('success. transaction ref is ' + response.reference);
                },
                onClose: function(){
                    alert('window closed');
                }
              });
              handler.openIframe();
            }
          </script>

Answer 1

就这样……

在下面的代码中，我们获取包含信息的元素，然后，在函数调用期间，我们获取这些元素的值。

<form>
    <label>Full Name</label>
    <input type="text" id=“nameField” name="full_name" />
    <label>Email</label>
    <input type="text" id=“emailField” name="email" />
    <label>Amount (NGN)</label>
    <input type="number" id=“amountField” name="amount" placeholder="Min Amount 1000"/>
    <script src="https://js.paystack.co/v1/inline.js"></script>
    <button type="button" onclick="payWithPaystack()"> Pay </button> 
</form>


<script>
    var email = document.getElementById(“emailField”);
    var name = document.getElementById(“nameField”);
    var amount = document.getElementById(“amountField”);
    function payWithPaystack(){
        var handler = PaystackPop.setup({
            key: 'pk_test_f5e677',
            email: email.value,
            amount: amount.value,
            currency: "NGN",
            ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
             metadata: {
                custom_fields: [
                {
                    display_name: "Mobile Number",
                    variable_name: "mobile_number",
                    value: "+2348012345678"
               }]
            },
            callback: function(response){
                alert('success. transaction ref is ' + response.reference);
            },
            onClose: function(){
                alert('window closed');
            }
        });
        handler.openIframe();
    }
</script>