How to use razorpay api and integrate payment gateway

Introduction

Razorpay is a leading payment processor in India that provides end-to-end solutions for businesses and individuals. Razorpay offers a comprehensive suite of payment solutions, from payment gateway services to processing transactions and settling funds.
Some of them we will be discussing here in this article. We will be using python code here but it can be replicated in other language easily because we are not using any SDK here.
If you need SDK examples then let me know in the comment.

Example code for razorpay api here
API docs can be found here
Test card details - here

Step 1: Sign Up for a Razorpay Merchant Account

To start using the Razopay API, you'll need to sign up for a merchant account on the Razorpay website. This will provide you with the necessary credentials and access to the API documentation.
Account Registration Link - https://dashboard.razorpay.com/
Register here and reach till the test mode because our goal here it to test apis and payment flow.

Step 2: Obtain API Credentials

Once you have your merchant account set up, you'll need to obtain the API credentials. These credentials will be used to authenticate your requests to the Razorpay API.

You can get the credentials like this -

1. Go to the razorpay dashboard and choose go to test mode similar to image shown below.
   

2. Go to account-settings -> Website and app settings -> API keys -> generate the api credentials.
   You can use the direct like also.

Step 3: Set Up Your Development Environment

Before move forward, we need the development environment. We will need 2 environments.
One for Backend and other for frontend.

Here, we will be using python as backend language.
For frontend, we will be using simple HTML (not any specialized language like React or Angular).

Step 4: Understand the Razorpay API Endpoints

Razorpay API provides several endpoints that you can use to initiate payments, check payment status, and manage other aspects of your integration. It's important to understand the different endpoints and their respective parameters to ensure a smooth integration process.

1. We will be focusing here and creating an order and getting the order_id.
2. We will be using that order_id in the payment_gateway on frontend.
3. Razorpay has good api documentation on postman.

Step 5: Implement the Payment Flow

To initiate a payment using the Razorpay API, you'll need to make a POST request to the /v1/orders endpoint. This endpoint requires various parameters such as the payment amount, currency, receipt, notes.

You can see the various examples of apis here.

• In this example, we are looking only for order_api and generate the order_id.
• Token can be generated by base64(api_key:api_secret).

def create_order_id(amount:int):
    url = "https://api.razorpay.com/v1/orders"
    token = ""  # token can be created by  base64(api_key:api_secret)
    headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + token
    }

    data = {
        "amount": amount * 100,
        "currency": "INR",
        "receipt": "Receipt for amount "+str(amount),
        "notes": {
            "notes_key_1": "payment",
        }
    }

    response = requests.post(url, headers=headers, json=data)
    if response.status_code == 200:
        return response.json()
    else:
        return "Failed to create order_id"

Step 6: Integration of Payment Gateway on Frontend

We have mainly 2 options to integrate the payemnt-gateway on frontend.

You need prepare few things before integrating that payment gateway on frontend.

• RAZORPAY_ORDER_ID - order_id generated from api key
• YOUR_KEY_ID - You API key_id which has been generated earlier
• CALLBACK_URL - Callback URL if payment got success
• CANCEL_URL - Callback URL if payment failed
• YOUR_ORG_NAME - Organization Name to be displayed on payment gateway
• ORG_DESC - Organization Description to be displayed on payment gateway
• ORG_LOGO - Organzation Logo image URL
• CUSTOMER_NAME
• CUSTOMER_MOBILE
• CUSTOMER_EMAIL

To generate CALLBACK_URL and CANCEL_URL, you use this simple website to test the callback.
https://webhook.site/

1. Razorpay Hosted Integration

You can follow this simple code to integrate the payment gateway so that POST request can be send from frontend.

You can also follow this example.

<form method="POST" action="https://api.razorpay.com/v1/checkout/embedded">
  <input type="hidden" name="key_id" value="YOUR_KEY_ID"/>
  <input type="hidden" name="amount" value=1001/>
  <input type="hidden" name="order_id" value="RAZORPAY_ORDER_ID"/>
  <input type="hidden" name="name" value="YOUR_ORG_NAME"/>
  <input type="hidden" name="description" value="ORG_DESC"/>
  <input type="hidden" name="ORG_LOGO"/>
  <input type="hidden" name="prefill[name]" value="CUSTOMER_NAME"/>
  <input type="hidden" name="prefill[contact]" value="CUSTOMER_MOBILE"/>
  <input type="hidden" name="prefill[email]" value="CUSTOMER_EMAIL"/>
  <input type="hidden" name="callback_url" value="CALLBACK_URL"/>
  <input type="hidden" name="cancel_url" value="CANCEL_URL"/>
  <button>Submit</button>
</form>

2. Custom Web Integration

You can also use the Razorpay js library and do the payment integration on the your website rather than moving to other razorpay hosted website.

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "ORG_NAME", //your business name
    "description": "ORG_DESC",
    "image": "ORG_LOGO",
    "order_id": "RAZORPAY_ORDER_ID", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "callback_url": "CALLBACK_URL",
    "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
        "name": "CUSTOMER_NAME", //your customer's name
        "email": "CUSTOMER_EMAIL",
        "contact": "CUSTOMER_MOBILE" //Provide the customer's phone number for better conversion rates 
    },
    "notes": {
        "note 1": "Some notes "
    },
    "theme": {
        "color": "#3399cc"
    }
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>

3. Other Integrations -

There are other integrations on different platform like Android, ios, flutter etc which can be used. You can check the documentation here.

Step 7: Handle Payment Callbacks

After initiating a payment, Razorpya will send a callback to the specified callback URL or cancel URL. It's important to handle this callback properly to ensure a seamless payment experience. The callback will typically contain information about the payment status, transaction ID, and other relevant details.