Integrating Razorpay Payment Gateway in your Flask E-Commerce app

python e-commerce flask html razorpay payment gateway

Razorpay is one of the most popular payment services in India with a significant amount of customers because of its ease of use. This is a  short, crisp, and precise tutorial on integrating the service on your python-based backends like Flask or Django. For this tutorial, we will be only focusing on Flask but a very similar approach is followed in Django as well. 

Make a frontend form for accepting user inputs

I have created this Basic HTML form for storing various values that you might need to store in your database. Moreover, these fields could also be stored as a Notes json object in the order itself which would be visible on the dashboard.

 

The HTML code for the above form is given below. You can choose to remove or add whatever field you desire.

<div class="user-form">
            <form action="/pay" method="POST">
                <h2 style="text-align: center;">Please enter your details</h2>
                <input name="username" id="username" placeholder="Name" type="text" required>
                <input name="useremail" id="useremail" placeholder="Email" type="email" required>
                <!-- <input name="usercontact" id="usercontact" type="tel" placeholder="Contact Number eg. 9988887777" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" maxlength="12"  title="10-digit number required" required> -->
                <!-- <input name="usercontact" id="usercontact" required> -->
                <!-- <input name="usercontact" type="tel" placeholder="Contact" id="usercontact"> -->
                <input id="usercontact" type="tel" name="usercontact" required>
                
                <select name="field" id="field" required>
                    <option value="" disabled selected hidden>What describes you the best?</option>
                    <option value="student-tech">
                        <p>Student in Tech Field</p>
                    </option>
                    <option value="student-nontech">Student in Non-tech Field</option>
                    <option value="job-tech">Job in Tech Field</option>
                    <option value="job-nontech">Job in Non-tech Field</option>
                </select>

                <select name="prev_know" id="prev_know" required>
                    <option value="" disabled selected hidden>Do you have previous knowledge around Blockchain?</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>

                <select name="info_source" id="info_source" required>
                    <option value="" disabled selected hidden>Where did you hear about us?</option>
                    <option value="Option 1">Option 1</option>
                    <option value="Option 2">Option 2</option>
                    <option value="Option 3">Option 3</option>
                </select>

                <!-- <div class="g-recaptcha" data-sitekey="{{recaptcha_key}}"></div> -->

                <button type="submit" class="register continue">Continue</button>
            </form>
        </div>

Note that the form has been directed to /pay URL in the backend. We would next configure the code in the Flask backend to implement the real part.

Discussion