File: /home/imensosw/www/imenso.co/dev/chatbot/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>
<iframe src="https://millenniapay.com/" width="100%" frameborder="0" style="height: 100vh;"></iframe>
<div class="new-chat-window">
<div class="chat-window-sml verification_form chat_box_header" id="verification_form">
<div class="header">
<div class="logo_parent">
<div class="logo">
<img src="images/Logo.png" alt="">
</div>
<p class="milliennia f-bold">Verify your details</p>
</div>
<a href="javascript:;" onclick="$('.verification_form').hide()" class="options-close chat_close_icon"><i class="fa fa-times"></i></a>
</div>
<div class="secured_box">
<div class="secured_box_info py-1 px-15">
<span class="font-small">
<img src="images/secure-icon.png" alt="secure icon" class="mr-2"></i>Secured form
</span>
<span>
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="secured_form_body py-5 px-15">
<form class="custom_form">
<div class="form-group row mt-1">
<div class="col-md-4">
<label for="">Payment Code</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control typebox_input" id="" placeholder="">
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="">Last Name</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control typebox_input" id="" placeholder="">
</div>
</div>
<div class="form-group text-right bot-options d-flex justify-content-end submit_btn">
<button type="submit" class="option-btn mt-1 mb-0">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="new-chat-window">
<div class="chat-window-sml payment_form chat_box_header" id="payment_form">
<div class="header">
<div class="logo_parent">
<div class="logo">
<img src="images/Logo.png" alt="">
</div>
<p class="milliennia f-bold">Complete your payment</p>
</div>
<a href="javascript:;" onclick="$('.payment_form').hide()" class="options-close chat_close_icon"><i class="fa fa-times"></i></a>
</div>
<div class="secured_box">
<div class="secured_box_info py-1 px-15">
<span class="font-small">
<img src="images/secure-icon.png" alt="secure icon" class="mr-2"></i>Secured form
</span>
<span>
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="secured_form_body py-2 px-15">
<div class="cards_img text-right">
<img src="images/payment-option-img.jpg" alt="image" class="img-fluid">
</div>
<form class="custom_form">
<div class="form-group">
<label for="">Card number</label>
<input type="text" class="form-control typebox_input" id="" placeholder="1234 5678 9012 3456">
</div>
<div class="form-group">
<label for="">Name on card</label>
<input type="text" class="form-control typebox_input" id="" placeholder="Ex. Richard Deo">
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Expiry Date</label>
<input type="text" class="form-control typebox_input" id="" placeholder="02 / 25">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="">CVV</label>
<input type="text" class="form-control typebox_input" id="" placeholder="***">
</div>
</div>
</div>
<div class="form-group">
<label for="">Enter Amount</label>
<div class=" input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control typebox_input" id="" placeholder="100" style="width: 85%;">
</div>
</div>
<div class="form-group text-right bot-options d-flex justify-content-end submit_btn">
<button type="submit" class="option-btn mt-1 mb-0">Submit</button>
</div>
</form>
</div>
</div>
</div>
<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 f-bold">Milliennia</p>
</div>
<div class="chat_close_icon">
<a href=""><i class="fa fa-chevron-down mr-1"></i></a>
<a href=""><i class="fa fa-times"></i></a>
</div>
</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 option_selected">
<p class="msg_from_bot"><i class="fa fa-usd mr-1"></i> Make a Payment</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:01 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">To verify your details please provide your Payment Code and Last Name in <a href="javascript:;" onclick="$('.verification_form').toggle();"><u>SECURE FORM</u></a> </p>
</div>
</div>
</div>
<div class="left_flow">
<div class="bot_msgs">
<div class="bot_msg chat_btn">
<a href="#" class="chat_action_btn"><i class="fa fa-long-arrow-left mr-2"></i>Back to main menu</a>
</div>
</div>
</div>
<div class="right_flow">
<p class="time">12:03 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">The verification form has been submitted</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:03 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Thank you for submission, we are verifying your information, please wait for a moment</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:03 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Hi John, You have a balance of $150 due on you account. Please enter the amount you want to pay by using our secured <a href="javascript:;" onclick="$('.payment_form').toggle();"><u>PAYMENT FORM</u></a></p>
</div>
</div>
</div>
<!-- <div class="left_flow">
<p class="time">12:03 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">If you have any questions about payment, we're here to help you</p>
</div>
</div>
</div>
<div class="left_flow">
<div class="bot_msgs">
<div class="bot_msg chat_btn">
<a href="#" class="chat_action_btn"><i class="fa fa-user-o mr-2"></i>Speak to an agent</a>
</div>
</div>
</div> -->
<div class="right_flow">
<p class="time">12:05 PM</p>
<div class="user_msgs">
<div class="user_msg">
<p class="msg_from_bot">Payment of $100 is paid</p>
</div>
</div>
</div>
<div class="left_flow">
<p class="time">12:05 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:06 PM</p>
<div class="bot_msgs">
<div class="bot_msg">
<img src="images/success.png" alt="icon" class="payment_success_icon">
<p class="msg_from_bot">Congratulations! <br> You have made a payment of $100 for your Payment Code 14XXXXXXXX. Thank you for the payment.</p>
</div>
</div>
</div>
<div class="left_flow">
<div class="bot_msgs">
<div class="bot_msg chat_btn">
<a href="#" class="chat_action_btn"><i class="fa fa-file-pdf-o mr-2"></i>Get your invoice</a>
<a href="#" class="chat_action_btn"><i class="fa fa-long-arrow-left mr-2"></i>Back to main menu</a>
<a href="#" class="chat_action_btn"><i class="fa fa-window-close-o mr-2"></i>End chat</a>
</div>
</div>
</div>
<div class="left_flow">
<div class="bot_msgs">
<div class="bot_msg">
<p class="msg_from_bot">Thank you for using Milliennia chat service, We're always happy to help you. <br> <i class="fa fa-smile-o ml-2 single_icon"></i></p>
</div>
</div>
</div>
</div>
<div class="typebox">
<input class="typebox_input form-control" 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>