如何将产品总额传递给支付网关

Question

我正在使用 Django 构建一个电子商务网站。一旦用户按下结帐，就会弹出一个 html 账单表格，提示用户输入地址、电子邮件等。

我还传递了电子邮件之类的数据，而且效果很好。但是当我尝试它没有通过的数量时

我如何将金额传递给支付网关？

Html 形式

<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="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">
                  <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>

我的 js 脚本

    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.
          }
      }
    });
  });
});

观看次数

@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',)

Answer 1

您没有将这些变量 total 和 cart 传递给模板上下文

改变这个

return render(request, 'payment/payment_form.html',)

到

return render(request, 'payment/payment_form.html', {'total': total, 'cart': cart})

如何将产品总额传递给支付网关

how to pass the total amount of product to payment gateway

html

django

ajax

json

e-commerce