# 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.

{% hint style="info" %}
With Online Checkout,\
&#x20;we do all the hard work so you don't need much of a technical knowledge to integrate .:wink:
{% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

A button is generated on your website which pops up a payment form when clicked.

#### Sample Payment Button

![Sample generated button](https://2963751852-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lvq09DA_8pWx4o82BIU%2F-LvujlvCkW77zTb8OPoI%2F-Lvun_G7iGpUT9z56MVf%2Fscreen-15.49.25%5B12.12.2019%5D.png?alt=media\&token=d0bdcf26-ed4e-464a-8508-14451e31f69b)

<div align="center"><img src="https://2963751852-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lvq09DA_8pWx4o82BIU%2F-M5unfFJwWh3967K-neF%2F-M5uoXo20TufIAClZCr7%2Fcheckout-dev.svg?alt=media&#x26;token=85a19009-9e24-4ca2-8ab8-6b164371f438" alt="Sample Generated Form and Checkout Page."></div>

### Terminologies

{% hint style="success" %}
**Success URL**\
The page to which iPay will redirect the user after user completes the iPay checkout process.\
:no\_entry: **Please note that this does not mean that payment has been received!**
{% endhint %}

{% hint style="danger" %}
**Cancel URL**\
The URL your customers should be taken to when they cancel their payment.
{% endhint %}

### Steps to generate button&#x20;

* [x] Login to your iPay merchant account.
* [x] Click on Sales Channels(Left side bar)
* [x] Click on Online Checkout
* [x] Upload a logo, fill all necessary inputs and click on generate.
* [x] This generates a button with a code on your right.
* [x] Copy the code and place it on your website.

### Sample generated code

```markup
This is a sample code which generates the button.

<div>
	<html class="fonts">
		<head>
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
			<style type="text/css">
				.fonts{
								font-size: 12.5px;
							}
				.ipay-btn{
										background-color: #04448C;
										border-color: #04448C;
										border-radius: 17px !important;
									}
				.modal{
								width: 27% !important;
							}
				.modal-header{
											padding-left:48px !important;
											padding-right: 48px !important;
											border-bottom: none !important;
											text-align: center !important;
											}
				.modal-footer{
											height: 120px;
											padding-left:48px !important;
											padding-right: 48px !important;
											margin-bottom: -17px !important;
											border-top: none !important;
											}
				.modal-body{
										margin-bottom: -25px;
										padding-right: 48px !important;
										padding-left: 48px !important;
										border-bottom: none !important;
										margin-top: -27px;
										}
				#close:hover{
											text-decoration: none !important;
										}
				.logo{
							width: 65px;height: 65px;
							}
			</style>
		</head>
		<body>
			<div class="container">
				<div class="row">
						<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>
					</div>
				</div>
				<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">
							</div>
							<form action="https://manage.ipaygh.com/gateway/checkout" id="ipay_checkout" method="post" name="ipay_checkout" target="_blank">
								<div class="modal-body">
									<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="row">
										<div class="col-lg">
											<div class="form-group input-group">
												<input type="text" title="Name" name="extra_name" id="name" class="form-control" placeholder="First & Last Name">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg">
											<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>
										</div>
									</div>
									<div class="row">
										<div class="col-lg">
											<div class="form-group input-group">
												<input type="email" name="email" id="extra_email" class="form-control" placeholder="Email">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg">
											<div class="form-group input-group">
												<input type="text" name="total" class="form-control" id="total" placeholder="Amount(GH₵)">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg">
											<div class="form-group input-group">
												<input class="form-control" type="text" name="description" id="description" placeholder="Description of Payment">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg">
											<button type="submit" class="btn btn-primary ipay-btn btn-block" style="padding: 8px 11px;"><strong>Pay</strong></button>
										</div>
									</div>
									<div class="row">
										<div class="col-lg text-center mt-2">
											<a href="" data-dismiss="modal" id="close">Cancel</a>
										</div>
									</div>
								</div>
								<div class="modal-footer justify-content-center ">
									<div class="row">
										<div class="col-lg">
											<img src="https://payments.ipaygh.com/app/webroot/img/iPay_payments.png" style="width: 100%;" class="img-fluid mr-auto" alt="Powered by iPay">
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<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">
				(
					function(){
						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();
						}
				)();
			</script>
		</body>
	</html>
</div>
```
