## Basic Setup ( Django and React ) for Stripe Payment Integration

Since we have React as our frontend system we will use **Django-Rest-Framework** to generate APIs and use **Axios** from our React app to make APIs  calls.

We will for now look how to complete the stripe payment flow with **Webhooks** in our local system ( localhost ) and later see how to move to production. 

I assume you have created a Stripe accound and have enabled the **Test Mode** and also you can see your public and private keys of test version. We will need these keys later in our project.

I also assume you are experienced enough to use Django-rest-framework and React and can interact with these two systems using Apis.

**Backend setup** -
- Python - 3.2.0
- Django - 4.1.3
- Django-Rest-Framework - 3.14.0
- Django-Cors-Headers - 3.13.0


**Frontend Setup** -
- React - 18.2.0
- React-Router-Dom - 6.4.3
- Axios - 1.2.0

### Stripe Configurations -

**Backend** - 

```
pip install stripe
```

**Frontend** -
We will need to install these two stripe package in our React Application. We can put this two in our **dependencies** and run npm install command.

Add this in dependencies   in packages.json file
```
"@stripe/react-stripe-js": "^1.16.4"
"@stripe/stripe-js": "^1.46.0" 
```
and then we can do 

```
npm install
```
to install these two packages.


### My Approach -

- Initiate a payment from our React App
- Create Stripe Payment Session from django app
- Fill card and other required detail on stripe checkout form
- Check the Status of payment from our React App
- Confirm payment using **Webhooks** in our Django app

I will cover each topic in this tutorial one-by-one. You can follow this topic and find a blog related to each topic. 

You can also find details on [stripe-document](https://stripe.com/docs/checkout/quickstart). I will be using the **Stripe Prebuilt Checkout page** in this tutorial to accept payments. 

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 !!**



Here we will se the packages and detail of setting up of stripe in our django and react app. Stripe provide the test mode and we will setup and do everything in the same mode. 

Overview and project setup for stripe payment integration

Contact Me

I want to hear from you