Suppose you want to sell your product online with a secure payment mode then here is the solution that you can use. The thing we are talking about is a PayPal buy now button.

You can use it simply, only you have to generate the code for the button and place it in your website to collect the online payment in a secure way.

Actually the button which is generated is not secure enough to collect the payment, since user can alter the amount if he/she have some coding skills.

So we bring up to you a revised code using which you can add your own product (to be sold) and its detail. After few settings you just have to generate the code and you will be all set to sell your products online and to run your online ecommerce website as well..

 


Watch the live demo or download code from the below given links

sell-online-product-and-collect-payment


Below is the explanation of the files that are used in the project.

Controllers : Products.php

It is a controller file that contains all necessary php functions in it.


<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Products extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('product_model');
$this->load->helper(array('url', 'html', 'form'));
}
public function index() {
$this->load->view('add_products');
}
public function save_products() {
$img_fullpath = base_url()."uploads/default_product.png";
if (!empty($_FILES)) {
$filename = time() . ".png";
$target_dir = "uploads/";
$target_file = $target_dir . $filename;
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(!empty($_FILES["up_file"]["name"])){
$check = getimagesize($_FILES["up_file"]["tmp_name"]);
}
else{
$check = 0;
}
if ($check !== false) {
// echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
// Check if file already exists
if (file_exists($target_file)) {
echo $target_file . "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["up_file"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["up_file"]["tmp_name"], $target_file)) {

$img_fullpath = base_url() . "uploads/" . $filename;
// echo "The file ". basename( $_FILES["up_file"]["name"]). " has been uploaded.";
// echo $img_fullpath;
} else {
// echo "Sorry, there was an error uploading your file.";
}
}
//Get post value and make product array
$products = array(
'product_name' => $this->input->post('product_name'),
'product_price' => $this->input->post('product_price'),
'product_currency' => $this->input->post('product_currency'),
'merchant_email' => $this->input->post('merchant_email'),
'product_description' => $this->input->post('product_description'),
'payment_mode' => $this->input->post('payment_mode'),
'product_image' => $img_fullpath
);
$result = $this->product_model->inser_product($products);
if ($result === TRUE) {
echo "TRUE";
} else {
echo "FALSE";
}
}
}
//show_all function get all product details and send to show_all_products view
public function show_all() {

$data['query'] = $this->product_model->get_all_products();
$this->load->view('show_all_products', $data);
}
//checkout function load checkout view
public function checkout() {
$data['product_id'] = base64_encode($this->input->post('product_id'));

$this->load->view('checkout', $data);
}
//save billing info insert billing details value on db
public function save_billing_info() {
$product_id = base64_decode($this->input->post('product_id'));
$full_name = $this->input->post('full_name');
$email_address = $this->input->post('email_address');
$billing_info =array(
'product_id'=>$product_id,
'full_name'=> $full_name,
'email_address'=>$email_address
);
$result_bill = $this->product_model->insert_billing_details($billing_info);
$result = $this->product_model->get_product_by_id($product_id);
echo json_encode($result);
}
//This function get value for update products
public function get_value_for_update() {
$product_id = $this->input->post('product_id');
$result = $this->product_model->get_product_by_id($product_id);
echo json_encode($result);
}
//Update product
public function update_product() {
$img_fullpath = '';
if (!empty($_FILES)) {
$filename = time() . ".png";
$target_dir = "uploads/";
$target_file = $target_dir . $filename;
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(!empty($_FILES["up_file"]["name"])){
$check = getimagesize($_FILES["up_file"]["tmp_name"]);
}
else{
$check = 0;
}
if ($check !== false) {
// echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
// Check if file already exists
if (file_exists($target_file)) {
echo $target_file . "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["up_file"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
// echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["up_file"]["tmp_name"], $target_file)) {

$img_fullpath = base_url() . "uploads/" . $filename;
// echo "The file ". basename( $_FILES["up_file"]["name"]). " has been uploaded.";
// echo $img_fullpath;
} else {
// echo "Sorry, there was an error uploading your file.";
}
}
$product_id = $this->input->post('product_id');
$products_n = array(
'product_name' => $this->input->post('product_name'),
'product_price' => $this->input->post('product_price'),
'product_currency' => $this->input->post('product_currency'),
'merchant_email' => $this->input->post('merchant_email'),
'product_description' => $this->input->post('product_description'),
'payment_mode' => $this->input->post('payment_mode'),
'product_image' => $img_fullpath
);

$products_o = array(
'product_name' => $this->input->post('product_name'),
'product_price' => $this->input->post('product_price'),
'product_currency' => $this->input->post('product_currency'),
'merchant_email' => $this->input->post('merchant_email'),
'product_description' => $this->input->post('product_description'),
'payment_mode' => $this->input->post('payment_mode'),
'product_image' => $this->input->post('import_file_text')
);

if (empty($img_fullpath)) {
$product_val = $products_o;
} else {
$product_val = $products_n;
}

$result = $this->product_model->update_product($product_id,$product_val);
if ($result === TRUE) {
echo "TRUE";
} else {
echo "FALSE";
}
}
}
public function delete_product(){
$product_id = $this->input->post('product_id');
$result = $this->product_model->delete_product($product_id);

echo $result;
}
//notification call when user checkout from paypal
public function notification(){
$this->load->view('notification');
}
}
?>

 

