In this document, we will learn about how to integrate the razor payment gateway into a YM ChatBot.
Step 1: Go to Razor Payment Website and create an Account https://razorpay.com/.
Step 2: Login to your account and Go to the Dashboard of RazorPay.
Step 3: By Default, you will be in Test Mode but make sure you are in it. We would be using Test Mode as of now.
NOTE: There are 2 modes in Razor Payment Gateway:
Test Mode: This mode is for testing and for developers who are just getting started in Razor Payment Integration. Test Mode is completely Free of Charge. No real charges will be made, even if we give our valid card details in the Razor Payment Gateway Page.
Live Mode: As the name suggests, In the Live Mode, we would be charged for real. In order to work on Live Mode, we have to give our bank account and KYC Details.
Step 4: In the Dashboard, Go to Settings and click on API Keys Tab. Generate a New Key. Click on the Download Key Details and save the key details in a safe location. Click Ok.
Only when you generate a new API key for the first time, you can see the Key Secret value. So make sure to save the key details in a safe accessible place.
Step 5: For the API request of Razorpay Payment, we have to use Basic Auth Authorization.
To get the Basic Auth Authorization value, we are gonna use the POSTMAN(v8.0.6) application.
Open POSTMAN application, click on New -> Collection and create a collection with a name.
Click on New -> Request. Give a Request Name and save it to the collection which we created above.
Click on Authorization Tab, click Type and select Basic Auth.
Open the downloaded file which contains your API keys.
Give Key Id in Username Textbox and Key Secret in Password Textbox.
After giving the values in the username and password textboxes, go to Headers tab.
If No Headers key value pairs are visible, Click on the hidden eye option and you would see all the key value pairs in the Headers.
Click on the value of the Authorization key and Copy it.
Step 6: Now let's go to the Developer Section of our ChatBot in the YM Platform.
The Recommended Step to Integrate a Payment Gateway is after the Step in which we get the cart details of the products which users want to buy from us.
Step 7: Let’s create a New Function for the Razor Payment Gateway Integration API Code.
Step 8: We are going to use a POST request an API call to the Razor Payment Gateway with the required Details as below :
- We are creating an object with method type, url, headers and data.
- Then, We are creating the required key value pairs (i.e) Authorization Value and Content-Type for the headers object.
- Then, We are passing the required data in the key value pair format to the data object.
- Then, We are passing that object which contains all the above information to the app.axios() method and we are storing this result in a variable.
- To know about axios, go through this link : Axios Blog
- Our YM Platform does not support Shorthand methods for Axios HTTP requests such as axios.get(), axios.post() etc.
- Once the above API Call is Successful, we would get some objects in the result variable.
- If we want to see or access the data in the result variable, we have to use .data along with the result variable.
- The payment link will be in the key called short_url. So, To Access it, we use .data.short_url along with the result variable.
- We access it and show it to the user using app.sendTextMessage().
- Now, The User has to click on this short_url. This will take them to the Razor Payment Gateway Page where they can complete the Payment via Debit/Credit Cards, Net Banking, UPI etc.
STEP 9: We have to configure a Webhook so that upon Successful completion of the Payment, we can save the User’s Order Details in our DataBase and show some response to the user such as
YOUR ORDER HAS BEEN PLACED SUCCESSFULLY !.
To learn about Webhooks and the difference between them and API, I suggest you go through these medium articles:
STEP 10: We have to configure the Webhook in the Razor Payment Gateway Dashboard. So, Go to Razor Payment and Sign in using your login credentials. Go to the Dashboard page.
STEP 11: Click on the Settings option and click on the Webhooks tab. Click on the Add New Webhook button.
STEP 12: In the Webhook URL, give the following URL: https://app.yellowmessenger.com/integrations/razorpay
STEP 13: For more or added security, you can use a Secret but this is Optional.
STEP 14: In the Alert Email, You can give your email address.
STEP 15: In the Active Events, Click on the Invoice Events checkbox so that all the sub events in it get clicked.
STEP 16: Click on Create Webhook Button. Once this is Successful, For All the types of Payment Events which were mentioned in the Webhook, an event would get Triggered in our YM Chatbot.
STEP 17: When the Invoice Paid Event gets triggered by the webhook defined in the razor pay dashboard, we want to capture it and then display an appropriate message to the user. To do this, we use the following code in the main function on the developer section of our chatbot :
When the payment is successfully completed, the webhook we created in the razor pay dashboard gets triggered and it sends back the event code
razorpay-paymentto our chatbot.
So, If an event code of
razorpay-paymentoccurs with the event’s data’s status as
paidand if the amount paid is greater than 0 INR (since we are using the smallest unit of the given currency i.e Paise for the amount value, we are dividing it with 100 for converting back to INR ), we are sending a Text Message to the user such as ‘Payment is Successful’.
As Mentioned above in the first NOTE, inside this function, we can store the user’s cart details to the DataBase as the Payment is Successfully made.