Currently, I am in the process of developing an ecommerce platform. As part of this project, I have created a billing form to gather essential information such as email addresses and physical addresses from users. The intention behind collecting this data is to structure it into a JSON format that can then be seamlessly transmitted to the payment gateway.
I initially attempted to store this information in a variable before passing it along. However, upon reaching the redirected modal form on the payment gateway interface, I encountered an error message indicating an invalid email input.
Snippet of 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 postcode = 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86ffe9f3c6e3fee7ebf6eae3a8e5e9eb">[email protected]</a>">
<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>