Codeigniter razorpay payment gateway integration tutorial, we would love to share with you how to integrate razorpay payment gateway into codeignitor project. We will integrate razorpay payment gateway without using curl, we will use the chekout.js of razorpay payment gateway for duduction of payment.
Codeigniter Razorpay Payment Gateway Integration
Here are steps:
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo/';
Create Database With Table
In this step, we need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating a table in your database.
CREATE TABLE IF NOT EXISTS payments(
id int(10) unsigned NOT NULL auto_increment,
user_id varchar(150) collate latin1_general_ci NOT NULL,
product_id varchar(150) collate latin1_general_ci NOT NULL,
payment_id varchar(45) collate latin1_general_ci NOT NULL,
amount varchar(45) collate latin1_general_ci NOT NULL,
PRIMARY KEY (id)
);
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Create Controller
Now we need to create a controller name Payment.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to showing product list
- razorPaySuccess() – This function is used to store payment information
- RazorThankYou() – This is used to showing success page
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Payment extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->library(array('form_validation','session'));
$this->load->helper(array('url','html','form'));
}
public function index()
{
$this->load->view('razorpay');
}
public function razorPaySuccess()
{
$data = [
'user_id' => '1',
'payment_id' => $this->input->post('razorpay_payment_id'),
'amount' => $this->input->post('totalAmount'),
'product_id' => $this->input->post('product_id'),
];
$insert = $this->db->insert('payments', $data);
$arr = array('msg' => 'Payment successfully credited', 'status' => true);
}
public function RazorThankYou()
{
$this->load->view('razorthankyou');
}
}
Create Views
Now we need to create register.php, go to application/views/ folder and create razorpay.php file. Here put the below html code for showing list of product.
<!DOCTYPE html>
<html>
<head>
<title>Razorpay Payment With Codeigniter</title>
</head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div class="container">
<br><br><br>
<div class="row">
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.tutsmake.com/wp-content/uploads/2019/03/c05917807.png"></div>
<figcaption class="info-wrap">
<h4 class="title">Mouse</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div> <!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1000" data-id="1">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1000</span> <del class="price-old">₹1200</del>
</div> <!-- price-wrap.// -->
</div> <!-- bottom-wrap.// -->
</figure>
</div> <!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.tutsmake.com/wp-content/uploads/2019/03/vvjghg.png"> </div>
<figcaption class="info-wrap">
<h4 class="title">Sony Watch</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div> <!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1280" data-id="2">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1280</span> <del class="price-old">₹1400</del>
</div> <!-- price-wrap.// -->
</div> <!-- bottom-wrap.// -->
</figure>
</div> <!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.tutsmake.com/wp-content/uploads/2019/03/jhgjhgjg.jpg"></div>
<figcaption class="info-wrap">
<h4 class="title">Mobile</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div> <!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1280" data-id="3">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1500</span> <del class="price-old">₹1980</del>
</div> <!-- price-wrap.// -->
</div> <!-- bottom-wrap.// -->
</figure>
</div> <!-- col // -->
</div> <!-- row.// -->
</div>
<!--container.//-->
</body>
</html>
After put the html code here, next put the below script code in razorpay.php file
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var SITEURL = "<?php echo base_url() ?>";
$('body').on('click', '.buy_now', function(e){
var totalAmount = $(this).attr("data-amount");
var product_id = $(this).attr("data-id");
var options = {
"key": "rzp_live_ILgsfZCZoFIKMb",
"amount": (1*100), // 2000 paise = INR 20
"name": "Tutsmake",
"description": "Payment",
"image": "//www.tutsmake.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",
"handler": function (response){
$.ajax({
url: SITEURL + 'payment/razorPaySuccess',
type: 'post',
dataType: 'json',
data: {
razorpay_payment_id: response.razorpay_payment_id , totalAmount : totalAmount ,product_id : product_id,
},
success: function (msg) {
window.location.href = SITEURL + 'payment/RazorThankYou';
}
});
},
"theme": {
"color": "#528FF0"
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
e.preventDefault();
});
</script>
Next put the sytle code in razorpay.php file
<style>
.card-product .img-wrap {
border-radius: 3px 3px 0 0;
overflow: hidden;
position: relative;
height: 220px;
text-align: center;
}
.card-product .img-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.card-product .info-wrap {
overflow: hidden;
padding: 15px;
border-top: 1px solid #eee;
}
.card-product .bottom-wrap {
padding: 15px;
border-top: 1px solid #eee;
}
.label-rating { margin-right:10px;
color: #333;
display: inline-block;
vertical-align: middle;
}
.card-product .price-old {
color: #999;
}
</style>
Now we need to create views for showing success page, go to application/views folder and create razorthankyou.php file and put the below html here.
<!DOCTYPE html> <html> <head> <title>Thank You - Tutsmake</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> </head> <body class=""> <br><br><br><br> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h4 class="text-white">Thank you for payment<br></h4> <br> <p><a class="btn btn-warning" target="_blank" href="https://www.tutsmake.com/"> Tutsmake.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br><br> </article> </body> </html>
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/payment
Conclusion
In this codeigniter razorpay payment gateway tutorial, we have successfully implement razorpay payment gateway with codeigniter. After successfully payment done we will redirect to thank you page to users.
If you have any questions or thoughts to share, use the comment form below to reach us.
Note : here is live payment key implement, so dummy credential not work here.
is the razor pay library needed
No library needed for this example
is create a account necessary?
yes