Models : Product_model.php

It is a model file that contains all database connectivity functions and operations.


<?php
class product_model extends CI_Model {
//This function use for insert product info
public function inser_product($products) {
$this->db->insert('product', $products);
return TRUE;
}
//insert billing details
public function insert_billing_details($billing_info){
$this->db->insert('customer_details', $billing_info);
return TRUE;
}
//This function use for getting all products details
public function get_all_products() {
$this->db->select('*');
$this->db->from('product');
$query = $this->db->get();

return $query->result();
}
//Get product data by id
public function get_product_by_id($id){
$this->db->select('*');
$where = "(id='$id')";
$this->db->where($where);
$query = $this->db->get('product');
$data = $query->result();
foreach ($data as $value){
$pro =array(
'id'=>$value->id,
'product_name'=>$value->product_name,
'product_price'=>$value->product_price,
'product_currency'=>$value->product_currency,
'product_description'=>$value->product_description,
'merchant_email'=>$value->merchant_email,
'product_image'=>$value->product_image,
'payment_mode'=>$value->payment_mode,
);
}
return $pro;
}
//update product data
public function update_product($product_id,$product_val){
$this->db->where('id', $product_id);
$result = $this->db->update('product', $product_val);
if ($result == 1) {
return TRUE;
} else {
return FALSE;
}
}
//Delete product data by id
public function delete_product($product_id){
$this->db->where('id', $product_id);
$this->db->delete('product');
return TRUE;
}
}
?>

 

Views : Add_products.php

It is a view file that contains the form code which is used for adding new products.


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Add Product</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/global.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/fg-main-style.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/popup_style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style_code.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/loader.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-latest.js"></script>
<script type='text/javascript' src='<?php echo base_url(); ?>js/jquery-1.9.1.js'></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validate_by_text.js"></script>

</head>
<body>
<div id="main-wrapper" class="container-fluid">
<!-- Header Section -->
<div class="row">
<div class="main-header">
<div class="col-xs-3 col-sm-3 col-md-3">
<a href="#" class="logo"><img src="<?php echo base_url(); ?>images/logo.png" alt="Formget Fugo"></a>
</div>
<div class="col-xs-9 col-sm-9 col-md-9">

</div>
<div class="fg-clear"></div>
<ul class="main-tab">

<li><a class="active" href="<?php echo base_url(); ?>index.php/products/">Add Products</a></li>
<li id="nomargin"><a href="<?php echo base_url(); ?>index.php/products/show_all">Show Products</a></li>
</ul>
<div class="fg-clear"></div>
</div>
</div>

<!-- Middle Section -->
<div class="row main-container blue-bg">
<div style="padding:0 100px;">
<div class="col-md-12 nopadding">
<div id="right-section-wrapper"style="border-right: 1px solid #CBE5F4;">
<div class="top-section-heading">
<h2>Add Product</h2>
<h4>Add Your Product Name,Price, Currency type and Merchant Email Id</h4>
</div>
<div class="clearfix"></div>
<div id="success_msg">
<h2>Product Added Successfully...!!</h2>

