I have been trying to integrate PayPal in my e-commerce project. It works fine in Paypal button but I have problems in making the transaction complete.
After clicking “Pay Now” in the sandbox, the money goes through but the transaction in my database was not completed.
Here’s my checkout.html
file:
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-6">
<div class="box-element" id="form-wrapper">
<form id="form">
<div id="user-info">
<div class="form-field">
<input required class="form-control" type="text" name="name" placeholder="Name..">
</div>
<div class="form-field">
<input required class="form-control" type="email" name="email" placeholder="Email..">
</div>
</div>
<div id="shipping-info">
<hr>
<p>Shipping Information:</p>
<hr>
<div class="form-field">
<input class="form-control" type="text" name="address" placeholder="Address..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="city" placeholder="City..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="state" placeholder="State..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="zip" placeholder="zip code..">
</div>
</div>
<hr>
<input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
</form>
</div>
<br>
<div class="box-element hidden" id="payment-info">
<small>Paypal Options</small>
<div id="paypal-button-container"></div>
</div>
</div>
<div class="col-lg-6">
<div class="box-element">
<a class="btn btn-outline-dark" href="{% url 'cart' %}">← Back to Cart</a>
<hr>
<h3>Order Summary</h3>
<hr>
{% for item in items %}
<div class="cart-row">
<div style="flex:2"><img class="row-image" src="{{item.product.imageURL}}"></div>
<div style="flex:2"><p>{{item.product.name}}</p></div>
<div style="flex:1"><p>₱{{item.product.price|floatformat:2}}</p></div>
<div style="flex:1"><p>x{{item.quantity}}</p></div>
</div>
{% endfor %}
<h5>Items: {{order.get_cart_items}}</h5>
<h5>Total: ₱{{order.get_cart_total|floatformat:2}}</h5>
</div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD"></script>
<script>
var total = '{{order.get_cart_total}}'
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style:{
//color: 'blue',
shape: 'rect',
},
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: parseFloat(total).toFixed(2)
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
submitFormData()
});
}
}).render('#paypal-button-container');
</script>
<script type="text/javascript">
var shipping = '{{order.shipping}}'
var user = '{{request.user.is_authenticated}}'
if(shipping == 'False'){
document.getElementById('shipping-info').innerHTML = ''
}
if (user != "False"){
document.getElementById('user-info').innerHTML = ''
}
if (shipping == 'False' && user != "False"){
//Hide entire form if user is logged in and shipping is false
document.getElementById('form-wrapper').classList.add('hidden');
//Show payment if logged in user wants to buy an item that does not require shipping
document.getElementById('payment-info').classList.remove('hidden');
}
var form = document.getElementById('form')
form.addEventListener('submit', function(e){
e.preventDefault()
console.log('Form Submitted...')
document.getElementById('form-button').classList.add("hidden");
document.getElementById('payment-info').classList.remove("hidden");
})
/*document.getElementById('make-payment').addEventListener('click', function(e){
submitFormData()
})
*/
function submitFormData(){
console.log('Payment button clicked')
var userFormData = {
'name':null,
'email':null,
'total':total,
}
var shippingInfo = {
'address':null,
'city':null,
'state':null,
'zip':null,
}
if (shipping != 'False'){
shippingInfo.address = form.address.value
shippingInfo.city = form.city.value
shippingInfo.state = form.state.value
shippingInfo.zip = form.zip.value
}
if (user != 'True'){
userFormData.name = form.name.value
userFormData.email = form.email.value
}
var url = '/process_order/'
fetch(url,{
method:'POST',
headers:{
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo})
})
.then((response) => response.json())
.then((data) => {
console.log('Success:', data);
alert('Transaction Completed');
cart ={}
document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
window.location.href = "{% url 'store' %}"
})
}
</script>
{% endblock content %}
The error was in my console. This is the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at submitFormData (http://127.0.0.1:8000/checkout/:207:36)
at http://127.0.0.1:8000/checkout/:140:5
at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:15659)
at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:14716)
at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:16040)
at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:14716)
at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:15526
at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:15659)
at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:14716)
at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:16040)
Error: Cannot read properties of undefined (reading 'value')
at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:71786)
at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80160)
at JSON.parse (<anonymous>)
at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80019)
at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80172)
at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:84738)
at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:84858)
at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:91179
at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:18264)
at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:90976
Error: Cannot read properties of undefined (reading 'value')
at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:71786)
at Array.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80160)
at JSON.parse (<anonymous>)
at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80019)
at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:80172)
at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:84738)
at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:84858)
at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:91179
at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:18264)
at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi¤cy=USD:2:90976
It was saying that there’s an error in my submitFormData()
or JavaScript. But I cannot find what is the problem.