Submit form from Paypal script after approved payment in Django - django

Question

I have a user registration form and I would like the user to pay in order to register for my app.
I have the frontend paypal set up for the payment as well as the user registration with a submit button but I do not know how to integrate the two.
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '00.01'
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
<button class="w3-button w3-blue w3-padding-large" type="submit">
Buy Now
</button>
</form>
I would like the submit button to be used in the 'onapprove' part of the script but I am not sure how. Alternatively I was thinking of calling my 'buy' function from the views
def buy(request):
if request.method == 'POST':
form = UserRegisterForm(request.POST)
if form.is_valid():
data = form.cleaned_data
email = f"{data['email']}"
username = f"{data['username']}"
form.instance.username = username
form.save()
return redirect('login')
else:
form = UserRegisterForm()
return render(request, 'users/buy.html', {'form': form})
The other thing is that the system would have to check that the form inputs are unique and valid before payment. Would it just be best to have the redirect the user to the registration page following a successful payment?
forms.py
class UserRegisterForm(UserCreationForm):
email = forms.EmailField()
username = forms.CharField(max_length=20)
class Meta:
model = User
fields = ['email', 'username', 'password1', 'password2']

Answer 1

You can use onClick to check the values are valid before proceeding with payment: https://developer.paypal.com/docs/checkout/integration-features/validation/
Combine that with a proper server integration that transmits the values in a fetch body when creating or capturing the order, so your server can store them then.
For that server integration you need to create two routes, one for 'Create Order' and one for 'Capture Order', documented here. These routes should return JSON data.
Pair those routes with the following button approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server , plus your onClick function