<div id="btn_con"><a href="<?php echo base_url() ?>index.php/products/show_all" class="fg-btn orange medium inline">See All Products</a></div><a id="msg_close" class="close icon-cross2" href="javascript:void(0)"></a>

</div>
<div class="fg-parent-box">

<div class="fg-box first">
<p class="fg-box-header relative rl-pad">Product Information</p>
<div class="fg-inner-box rl-pad">
<form id="form" class="myForm" method="POST" enctype="multipart/form-data">
<div class="fg-row">
<label class="block fg-label">Product Name</label>
<input id="product_name" type="text" class="fg-input text fg-fw" name="product_name" value="">
<p id= "product_name" class="fg-help red"></p>
</div>
<div class="fg-row">
<div class="col-md-8 nopadding">
<label class="block fg-label">Product Price</label>
<input id="product_price" type="number" step="0.01" min="0" class="fg-input text fg-fw" name="product_price" value="">
<p id ="product_price" class="fg-help red"></p>
</div>
<div class="col-md-4 ">
<label class="block fg-label">Currency</label>
<select id="product_currency" class="fg-select fg-fw" name="product_currency">
<option value="USD" title="$" >USD</option>
<option value="AUD" title="$" >AUD</option>
<option value="BRL" title="R$" >BRL</option>
<option value="GBP" title="£" >GBP</option>
<option value="CAD" title="$" >CAD</option>
<option value="CZK" title="">CZK</option>
<option value="DKK" title="">DKK</option>
<option value="EUR" title="€">EUR</option>
<option value="HKD" title="$">HKD</option>
<option value="HUF" title="">HUF</option>
<option value="ILS" title="₪">ILS</option>
<option value="JPY" title="¥">JPY</option>
<option value="MXN" title="$">MXN</option>
<option value="TWD" title="NT$">TWD</option>
<option value="NZD" title="$">NZD</option>
<option value="NOK" title="">NOK</option>
<option value="PHP" title="P">PHP</option>
<option value="PLN" title="">PLN</option>
<option value="RUB" title="">RUB</option>
<option value="SGD" title="$">SGD</option>
<option value="SEK" title="">SEK</option>
<option value="CHF" title="">CHF</option>
<option value="THB" title="฿">THB</option>
</select>
<p class="fg-help"></p>
</div>
<div class="clearfix"></div>
</div>
<div class="fg-row">
<label class="block fg-label">Product Image</label>
<div class="fg-upload-parent">
<input id="up_file" type="file" class="file1" name="up_file" style="visibility:hidden; height:0px !important;" onchange="document.getElementById('import_file_text').value = this.value;">
<input class="fg-input text inline_path" id="import_file_text" placeholder="" type="text" onclick="document.getElementById('up_file').click();" readonly>
<span class="fg-upload-btn" onclick="document.getElementById('up_file').click();"><i class="icon-folder"></i>Choose</span>
<div class="fg-clear"></div>
</div>
</div>
<div class="fg-row">
<label class="block fg-label">Product Description</label>
<textarea name="product_description" class="fg-textarea fg-fw last" rows="6"></textarea>
<p class="fg-help"></p>
</div>
<div class="fg-row">
<label class="block fg-label">Merchant Email Id</label>
<input id="merchant_email" type="text" class="fg-input text fg-fw" name="merchant_email" value="">
<p id="merchant_email" class="fg-help red"></p>
</div>
<div class="fg-row first">
<label class="block fg-label">Payments Mode</label>
<select name="payment_mode" id="payment_mode" class="fg-select fg-fw">
<option value=""> -- Select Payment Mode -- </option>
<option value="https://www.sandbox.paypal.com/us/cgi-bin/webscr">sandbox.paypal</option>
<option value="https://www.paypal.com/cgi-bin/webscr">paypal</option>
</select>
<p id="payment_mode" class="fg-help"></p>
</div>
<div class="fg-row last">
<input id ="submit" type="submit" class="fg-btn green medium inline" value="Save Product" name="submit">
</div>
</form>
</div>
</div><!-- fg-box End -->

</div><!-- fg-parent-box End-->
</div><!-- right-section-wrapper End -->
</div>
</div>
</div>
<!-- Footer Section -->
<div class="row">
<div class="main-footer">
<div class="copyright-footer">
<p>2015 &copy; your-company.com All rights reserved.</p>
</div>
</div>
</div>
</div>
<div id="pop2" class="simplePopup">
<div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<script src="<?php echo base_url(); ?>js/jquery.simplePopup.custom.js" type="text/javascript"></script>
<script type="text/javascript">

