<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<div class="row">
<div class="col-xs-6">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span>
Shopping Cart</h5>
</div>
</div>
</div>
</div>
<form method="post" id="payment_form">
<div class="panel-body">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive" src="http://dummyimage.com/100x70/000/fff.gif" />
</div>
<div class="col-xs-4">
<h4 class="product-name">
<strong>Product Name</strong>
</h4>
<h4>
<small>Product description</small>
</h4>
</div>
<div class="col-xs-6">
<div class="col-xs-6 text-right">
<h6>
<strong>25.00 <span class="text-muted">x</span>
</strong>
</h6>
</div>
<div class="col-xs-4">
<input type="text" class="form-control input-sm" value="1" />
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-link btn-xs">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-2">
<img class="img-responsive" src="http://dummyimage.com/100x70/000/fff.gif" />
</div>
<div class="col-xs-4">
<h4 class="product-name">
<strong>Product Name</strong>
</h4>
<h4>
<small>Product description</small>
</h4>
</div>
<div class="col-xs-6">
<div class="col-xs-6 text-right">
<h6>
<strong>25.00 <span class="text-muted">x</span>
</strong>
</h6>
</div>
<div class="col-xs-4">
<input type="text" class="form-control input-sm" value="1" />
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-link btn-xs">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="row text-center">
<div class="col-xs-9">
<h4 class="text-right">Total <strong>$50.00</strong>
</h4>
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-success btn-block">
Checkout
</button>
</div>
</div>
</div>
<!-- BEGIN SINGULAR BILLPAY HIDDEN FIELDS -->
<!-- MANDATORY CONSTANT FIELDS -->
<!-- SingularPayments assigned PartnerKey -->
<input type="text" name="bpPartnerKey" id="bpPartnerKey" value="mobile-api-user-login">
<!-- SingularPayments assigned PartnerId -->
<input type="text" name="bpPartnerId" id="bpPartnerId" value="localhost">
<input type="text" name="bpMobilePay" id="bpMobilePay" value="widget">
<!-- MANDATORY FIELDS SET FROM CART -->
<input type="text" name="bpAmount" id="bpAmount" value="50">
<input type="text" name="bpPayeeName" id="bpPayeeName" value="John Doe">
<!-- Optional Fields -->
<input type="text" name="bpPartnerOrderId" id="bpPartnerOrderId" value="orderid-1234567">
<input type="text" name="bpPayeeId" id="bpPayeeId" value="customerid-1234567">
<!-- include script file to open iframe -->
<script src="https://devapi.singularbillpay.com/scripts/singularbillpay.js?ver=4"></script>
<!-- END OF SINGULAR BILLPAY HIDDEN FIELDS -->
</form>
</div>
</div>
</div>
</div>
</body>
</html>
EASY STEPS TO INTGRATE WITH SINGULAR BILLPAY
INCLUDE THIS CODE BLOCK IN YOUR FINAL PAYMENT PAGE AND YOU ARE ALL DONE
<!-- BEGIN SINGULAR BILLPAY HIDDEN FIELDS -->
<!-- MANDATORY CONSTANT FIELDS -->
<!-- SingularPayments assigned PartnerKey -->
<input type="text" name="bpPartnerKey" id="bpPartnerKey" value="mobile-api-user-login">
<!-- SingularPayments assigned PartnerId -->
<input type="text" name="bpPartnerId" id="bpPartnerId" value="localhost">
<input type="text" name="bpMobilePay" id="bpMobilePay" value="widget">
<!-- MANDATORY FIELDS SET FROM CART -->
<input type="text" name="bpAmount" id="bpAmount" value="50">
<input type="text" name="bpPayeeName" id="bpPayeeName" value="John Doe">
<!-- Optional Fields -->
<input type="text" name="bpPartnerOrderId" id="bpPartnerOrderId" value="orderid-1234567">
<input type="text" name="bpPayeeId" id="bpPayeeId" value="customerid-1234567">
<!-- include script file to open iframe -->
<script src="https://devapi.celeripay.com/scripts/singularbillpay.js?ver=3"></script>
<!-- END OF SINGULAR BILLPAY HIDDEN FIELDS -->
-- APPROVED --
Date 1/5/2017 3:08:22 AM
Payment Type Credit Card
Name Binod K Nair
Account Number 123456
Transaction Amount $123.45
Surcharge Amount $3.09
Authorization Amount 126.54
Authorization Code 004500379701
Card Holder Name Binod K Nair
Card Number 1111
Response Message Code Approval
I AGREE TO PAY THE ABOVE AMOUNT ACCORDING TO MY CARD HOLDER AGREEMENT
Thank you for your payment. Please note it may take 3-5 business days for your payment to post to your account.
Powered by Singular BillPAY