i'm building an ecommerce site with django. once the user press checkout, there is an html billing form which popsup and prompts the user to enter address, email etc.
i also passed data like email and it worked fine. but when i try for the amount it doesnt pass
how would i pass the amount to the Payment gateway?
the Html form
<form>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div id="payment-form" class="col-12 col-lg-6 mx-auto">
<h3 class="mb-3">Billing address</h3>
<!-- Error messages in this element -->
<div class="row g-3">
<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="[email protected]">
<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">
<p id="{{cart.get_total_price}}"></p>
<script src="https://checkout.flutterwave.com/v3.js"></script>
<button type="button" data-secret=="{{cart.get_total_price}}" id="submit" class="btn btn-primary w-100 fw-bold" >Pay ${{cart.get_total_price}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
<script src="{% static 'js/submit_checkout.js' %}"></script>
my js script
document.addEventListener("DOMContentLoaded", (event) => {
// Add an event listener for when the user clicks the submit button to pay
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
const PBFKey = "xxxxxxxxxxxxxxxxxxxxxxxxxx"; // paste in the public key from your dashboard here
const txRef = '' Math.floor((Math.random() * 1000000000) 1); //Generate a random id for the transaction reference
const 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;
const amount= document.getElementById('{{cart.get_total_price}}').value;
// getpaidSetup is Rave's inline script function. it holds the payment data to pass to Rave.
getpaidSetup({
PBFPubKey: PBFKey,
customer_email: email,
amount:amount*100,
currency: "USD", // Select the currency. leaving it empty defaults to NGN
txref: txRef, // Pass your UNIQUE TRANSACTION REFERENCE HERE.
onclose: function() {},
callback: function(response) {
flw_ref = response.tx.flwRef;// collect flwRef returned and pass to a server page to complete status check.
console.log("This is the response returned after a charge", response);
if(response.tx.chargeResponse =='00' || response.tx.chargeResponse == '0') {
// redirect to a success page
} else {
// redirect to a failure page.
}
}
});
});
});
views
@login_required
def CartView(request):
cart = Cart(request)
total = str(cart.get_total_price())
total = total.replace('.', '')
total = int(total)
return render(request, 'payment/payment_form.html',)
CodePudding user response：
You are not passing those variables total and cart to the template context
Change this
return render(request, 'payment/payment_form.html',)
to
return render(request, 'payment/payment_form.html', {'total': total, 'cart': cart})