//This function call when submit  data for adding new products
jQuery(document).ready(function() {
$('input#submit').click(function(e) {
$('div#success_msg').slideUp(1000);
e.preventDefault();
var validate_value = validate();
if(validate_value=='true'){
var formData = new FormData($('.myForm')[0]);
jQuery.ajax({
type: "POST",
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
url: "<?php echo base_url();?>" + "index.php/products/save_products",
success: function(res) {
if (res)
{

if (res =='TRUE') {

setTimeout(function() {
$('#pop2').css('display', 'none');
$('div.simplePopupBackground').css('display', 'none');
},
4000);
setTimeout(function() {
$('div#success_msg').slideDown(1000);

},
4500);
$('#pop2').simplePopup();

// $('div#success_msg').slideDown(1000);
}
}
}
});
}
});

$('a#msg_close').click(function() {

$('div#success_msg').slideUp(1000);
});

});
</script>
</body>
</html>

 

Views : Show_all_products.php

It is also a view file that contains code for the operations like show data, edit data, delete data and copy product code.


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Show Product</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/global.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/fg-main-style.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style_code.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-latest.js"></script>
<script type='text/javascript' src='<?php echo base_url(); ?>js/jquery-1.9.1.js'></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validate_by_text.js"></script>

</head>
<body>
<div id="main-wrapper" class="container-fluid">
<!-- Header Section -->
<div class="row">
<div class="main-header">
<div class="col-xs-3 col-sm-3 col-md-3">
<a href="#" class="logo"><img src="<?php echo base_url(); ?>images/logo.png" alt="Formget Fugo"></a>
</div>
<div class="col-xs-9 col-sm-9 col-md-9">

</div>
<div class="fg-clear"></div>
<ul class="main-tab">

<li><a href="<?php echo base_url(); ?>index.php/products/">Add Products</a></li>
<li id="nomargin"><a id="active" class="active" href="<?php echo base_url(); ?>index.php/products/show_all">Show Products</a></li>
</ul>
<div class="fg-clear"></div>
</div>
</div>

<!-- Middle Section -->
<div class="row main-container blue-bg">
<div style="padding:0 100px;">
<div class="col-md-12 nopadding">
<div id="right-section-wrapper"style="border-right: 1px solid #CBE5F4;">
<div id="table_container" >
<div class="top-section-heading">
<h2>Products Dashboard</h2>

</div>
<div class="clearfix"></div>

<div class="fg-parent-box">

<div class="tab-pag-wrapper">
<table class="messages">
<thead>
<tr class="head">
<th class="first">ID</th>
<th>Prodcut Name</th>
<th>Merchant's Email</th>

