Online Checkout

What is Online Checkout
iPay's Online checkout makes it possible to integrated with a line of code thereby making it the easiest way to start accepting payments.
With Online Checkout,
 we do all the hard work so you don't need much of a technical knowledge to integrate .😉
​
This generates the HTML code you'll need to copy and paste into your website on your website builder or CMS to start accepting only mobile money payments on your website.
A button is generated on your website which pops up a payment form when clicked.
Sample Payment Button
Sample generated button
Sample Generated Form and Checkout Page.
Terminologies
Success URL
The page to which iPay will redirect the user after user completes the iPay checkout process.
⛔
 Please note that this does not mean that payment has been received!
Cancel URL
The URL your customers should be taken to when they cancel their payment.
Steps to generate button 
Login to your iPay merchant account.
Click on Sales Channels(Left side bar)
Click on Online Checkout
Upload a logo, fill all necessary inputs and click on generate.
This generates a button with a code on your right.
Copy the code and place it on your website.
Sample generated code
1
This is a sample code which generates the button.
2
​
3
<div>
4
	<html class="fonts">
5
		<head>
6
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
7
			<style type="text/css">
8
				.fonts{
9
								font-size: 12.5px;
10
							}
11
				.ipay-btn{
12
										background-color: #04448C;
13
										border-color: #04448C;
14
										border-radius: 17px !important;
15
									}
16
				.modal{
17
								width: 27% !important;
18
							}
19
				.modal-header{
20
											padding-left:48px !important;
21
											padding-right: 48px !important;
22
											border-bottom: none !important;
23
											text-align: center !important;
24
											}
25
				.modal-footer{
26
											height: 120px;
27
											padding-left:48px !important;
28
											padding-right: 48px !important;
29
											margin-bottom: -17px !important;
30
											border-top: none !important;
31
											}
32
				.modal-body{
33
										margin-bottom: -25px;
34
										padding-right: 48px !important;
35
										padding-left: 48px !important;
36
										border-bottom: none !important;
37
										margin-top: -27px;
38
										}
39
				#close:hover{
40
											text-decoration: none !important;
41
										}
42
				.logo{
43
							width: 65px;height: 65px;
44
							}
45
			</style>
46
		</head>
47
		<body>
48
			<div class="container">
49
				<div class="row">
50
						<div class="col-lg-3 col-md-3 col-xs-3 col-sm-5">
51
						<div class="input-group-prepend">
52
							<button type="button" class="btn btn-primary ipay-btn" data-toggle="modal" data-target="#ipayModal">Make Payment</button>
53
						</div>
54
					</div>
55
				</div>
56
				<div id="ipayModal" class="modal fade m-auto" role="dialog" data-keyboard="true" data-backdrop="true">
57
					<div class="modal-dialog">
58
						<div class="modal-content">
59
							<div class="modal-header">
60
								<img src="https://payments2.ipaygh.com/app/webroot/img/LOGO-MER02797.png" class="mx-auto d-block logo">
61
							</div>
62
							<form action="https://manage.ipaygh.com/gateway/checkout" id="ipay_checkout" method="post" name="ipay_checkout" target="_blank">
63
								<div class="modal-body">
64
									<legend class="text-center mt-1">Make Payment</legend>
65
									<input name="merchant_key" type="hidden" value="518322ce-440b-11e9-99e1-f23c9170642f">
66
									<input id="merchant_code" type="hidden" value="PSYACA">
67
									<input name="source" type="hidden" value="WIDGET">
68
									<input name="success_url" type="hidden" value="#">
69
									<input name="cancelled_url" type="hidden" value="#">
70
									<input id="invoice_id" name="invoice_id" type="hidden" value="">
71
									<div class="row">
72
										<div class="col-lg">
73
											<div class="form-group input-group">
74
												<input type="text" title="Name" name="extra_name" id="name" class="form-control" placeholder="First & Last Name">
75
											</div>
76
										</div>
77
									</div>
78
									<div class="row">
79
										<div class="col-lg">
80
											<div class="form-group input-group">
81
												<input type="tel" title="Mobile Number" name="extra_mobile" id="number" class="form-control" maxlength="10" placeholder="Contact Number">
82
											</div>
83
										</div>
84
									</div>
85
									<div class="row">
86
										<div class="col-lg">
87
											<div class="form-group input-group">
88
												<input type="email" name="email" id="extra_email" class="form-control" placeholder="Email">
89
											</div>
90
										</div>
91
									</div>
92
									<div class="row">
93
										<div class="col-lg">
94
											<div class="form-group input-group">
95
												<input type="text" name="total" class="form-control" id="total" placeholder="Amount(GH₵)">
96
											</div>
97
										</div>
98
									</div>
99
									<div class="row">
100
										<div class="col-lg">
101
											<div class="form-group input-group">
102
												<input class="form-control" type="text" name="description" id="description" placeholder="Description of Payment">
103
											</div>
104
										</div>
105
									</div>
106
									<div class="row">
107
										<div class="col-lg">
108
											<button type="submit" class="btn btn-primary ipay-btn btn-block" style="padding: 8px 11px;"><strong>Pay</strong></button>
109
										</div>
110
									</div>
111
									<div class="row">
112
										<div class="col-lg text-center mt-2">
113
											<a href="" data-dismiss="modal" id="close">Cancel</a>
114
										</div>
115
									</div>
116
								</div>
117
								<div class="modal-footer justify-content-center ">
118
									<div class="row">
119
										<div class="col-lg">
120
											<img src="https://payments.ipaygh.com/app/webroot/img/iPay_payments.png" style="width: 100%;" class="img-fluid mr-auto" alt="Powered by iPay">
121
										</div>
122
									</div>
123
								</div>
124
							</form>
125
						</div>
126
					</div>
127
				</div>
128
			</div>
129
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
130
			<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
131
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
132
			<script type="text/javascript">
133
				(
134
					function(){
135
						Date.prototype.today = function () { 
136
							return  this.getFullYear()+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +((this.getDate() < 10)?"0":"") + this.getDate();
137
						};
138
						Date.prototype.timeNow = function () { 
139
							return ((this.getHours() < 10)?"0":"") + this.getHours() +((this.getMinutes() < 10)?"0":"") + this.getMinutes() +((this.getSeconds() < 10)?"0":"") + this.getSeconds();
140
						};
141
						document.getElementById("invoice_id").value = document.getElementById("merchant_code").value+ new Date().today() + new Date().timeNow();
142
						}
143
				)();
144
			</script>
145
		</body>
146
	</html>
147
</div>
Copied!
​
​
Integrating iPay - Previous
Online and On Mobile
Payment Link
Last modified 2yr ago
Copy link
Contents
What is Online Checkout
Terminologies
Steps to generate button
Sample generated code