How can I handle this security issue with form submiting? - php

Question

I'm currently working on an E-learning platform, where we sell courses to users that registers and make payments for that courses.
I have a HTML form and it's integrated with PayPal Checkout (sandbox) and actually the behavior I expect is that when the payment is accepted (onApprove function) the form is submited with the data I need to process on the server.
But, I was trying to imitate malicious behavior and I entered the command: document.forms[0].submit() and the form is submited without the paypal payment in between. So anybody can have the course for free.
I want to fix this issue, and I have no very much knowledge in web security. My questions:
How can I only submit the form when the Paypal payment is successful?
(Optional) Where can I learn more about this and other security issues?
payment.blade.php
<div class="container">
<form action="{{action("RegistersController#inscribir",["curso" => $curso->id])}}" method="POST">
<div class="row">
<div class="col-12 col-md-8">
<h1>Llena el formulario</h1>
#csrf
<div class="form-group">
<label for="Nombre">Ingresa tu nombre</label>
<input class="form-control" name="name" id="name" type="text" value="{{Auth::user()->name}}"/>
</div>
<div class="form-group">
<label for="email">Ingresa tu correo</label>
<input class="form-control" name="email" id="email" type="text" value="{{Auth::user()->email}}"/>
</div>
<div class="form-group">
<label for="phone">Ingresa tu número de teléfono</label>
<input class="form-control" name="phone" placeholder="+01 234 567 8910" id="phone" type="text" value=""/>
</div>
</div>
<div class="col-12 col-md-4">
<h4 class="my-3">Pagar Curso</h4>
<img src="/storage/img/cursos/{{$curso->image_square}}" alt="{{$curso->title}}" width="200px">
<h5 class="p-0 m-0">{{$curso->title}}</h5>
<small>{{substr($curso->description,0,150)}}</small>
<br>
<p>Precio: <b> <span id="price">{{number_format($curso->price,2,".","")}}</span> USD</b></p>
<br>
<input type="submit" class="btn btn-apple" style="display: none">
#if ($curso->price > 0)
<div id="paypal-button-container"></div>
#endif
</div>
</div>
</form>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=<MY_CLIENT_ID>"> // Replace YOUR_SB_CLIENT_ID with your sandbox client ID
</script>
<script>
var price = document.getElementById("price").innerText;
var paypal_button = document.getElementById("paypal-button-container");
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: {{$curso->price}}
}
}]
});
},
style: {
color: 'blue',
size: 'responsive'
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Submit the form
console.log(details);
document.forms[0].submit();
});
},
onError: function(err){
alert("Error completando la transacción");
console.error(err);
window.location.href = "/";
}
}).render('#paypal-button-container');
</script>

Answer 1

Marking something as paid and receiving associated form information are two separate things. One part will always need to be completed before the next can proceed. If you require the PayPal payment to be completed before the form is submitted, this will lead to issues if the process is interrupted after payment, which you must design for. Vice-versa also leads to a potential disconnect (receiving form information without a payment), which must be designed for.
The issue in your question is how to verify that a PayPal payment has taken place. This must be done on your server. The most robust way to do it is to capture the payment from your server using a server-side integration.
You'll need two server-side routes, one for 'Create an Order' and one for 'Capture Order', documented here.
The best approval front-end to pair your two routes with is: https://developer.paypal.com/demo/checkout/#/pattern/server