<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($query as $row) { ?>
<input id="id<?php echo $row->id; ?>" value="<?php echo $row->id; ?>" type="hidden">
<input id="name<?php echo $row->id; ?>" value="<?php echo $row->product_name; ?>" type="hidden">
<input id="price<?php echo $row->id; ?>" value="<?php echo $row->product_price; ?>" type="hidden" >
<input id="currency<?php echo $row->id; ?>" value="<?php echo $row->product_currency; ?>" type="hidden">
<input id="url<?php echo $row->id; ?>" value="<?php echo $row->product_image; ?>" type="hidden">
<input id="description<?php echo $row->id; ?>" value="<?php echo $row->product_description; ?>" type="hidden">
<tr class="row-data">
<td class="first"><?php echo $row->id; ?></td>
<td><?php echo $row->product_name; ?></td>
<td><?php echo $row->merchant_email; ?></td>
<td><?php echo $row->product_price; ?>/<?php echo $row->product_currency; ?></td>
<td>
<a href="javascript:void(0)" onclick="preview(<?php echo $row->id; ?>);" >
<div id="show"><i class="icon-eye"></i></div>
</a>
<a href="javascript:void(0)" onclick="edit(<?php echo $row->id; ?>);" >
<div id="edit"><i class="icon-pencil"></i></div>
</a>
<a href="javascript:void(0)" onclick="delete_product(<?php echo $row->id; ?>);" >
<div id="delete"><i class="icon-trash"></i></div>
</a>

<a href="javascript:void(0)" onclick="get_code(<?php echo $row->id; ?>);">
<div id="get_code">Code</div>
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- <div class="ajax_count">
<ul>
<li><a>1</a></li>
<li class="current"><a>2</a></li>
<li><a>3</a></li>
<li><a>&gt;</a></li>
<li><a>&gt;&gt;</a></li>
</ul>
</div>-->
</div>

</div><!-- fg-parent-box End-->
</div>
<div id="update_form">

<div class="top-section-heading">
<h2>Update Product</h2>
<h4></h4>
</div>
<div class="clearfix"></div>
<div id="success_msg">
<h2>Product Updated Successfully...!!</h2>

<div id="btn_con"><a href="<?php echo base_url() ?>index.php/products/show_all" class="fg-btn orange medium inline">See All Products</a></div><a id="msg_close" class="close icon-cross2" href="javascript:void(0)"></a>

</div>
<div class="fg-parent-box">

<div class="fg-box first">
<p class="fg-box-header relative rl-pad">Product Information<a onclick="update_close();" id="update_close" ><img src="<?php echo base_url();?>images/close.png"/></a></p>
<div class="fg-inner-box rl-pad">
<form class="myForm" method="POST" enctype="multipart/form-data">
<input type="hidden" id="product_id" name="product_id" value=""/>
<div class="fg-row">
<label class="block fg-label">Product Name</label>
<input id="product_name" type="text" class="fg-input text fg-fw" name="product_name" value="">
<p id="product_name" class="fg-help red"></p>
</div>
<div class="fg-row">
<div class="col-md-8 nopadding">
<label class="block fg-label">Product Price</label>
<input id="product_price" type="number" step="0.01" min="0" class="fg-input text fg-fw" name="product_price" value="">
<p id="product_price" class="fg-help red"></p>
</div>
<div class="col-md-4 ">
<label class="block fg-label">Currency</label>
<select id="product_currency" class="fg-select fg-fw" name="product_currency">
<option value="USD" title="$" >USD</option>
<option value="AUD" title="$" >AUD</option>
<option value="BRL" title="R$" >BRL</option>
<option value="GBP" title="£" >GBP</option>
<option value="CAD" title="$" >CAD</option>
<option value="CZK" title="">CZK</option>
<option value="DKK" title="">DKK</option>
<option value="EUR" title="€">EUR</option>
<option value="HKD" title="$">HKD</option>
<option value="HUF" title="">HUF</option>
<option value="ILS" title="₪">ILS</option>
<option value="JPY" title="¥">JPY</option>
<option value="MXN" title="$">MXN</option>
<option value="TWD" title="NT$">TWD</option>
<option value="NZD" title="$">NZD</option>
<option value="NOK" title="">NOK</option>
<option value="PHP" title="P">PHP</option>
<option value="PLN" title="">PLN</option>
<option value="RUB" title="">RUB</option>
<option value="SGD" title="$">SGD</option>
<option value="SEK" title="">SEK</option>
<option value="CHF" title="">CHF</option>
<option value="THB" title="฿">THB</option>
</select>
<p class="fg-help"></p>
</div>
<div class="clearfix"></div>
</div>
<div class="fg-row">
<label class="block fg-label">Product Image</label>
<div class="fg-upload-parent">
<input id="up_file" type="file" class="file1" name="up_file" style="visibility:hidden; height:0px !important;" onchange="document.getElementById('import_file_text').value = this.value;">
<input name="import_file_text" class="fg-input text inline_path" id="import_file_text" placeholder="" type="text" onclick="document.getElementById('up_file').click();" readonly>
<span class="fg-upload-btn" onclick="document.getElementById('up_file').click();"><i class="icon-folder"></i>Choose</span>
<div class="fg-clear"></div>
</div>
</div>
<div class="fg-row">
<label class="block fg-label">Product Description</label>
<textarea id="product_description" name="product_description" class="fg-textarea fg-fw last" rows="6"></textarea>
<p class="fg-help">Help Text goes here.</p>
</div>
<div class="fg-row">
<label class="block fg-label">Merchant Email Id</label>
<input id="merchant_email" type="text" class="fg-input text fg-fw" name="merchant_email" value="">
<p id="merchant_email" class="fg-help red"></p>
</div>
<div class="fg-row first">
<label class="block fg-label">Payments Mode</label>
<select name="payment_mode" id="payment_mode" class="fg-select fg-fw">
<option value=""> -- Select Payment Mode -- </option>
<option value="https://www.sandbox.paypal.com/us/cgi-bin/webscr">sandbox.paypal</option>
<option value="https://www.paypal.com/cgi-bin/webscr">paypal</option>
</select>
<p id="payment_mode" class="fg-help"></p>
</div>
<div class="fg-row last">
<input id ="submit" type="submit" class="fg-btn green medium inline" value="Update Product" name="submit">
</div>
</form>
</div>
</div><!-- fg-box End -->

</div><!-- fg-parent-box End-->
</div>
</div><!-- right-section-wrapper End -->
</div>
</div>
</div>
<!-- Footer Section -->
<div class="row">
<div class="main-footer">
<div class="copyright-footer">
<p>2015 &copy; your-company.com All rights reserved.</p>
</div>
</div>
</div>
</div>

<div id="pop1" class="simplePopup">
<form method="post" action="<?php echo base_url(); ?>index.php/products/checkout">
<input id="product_id" name="product_id" type="hidden" value=""/>
<h2>PHP, jQuery, Ajax Based Advance Contact Form</h2><br>
<img style="width:30%; height: 180px" id="product_img" >
<div id="product_decription_pre"></div>
<br>
<input id="show_submit" type="submit" value="Buy Now 28.00" class="fg-btn inline medium blue" />
<br><br>
</form>
</div>

<div id="copy_code" class="simplePopup">

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/embed_css.css" />
<div id="form_container">
<form method="post" action="<?php echo base_url(); ?>index.php/products/checkout">
<input id="product_id" name="product_id" type="hidden" value=""/>
<h2>PHP, jQuery, Ajax Based Advance Contact Form</h2><br>
<img style="width:30%; height: 180px" id="product_img" src="" >
<div id="product_decription_pre"></div>
<br><br>
<input id="code_submit" type="submit" value="Buy Now 28.00" class="fg-btn inline medium blue" />
<br><br>
</form>
</div>
</div>

<div id="pop2" class="simplePopup">
<div class="fg-row">
<label class="block fg-label">Copy Code</label>
<div id="code_con"></div>
<p class="fg-help">Copy Code and put anywhere in any view</p>
</div>
</div>

<div id="delete_product_pop" class="simplePopup">

<div class="fg-box first">
<p class="fg-box-header relative rl-pad">Deleting Product</p>
<div class="fg-inner-box rl-pad">
<form method="post">
<div class="fg-row">
<center> <label class="block fg-label">Are you sure..? <br>
<br>You want to delete this Product</label>

<input type="hidden" name="product_id" id="del_product_id" value=""/>
<div><br><input id="del_submit" type="submit" value="Yes" class="fg-btn inline medium green" /> <a href="<?php echo base_url(); ?>index.php/products/show_all" id="cancel_delete" class="fg-btn orange medium inline">No</a></div>
</center>

</div>

</form>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>js/jquery.simplePopup.js" type="text/javascript"></script>
<script type="text/javascript">

//js function for deleting product
function delete_product(id) {
$('#del_product_id').val(id);
$('#delete_product_pop').simplePopup();
}
//js function for view product
function preview(id) {
var currency = '$';
product_name = $("input#name" + id).val();
product_image = $("input#url" + id).val();
product_price = $("input#price" + id).val();
product_currency = $("input#currency" + id).val();
product_description = $("input#description" + id).val();
if (product_currency == "BRL") {
currency = 'R$';
} else if (product_currency == "USD" || product_currency == "ASD") {
currency = '$';

} else if (product_currency == 'GBP') {
currency = '£';

}
$("div#product_decription_pre").html(product_description);
$("#pop1 h2").html(product_name);
$("#pop1 img").attr('src', product_image);
$("#pop1 input#show_submit").val("Buy Now " + currency + "" + product_price);
$("#pop1 input#product_id").val(id);
$('#pop1').simplePopup();
}
//js function for get code
function get_code(id) {

var currency = '$';
product_name = $("input#name" + id).val();
product_image = $("input#url" + id).val();
product_price = $("input#price" + id).val();
product_currency = $("input#currency" + id).val();
if (product_currency == "BRL") {
currency = 'R$';
} else if (product_currency == "USD" || product_currency == "ASD") {
currency = '$';

} else if (product_currency == 'GBP') {
currency = '£';

}
$("#copy_code h2").html(product_name);
$("#copy_code img").attr('src', product_image)
$("#copy_code input#submit").val("Buy Now " + currency + "" + product_price);
$("#copy_code input#product_id").val(id);

var data = $('#copy_code').html();
$('#pop2 #code_con').text(data);
$('#pop2').simplePopup();
}

//js function for update product
function edit(id) {

$.ajax({
url: "<?php echo base_url();?>" + "index.php/products/get_value_for_update",
type: "POST",
dataType: 'json',
data: {product_id: id},
success: function(data) {

$("input#product_id").val(id);
$("input#product_name").val(data['product_name']);
$("input#product_price").val(data['product_price']);
$("select#product_currency").val(data['product_currency']);
$("textarea#product_description").html(data['product_description']); $("select#payment_mode").val(data['payment_mode']);
$("input#import_file_text").val(data['product_image']);
$("input#merchant_email").val(data['merchant_email']);
}
});
$("a#active").removeClass('active');
$("div#table_container").slideUp(1000);
$("div#update_form").slideDown(2000);
}
//js function for close update form

function update_close(){
$("div#update_form").slideUp(1000);
$("div#table_container").slideDown(1000);
}

//js function for update product when form submit
jQuery(document).ready(function() {
$('input#submit').click(function(e) {
$('div#success_msg').slideUp(1000);
e.preventDefault();
var validate_value = validate();
if(validate_value=='true'){
var formData = new FormData($('.myForm')[0]);
jQuery.ajax({
type: "POST",
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
url: "<?php echo base_url(); ?>" + "index.php/products/update_product",
success: function(res) {
if (res)
{
if (res == 'TRUE') {

$('div#success_msg').slideDown(1000);
}
}
}
});
}
});
//js function for deleting product
$('input#del_submit').click(function() {
var id = $('input#del_product_id').val();
$.ajax({
url: "<?php echo base_url();?>" + "index.php/products/delete_product",
type: "POST",

data: {product_id: id},
success: function(data) {
location.reload();

}
});
});
$('a#msg_close').click(function() {
$('div#success_msg').slideUp(1000);
});

});
</script>
</body>
</html>

 

Views : Checkout.php

It is also a view file that contains code for the checkout form.


<?php if(empty($product_id)){
header("Location: show_all");
} ?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Billing Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/global.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/fg-main-style.css">
<script type='text/javascript' src='<?php echo base_url(); ?>js/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/popup_style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/loader.css" />
<script src="<?php echo base_url(); ?>js/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validate_by_text.js"></script>
<style type="text/css">
img#paypal{
width: 126px;
float: right;
}

