## Understanding the complete flow - 

I will discuss the scenario with respect to my previous blogs. 

- A user from react app click on the purchase button / checkout button. It shoud be a axios post request to django application. the url must contain a query params or somehow point to  a single product from ProductDetail model created in [last part](https://www.ranuvijay.me/blogs/django-models-and-backend-settings-for-stripe-integration). We need a single product and price which the users want to purchase, so in our django app we should be able to filter the product based on url. there are many ways to  do it, you can follow whatever you think is good for your application. Will discuss more about this later in this blog.
- We will override the create method of OrderBeforConfirmation model in our views to filter a single product and then based on the product and price we will create a stripe checkout session.
- Stripe checkout session has few mandatory fields which we will see in a while.
- If the stripe session is successfully created it generates a temporary url which opens the default stripe checkout page, we will send this url to our react app as a return value from create method and if checkout session is not created, we will send the error message to our react app.
- In our react app, we can open the stripe checkout url, fill the form, card details and then do a successfull payment.
- Once the payment is successfull, we will move back to our react app and show a success message to users and will also create a new instance for  OrderAfterConfirmation modal based on data. this will ensure in our database that the payment wass successfull.
- We will check Webhooks in later part of this topic. 

### Let us setup the code, will try to explain each part in detail

#### Frontend -

Let us assume that **product_name** in the model **ProductDetail** is a unique field

We will build a checkout page in our React app,  I have build checkout page with this link **http://localhost:3000/checkout/product** where **product** is a dynamic key, it will be replaced with **productId** in real time.

This checkout page will have all the relevent data that a user can see before actually placing an order, like product name, description, images, price, and etc. Below is an example of how it should be. ( I'm sure the page should look good and not be the same as I have).

![frontendcheckout.png](https://api.ranuvijay.me/uploads/frontendcheckout_28d22a8302.png)

And on clicking the checkout button, this is the axios post request we can make, Note here that our aim is to create an instance of **OrderBeforConfirmation** model and also create the stripe checkout seesion to get stripe url for payment. From the code below we can check that if the axios request is successful, the django app will return a url and here in our react app, we will move to that url, **the url generated is the default stripe checkout page**. and if not it will console log the error message.  

```
      axios
        .post(
          "http://localhost:8000/checkout/create-checkout-session",
          {
            product: productId,
            buyer: userId
          },
        )
        .then((res) => {
          window.open(res.data.url, "_self");
        })
        .catch((e) => {
          console.log("error", e);
        });
```
Let us now build the backend part and will again return to the frontend later.

#### Backend -

Here we will create the views and url used by our react app for axios post method.

let us create a **views.py** file and work with it - 


```
from rest_framework.views import APIView
from .models import ProductDetail, OrderBeforConfirmation, OrderAfterConfirmation
from rest_framework.permissions import IsAuthenticated
from rest_framework.response import Response
from rest_framework import status
from rest_framework import generics

import stripe

class CheckoutSession(APIView):
    def post(self, request, format=None):
    try:
       Obj =  OrderBeforConfirmation.objects.create(data)
       productObj = ProductDetail.objects.get(id= productId)
       productName = productObj.product_name
       productPrice = productObj.price
       YOUR_DOMAIN = f"http://localhost:3000/checkout/{productId}"
       
       try:
          checkout_session = stripe.checkout.Session.create(
              line_items=[
                 {
                    'price_data':{
                       'currency' : "usd",
                       'unit_amount' : productPrice*100,
                       'product_data' :{
                       'name' : f"Product is {productName}"
                       }
                    },
                    'quantity': 1,
                 }
              ],
              metadata = {
                 "objId" : Obj.id,
              },
              mode='payment',
              success_url=YOUR_DOMAIN + f'?paymentSuccess=True&obj={Obj.id}',
              cancel_url=YOUR_DOMAIN + '?paymentCanceled=True',
          )
          return Response({"url": checkout_session.url})
       except Exception as e:
          return Response(str(e))
    except Exception as e:
       return Response(status=status.HTTP_400_BAD_REQUEST)
```

**Few things to note here are -**
- LIne Items mentioned here are mandatory
- You can add more fields such as image
- These line items detail will be shown on the stripe checkout page.
- Stripe accetps payments in cents, and not in dollar, you can change this to your currency
- You will find the **Metadata**,  I will explain it in detail in next blog (next part of this topic), it will be used to track the response from webhooks, like this webhook is for which payment.
- Success_url and cancel_url is the same url I configured in my React app (checkout url) with added params. after the payment, stripe will route us to this same url, and with the help of added params I will check whether the payment was a success or not, I have also passed my obj id, this I will use to do a post request to create insantance of **OrderAfterConfirmation** model to update our database about payment.
- If we have a instance of OrderBeforConfirmation but not have a instance of OrderAfterConfirmation, it will be clear that payment started but did not finished. We can manually inspect Stripe.

Let us also create views for OrderAfterConfirmation in the same file, we will use this to create a success record.

```
class OrderAfterFrontConfirmationView(generics.CreateAPIView):
    serializer_class = serializer
    queryset = OrderAfterConfirmation.objects.all()
    permission_classes = [IsAuthenticated,]
```

Here is the **urls.py** file to create urls for our views - 

```
from .views import CheckoutSession, OrderAfterFrontConfirmationView
from rest_framework.routers import DefaultRouter

router=DefaultRouter()

urlpatterns = [
path('create-checkout-session', CheckoutSession.as_view(), name="checkout session"),
path('frontend_confirmation', OrderAfterFrontConfirmationView.as_view(), name='frontend-confirmation'),
]

urlpatterns += router.urls
```

#### Frontend -

Now If we click on checkout button we will see this default stripe checkout page, (if everything worked)

Note that due to limitaions of being individual I was not allowed to do a $ transaction, so I did in my local currency.

As I mentioned earlier we get a url and this is how stripe default page looks

![stripe-checkout.png](https://api.ranuvijay.me/uploads/stripe_checkout_b49a261989.png)

We can fill the form with this [testing card number](https://stripe.com/docs/testing) and other details and click on the pay button. Our payment will either be a success or it will give some error. 

We run include the below mentioned code in the checkout component discussed above to check the status of the payment - 

```
import { useSearchParams } from "react-router-dom";
```
and in the component
```
const [searchParams] = useSearchParams();

  useEffect(() => {
    if (searchParams.get("paymentSuccess")) {
      console.log("success");
      
      if (searchParams.get("obj")) {
        const objID = searchParams.get("obj");
        axios
          .post(
            "http://localhost:8000/checkout/frontend_confirmation",
            {
              order: objID,
            }
          )
          .then(() => {
            console.log("success !!");
          })
          .catch((e) => {
            console.log("error !!");
          });
      }
    } 
    else if (searchParams.get("paymentCanceled")) {
        console.log("error")
    }
  }, [searchParams]);
```

Till here we can know whether a payment is successful or not, but whatever the case is Stripe will  route us to the success or cancel url defind in the create checkout session function and we can use  **useSearchParams** to read the value from the url.

If it is a success, I also do a post request and create an instance of **OrderAfterConfirmation** model. I hope you can understand now the reason for it.

Also do note that in our django app we created a success url and passed the **obj** as params. now here i read the same obj from url and use it to do a post request.

I will discuss Webhook confirmation from Stripe in the next part of this topic.

Find [other blogs](https://www.ranuvijay.me/blogs/topics/stripe-payment-integration-with-django-and-react-js) to complete the stripe integration

Find other blogs on [django](https://www.ranuvijay.me/blogs/categories/django)

Find other [topics](https://www.ranuvijay.me/blogs#topics) and [technical Solutions](https://www.ranuvijay.me/blogs#topics)

Find blogs on [other categories](https://www.ranuvijay.me/blogs#categories) here.


**Thank You !!**

We will create django views and understand how to send a request from React app and create a stripe checkout session, we will see the complete payment process here. 

Define django views and create stripe checkout session

Contact Me

I want to hear from you