Как получить данные из html-формы в формате json

Я создаю сайт электронной коммерции, поэтому я создал форму выставления счетов, и в этой форме я хочу собирать такие данные, как электронная почта, адрес и т.д., и передавать их в формате json, чтобы передать их платежному шлюзу.

Я попробовал создать его в переменной и передать, но на форме redirectedmodal платежного шлюза он говорит invalid email input

Code

const publicKey = "{{ key }}";

var email = document.getElementById('email').value;
var fullname = document.getElementById('fullName').value;
var address1 = document.getElementById('custAdd').value;
var address2 = document.getElementById('custAdd2').value;
var country = document.getElementById('country').value;
var state = document.getElementById('state').value;
var address1 = document.getElementById('postCode').value;

function payWithRave() {

  var x = getpaidSetup({
    PBFPubKey: "xxxxxx",
    email: email,
    amount: '{{cart.get_total_price}}',
    customer_phone: "234099940409",
    currency: "USD",
    address: 'address1',
    address2: 'address2',
    country: 'country',
    state: 'state',
    postcode: 'postCode',
  })

<div class="col-sm-7">
  <label for="firstName" class="form-label">Full Name</label>
  <input type="text" class="form-control" id="fullName" placeholder="" required>
  <div class="invalid-feedback">
    Valid first name is required.
  </div>
</div>
<div class="col-12">
  <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
  <input type="email" class="form-control" id="email" placeholder="you@example.com">
  <div class="invalid-feedback">
    Please enter a valid email address for shipping updates.
  </div>
</div>
<div class="col-12">
  <label for="address" class="form-label">Address</label>
  <input type="text" class="form-control" id="custAdd" placeholder="1234 Main St" required>
  <div class="invalid-feedback">
    Please enter your shipping address.
  </div>
</div>
<div class="col-12">
  <label for="address2" class="form-label">Address 2 <span
                            class="text-muted">(Optional)</span></label>
  <input type="text" class="form-control" id="custAdd2" placeholder="Apartment or suite">
</div>
<div class="col-md-5">
  <label for="country" class="form-label">Country</label>
  <select class="form-select" id="country" required>
    <option value="">Choose...</option>
    <option>United States</option>
  </select>
  <div class="invalid-feedback">
    Please select a valid country.
  </div>
</div>
<div class="col-md-4">
  <label for="state" class="form-label">State</label>
  <select class="form-select" id="state" required>
    <option value="">Choose...</option>
    <option>California</option>
  </select>
  <div class="invalid-feedback">
    Please provide a valid state.
  </div>
</div>
<div class="col-md-3">
  <label for="Postcode" class="form-label">Postcode</label>
  <input type="text" class="form-control" id="postCode" placeholder="" required>
  <div class="invalid-feedback">
    Zip code required.
  </div>
</div>
</div>


<hr class="my-4">
<button type="button" class="btn btn-primary w-100 fw-bold" onClick="payWithRave()">Pay ${{cart.get_total_price}}</button>

strong text

Вернуться на верх