</style>

</head>
<body>
<div id="main-wrapper" class="container-fluid">
<!-- Header Section -->
<div class="row">
<div class="main-header">
<div class="col-xs-3 col-sm-3 col-md-3">
<a href="#" class="logo"><img src="<?php echo base_url(); ?>images/logo.png" alt="Formget Fugo"></a>
</div>
<div class="col-xs-9 col-sm-9 col-md-9">

</div>
<div class="fg-clear"></div>
<ul class="main-tab">

<li><a href="<?php echo base_url(); ?>index.php/products/">Add Products</a></li>
<li id="nomargin"><a href="<?php echo base_url(); ?>index.php/products/show_all">Show Products</a></li>
</ul>
<div class="fg-clear"></div>
</div>
</div>

<!-- Middle Section -->
<div class="row main-container blue-bg">
<div style="padding:0 100px;">
<div class="col-md-12 nopadding">
<div id="right-section-wrapper"style="border-right: 1px solid #CBE5F4;">
<div class="top-section-heading">
<h2>Billing Details</h2>
<h4></h4>
</div>
<div class="clearfix"></div>

<div class="fg-parent-box">

<div class="fg-box first">
<p class="fg-box-header relative rl-pad">User Information</p>
<div class="fg-inner-box rl-pad">
<form class="myForm" method="POST" enctype="multipart/form-data">
<input type="hidden" name="product_id" id="product_id" value="<?php echo $product_id; ?>"/>
<div class="fg-row">
<label class="block fg-label">Full Name</label>
<input name="full_name" id="full_name" type="text" class="fg-input text fg-fw"/>
<p id="full_name" class="fg-help red"></p>
</div>
<div class="fg-row">
<label class="block fg-label">Email Address</label>
<input id="email_address" type="text" class="fg-input text fg-fw" name="email_address" value="">
<p id="email_address" class="fg-help red"></p>
</div>
<div class="fg-row last">
<input onClick="submit_data();" id ="submit" type="button" class="fg-btn blue medium inline" value="Proceed To Paypal" name="submit"><img id="paypal" src="<?php echo base_url(); ?>images/paypal.jpg"/>
</div>
</form>

