File: /home/imensosw/public_html/imenso.co/dev/chatbot-jay/make-a-payment.php
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>Millennia Chatbot</title>
<link rel='stylesheet' href='css/bootstrap.min.css' media='all' />
<link rel='stylesheet' href='css/style.css' media='all' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="all">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="chat-position">
<div class="chat-window">
<div class="chatbox_parent">
<div class="header">
<div class="logo_parent">
<div class="logo">
<img src="images/Logo.png" alt="">
</div>
<p class="milliennia">Milliennia</p>
</div>
<img class="cross" src="images/Close.svg" alt="">
</div>
<div class="chatbox_inside_body">
<div class="messege_section">
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">Make a Payment</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Please enter your email address</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">john@domain.com</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Please enter your Payment Code</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">14XXXXXXXXXXXX</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Hi John, You have a balance of $123 due on you account. Please enter the amount you want to pay</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">100</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">You want to pay $100. Please enter your 16 digit Credit Card Number.</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">4646XXXXXXXXXXX</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Please enter card expiration date</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">3/24</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Please enter your CVV number</p>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:00 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">XXX</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Please wait we are processing your payment</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:00 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Congratulations! <br> <br> You have made a payment of $100 for your Payment Code 14XXXXXXXX. Please click here to get the invoice.</p>
</div>
</div>
</div>
</div>
<div class="typebox">
<input class="typebox_input" type="text" name="" id="" placeholder="Ask something...">
<img src="images/Send.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>