Payment App Tutorial
Introduction
During a conversation it is sometimes useful to provide the user with a method to complete a task through a payment.
Using an app is a secure way to accomplish this task. With the app the end-user doesn't send any sensitive payment information as a message in the conversation. The user directly interacts with the payment system over HTTPS, leaving out from Tiledesk information that Tiledesk absolutely doesn't want.
In this tutorial we'll build a skeleton application to show the basic principles of building a widget app with Tiledesk.
We'll cover three basic needs:
Create and render an app to be shown and used in the conversation
Mark the app as "Terminated" changing its UI behaviour on task end, avoiding further user interaction
Interact with the current conversation, i.e. sending a message, directly from the app code
Let's start.
Create and render an app
Create a new Project
To use Tiledesk APIs or integrate your own chatbots you must sign up for a Tiledesk account: https://tiledesk.com/. Then go to the console: https://panel.tiledesk.com/v3/dashboard
After signup follow the wizard to create your first Tiledesk project. For this tutorial we chose "Widget Embedded App" as Project name:
As soon as you create the project you will be redirected to the project home (for this tutorial you can skip the last step related to the widget installation).
Create a simple chatbot
First, create a simple chatbot that will send back a conversation-embedded Application to the end-user asking them to pay for their order using credit card info. The Application will implement the (fake) payment logic and will reply to the user with a message showing the payment operation info.
Select the chatbot icon on the left menu, then press the "ADD BOT" button:
Choose "Resolution bot" as type:
Set "Shopper" (or any name you prefer) as the chatbot name and leave other settings as default. Press "CREATE BOT":
When asked, choose "Activate bot" so the new chatbot is immediately available when someone starts a conversation.
In the Shopper chatbot intents list, select the "start" intent:
Modify the start intent, adding a Quick reply button using the chatbot microlanguage (an asterisk followed by a space and the quick reply text), for example:
Save the answer and go back to the intents list. Add a new answer (+ New answer button) configured as:
Intent: "payment"
Questions: "I want to pay"
Answer: "Showing Paying app (placeholder)..."
Enable the webhook switch "Enable webhook call for this intent" so the reply will be forwarded to the backend logic added later.
Create the backend on Replit
To develop the app logic you'll need a web application endpoint for chatbot requests. This tutorial uses Repl.it to create a Node.js web application endpoint.
Develop your application logic — Let's fork!
Fork the tutorial application at: https://replit.com/@tiledesk/tiledesk-conversational-app#index.js
Use the fork button and choose a name for your app:
In your Replit app, set the APP_ENDPOINT environment variable via the left menu. Add the /apps/creditcard suffix to the Replit App endpoint to build the full APP_ENDPOINT used for the integration (for example: https://tiledesk-conversational-app.tiledesk.repl.co/apps/creditcard):
Press the Run button in the top bar; your application starts and you will see logs.
Now connect this application to your Shopper chatbot. In the Shopper bot in Tiledesk Console, enable Fullfilment and set the API_ENDPOINT to your Replit App endpoint followed by /bot, for example:
https://tiledesk-conversational-app.tiledesk.repl.co/bot
Press UPDATE BOT. You are now ready to see the embedded App in action with the chatbot.
Let's run
To run the example, choose the "Simulate visitor" button at the top of your project console. The widget test page will open. These are the main steps involved in the interaction:
You can try a live tutorial here: https://tiledesk-html-site.tiledesk.repl.co/conversation-embedded-app.html. You can get the source code directly from the Replit app.
If you have any problems, write on our Community forum: https://tiledesk.discourse.group/
Do you have suggestions on this article? Please send your feedback by email to [email protected]