</div>
</div><!-- fg-box End -->

</div><!-- fg-parent-box End-->
</div><!-- right-section-wrapper End -->
</div>
</div>
</div>
<!-- Footer Section -->
<div class="row">
<div class="main-footer">
<div class="copyright-footer">
<p>2015 &copy; your-company.com All rights reserved.</p>
</div>
</div>
</div>
</div>

</div>
<div id="pop2" class="simplePopup">
<div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<form id ="payment_mode_form" name="form" action="https://www.sandbox.paypal.com/us/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cancel_return" value="http://localhost/ci_paypal/index.php/products/show_all" />
<input type="hidden" name="return" value="http://www.aorank.com/live-tutorial/test.php" />
<input type="hidden" name="cmd" value="_xclick">
<input id="business" type="hidden" name="business" value="">
<input type="hidden" name="lc" value="C2">
<input id ="item_name" type="hidden" name="item_name" value="">
<input id="amount" type="hidden" name="amount" value="">
<input id="currency_code" type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">

</form>
<script src="<?php echo base_url(); ?>js/jquery.simplePopup.custom.js" type="text/javascript"></script>

<script type="text/javascript">
//js function for submit billing form data

function submit_data() {
var validate_value = validate_user();
if(validate_value=='true'){

var payment_mode = $("select#payment_mode").val();

$.ajax({
url: "<?php echo base_url(); ?>" + "index.php/products/save_billing_info",
type: "POST",
dataType: 'json',
data: {full_name: $("input#full_name").val(), email_address: $("input#email_address").val(), product_id: $("input#product_id").val()},
success: function(data) {
$("input#item_name").val(data['product_name']);
$("input#amount").val(data['product_price']);
$("input#business").val(data['merchant_email']);
$("input#currency_code").val(data['product_currency']);
$('form#payment_mode_form').attr('action',data['payment_mode']);

}
});
setTimeout(function() {
document.form.submit();
}, 3000);

$('#pop2').simplePopup();

}
}
</script>

