Send PayPal generated orderID on Client via JS to Django server - 25

Once the Order ID has been generated and the order approved by the client, the next step is to send the order to the server for subsequent approval.

We agree that we have already created the order with the value corresponding to the price that the user has to pay and we are also now detecting when the order was approved, that is, when it was accepted:

mystore\elements\templates\partials\paypal.html

***
<script>
   paypal.Buttons(
       {
          ***
           onApprove: function(data, actions){
               console.log(data);
           }
       }
   ).render('#buttonPayPal');
</script>

For the client, you can also implement others here as I indicated, for example on cancel, that depends on you, which would be when the user closes the dialog and does not make the purchase, so that you can do something if you want to do it, but I am not going to do it, in order to go straight to the objective, so what are we going to implement? Simply, at least for now, the only thing I want to do here would be to open the views and we are going to implement a new method to receive the order:

mystore\elements\views.py

def capture_payment(request, order_id):
   print(order_id)

   return ''

mystore\elements\urls.py

path('capture-payment/<str:order_id>', views.capture_payment, name='capture_payment'),

You could put PayPal whatever you want at least for now I don't want to be very redundant because for example if you implement one with strike to give another possible implementation then to make the message a little more direct since again you are not going to use this method for all the payment gateways that you can implement it would also be good to create a new application but at least for now I don't want to worry about so many things I don't know where this came from but I'm going to want to print something clear here I can't return as I would do in another framework I have to return yes or yes something from request an object if not this gives me an error.

Through javascript since it would be precisely in on approve that is to say when it is approved we send it there so that it makes the request another way would be to do it through acos of fch but since it is not so much the case it is not something like that so necessary and we are not gaining much because I am not going to be here doing the reload manually through javascript I prefer to do a complete redirection windows location point let's see if I remember href here we have the route:

onApprove: function(data, actions){
    console.log(data);
    window.location.href = '/store/capture-payment/' + data.orderID;
}

and we could send it somewhere else for example google.com which is not here but to test we put it here and notice that it automatically redirects to the page and what is it that we want to do So give me a check here a little thing for here I'm going to go to Store 1 I want to see this route Okay it is relative let's see how it looks here we are going to place Well we already have the function here I'm going to test it here quickly in PayPal I'm going to place it here in the Script right now we place it here inside but it is to go implementing and it was by the way Well right now I don't remember that we were missing to get the data.to order ID I think it was then here we place the URL elements dot colon order Sorry it was already capture payment capt Oh sure but here we don't have the ID So we can't generate it this way Because we don't have the ID again we would have to place or something then we are going to do a hard code here it would be elements how do we place it here Store Okay this doesn't work then Store capture here neither do I put anything capture payment if not it will not collide with the one above this does not work and here I concatenating I think it was This exactly the Data order ID if not in the same way right now we print it here This is what it should be in the same way we come here quickly it should give an error because it does not find Data but unless it goes to there perfect there it did So we bring this and place it here and I hope it is order ID so as not to do this twice step back Here it is perfect let's do the test quickly Let's see if it gets there and here we have it good almost perfect but it did not find it clearly here I put the route of type integer and that is not an integer I am going to put est we already took a little longer than expected and here Perfect here this is surely because it does not return a request object here is the response but again we are going to that but we can see that it is arriving here we see so we are going to leave it here and in the next class we continue with the implementation

I agree to receive announcements of interest about this Blog.

We are going to pass the PayPal orderID to the server in Django.

- Andrés Cruz

En español

This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro desarrollo web con Django 5 y Python 3 + integración con Vue 3, Bootstrap y Alpine.js.

) )