This year(2021) I have decided to deepen my knowledge in SAP Cloud Platform Area (Now SAP BTP?). One way to increase knowledge is by writing a blog post, don’t you agree? So I come across this challenge SAP Conversational AI Tutorial Challenge 2021 and decided to give it a try and here I am with this post 🙂
In this blog post, I will show how I managed to create an SAP Conversation AI bot with the help of
- SAP CAI(of course),
- Node JS Webhook(deployed in BTP),
- HTML5 application(again deployed in BTP)
- SAP CAP(Decided not to write any blog post without it :P)
- Paytm – India’s no 1 payment app(they say)
Note: This is a very simple integration 😉
Example Use Case
We will create an SAP Conversation AI bot where users can query for different books and they can pay for it using Paytm and get a successful response with the transaction id. Simple right? It is!!, let’s see it action.
Let’s see a small demo first
1. Create an OData service using CAP (Not mandatory)
This will be the easiest step of all and an optional step, you can use any other OData service. Just open the Business Application studio and create a very basic Books app, it will be created by default if you use the template. Follow the below step-by-step tutorial and deploy it to BTP.
2. Create an SAP Conversational AI BOT
First, create a bot using the below URL:
Our bot will have one intent & one entity initially.
We will add the above expression for the bot to detect if the user is searching for any books to buy.
In order to detect the book if the user enters or if they select to buy, we need to create a bookid entity.
Let’s populate the data using the Fetch VIA Service API..
After this, the Bot can detect the books.
Now, let’s create 2 skills.
This skill will get triggered only if the get-books intent is detected.
Now we will add a requirement and set the bookid to memory.
and we will edit the replies that if the bookid is not available, we will fetch the list of available books and show it to the user.
for this. First, we will do an API call to fetch the list of available books, using the CAP Odata service.
After that, we will show a message and create a custom list using the data fetched from the above service.
Now we will add the actions:
First, we will set a new memory variable by passing the bookid value to it. later we will clear the bookid. Why I did this is, if the bookid is present and if the user requests for books again, it is not fetching them because of the bookid check in the requirements tab.
After that, we will add the buttons, and on click of “Yes”, we will trigger the 2nd skill paytm-payment, we will do it after creating the Paytm payment gateway web service.
Handling Payment by creating an MTA App
This is one of the simplest integrations I’ve ever done. The APIs are easier to use and they have a NODE JS SDK!!!
I’ve created an MTA Project, which deploys 2 apps
- NodeJS Web Hook in BTP (app folder)
- HTML5 app in BTP (paymentgateway folder)
Node JS WebHook:
I’ve created this nodejs webhook to interact with the Paytm gateway.
For that, let’s first create a Paytm account and create the Test API keys as shown below:
Now that we have the merchant id and key, we will create an express.js app to handle the request from SAP CAI to complete the payment.
SAP CAI will call the below webhook route(…/getURLPOST), which will return the html5 app, that opens the Paytm gateway for completing the payment.
you can read the memory variables from SAP Conversation AI in the below “req” variable, I am not doing that, I am just hardcoding.
(you can observe that I am passing the callback URL above, which will be called when the Paytm transaction is completed and I am handling it in the nodejs webhook itself instead from the HTML5 app 😀 )
I used Paytm SDK to get the transaction token, then I will create a URL with that token. The URL here is the HTML5 app that we will deploy along with this nodejs webhook. (it is not needed, I could have handled it in this express js app itself, but I just wanted to try that and did it 😉 )
You can see in the above code, I am returning the content type button, in which one button has the HTML5 app URL.
in the Conversational AI, it looks like below:
you can check the above git hub url for more details.
When the transaction is completed, the callback URL will be called, where we can read the transaction-related parameters. Here I am using the SAP Conversational AI API to send the message to the User that the transaction is completed.
Now let’s move to the Payment gateway page, here,
HTML5 Payment gateway page:
We will just use the URL provided by Paytm and the transaction token generated in our webhook to show the Paytm page as shown below:
rest is taken care of by Paytm.
Now build the MTA file & deploy it to SAP BTP.
Afterward, you can find the html5 app below:
and nodejs app in dev space applications, from where you can get the URLs.
now let’s go back to paytm-payment skill and integrate the above webhook.
Back to the Skill: paytm-payment
You don’t need to do much here, just call the webhook.
That’s it, now we can test the app. You can check the demo above to find out how it works.
Thanks for reading this!! I am still learning, so feel free to share your thoughts, suggestions & correct me if I was wrong anywhere 🙂