</body>
</html>

 


We will now see the key features of the script :

You may agree with the fact that now a days online shopping is preferred more than offline, so using this script you can easily run your own online e-commerce website.

The setup is very easy you just have to add your product details, set payment method & details, then by generating the code you can place it in your live website and you will be all set to sell your products.


The key features are :

1. Add product details at a single place:

You can provide the product information that you need to sell in a detailed manner. The below image depicts all the feature that you can perform.

add-online-sell-product-details

 

2. Product dashboard to perform distinct operations :

After adding your product details, here in this section you can preview the product before using it and can edit, delete the same. You are provided with the code that you can use it to embed the product in a new page or any other website. Once you will follow this step you will now be ready to receive online payment and to sell products.

manage-online-sell-product-window

 

To generate the code click on the option provided :

Copy the code and paste it in the section of your website where you wish to make the product live. Once you will do this the product will start showing in the website.

generate-the-code-for-product

 

Click on preview option you will see the product like this :

As you can see from the above picture that how the product will be showcased in front end. In that you can see the product image, its description and buy now button. That will give all the required information to user who will see your products. As soon as the buy now button will be clicked the user will be redirected to the checkout page where they can provide the payment details to complete the payment.

online-sell-product-preview

 

I think you have a clear picture now, how the script will work.

Conclusion :

Using the script will help you to collect the online payment by just selling your product and manage all the things at a single dashboard. Hope you will be benefited with that. Please share your feedback in the space provided below.. 🙂