This is a sample code which generates the button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
background-color: #04448C;
border-radius: 17px !important;
padding-left:48px !important;
padding-right: 48px !important;
border-bottom: none !important;
text-align: center !important;
padding-left:48px !important;
padding-right: 48px !important;
margin-bottom: -17px !important;
border-top: none !important;
padding-right: 48px !important;
padding-left: 48px !important;
border-bottom: none !important;
text-decoration: none !important;
width: 65px;height: 65px;
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-5">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary ipay-btn" data-toggle="modal" data-target="#ipayModal">Make Payment</button>
<div id="ipayModal" class="modal fade m-auto" role="dialog" data-keyboard="true" data-backdrop="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img src="https://payments2.ipaygh.com/app/webroot/img/LOGO-MER02797.png" class="mx-auto d-block logo">
<form action="https://manage.ipaygh.com/gateway/checkout" id="ipay_checkout" method="post" name="ipay_checkout" target="_blank">
<legend class="text-center mt-1">Make Payment</legend>
<input name="merchant_key" type="hidden" value="518322ce-440b-11e9-99e1-f23c9170642f">
<input id="merchant_code" type="hidden" value="PSYACA">
<input name="source" type="hidden" value="WIDGET">
<input name="success_url" type="hidden" value="#">
<input name="cancelled_url" type="hidden" value="#">
<input id="invoice_id" name="invoice_id" type="hidden" value="">
<div class="form-group input-group">
<input type="text" title="Name" name="extra_name" id="name" class="form-control" placeholder="First & Last Name">
<div class="form-group input-group">
<input type="tel" title="Mobile Number" name="extra_mobile" id="number" class="form-control" maxlength="10" placeholder="Contact Number">
<div class="form-group input-group">
<input type="email" name="email" id="extra_email" class="form-control" placeholder="Email">
<div class="form-group input-group">
<input type="text" name="total" class="form-control" id="total" placeholder="Amount(GH₵)">
<div class="form-group input-group">
<input class="form-control" type="text" name="description" id="description" placeholder="Description of Payment">
<button type="submit" class="btn btn-primary ipay-btn btn-block" style="padding: 8px 11px;"><strong>Pay</strong></button>
<div class="col-lg text-center mt-2">
<a href="" data-dismiss="modal" id="close">Cancel</a>
<div class="modal-footer justify-content-center ">
<img src="https://payments.ipaygh.com/app/webroot/img/iPay_payments.png" style="width: 100%;" class="img-fluid mr-auto" alt="Powered by iPay">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
Date.prototype.today = function () {
return this.getFullYear()+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +((this.getDate() < 10)?"0":"") + this.getDate();
Date.prototype.timeNow = function () {
return ((this.getHours() < 10)?"0":"") + this.getHours() +((this.getMinutes() < 10)?"0":"") + this.getMinutes() +((this.getSeconds() < 10)?"0":"") + this.getSeconds();
document.getElementById("invoice_id").value = document.getElementById("merchant_code").value+ new Date().today() + new Date().timeNow();