Blog

Stripe Payment Gateway Implementation in Laravel

Published by Pinblooms on
Stripe-payment-laravel-webepower

Payment gateway implementation is the basic and important concept and part of the software. In this article we talk about Stripe payment gateway implementation in Laravel.

Use Following steps: –

Step 1: Create new project with this command

composer create-project –prefer-dist laravel/laravel stripe_payment

Step 2: Database Configuration

Now open your .env file and configure your Database

DB_HOST =localhost
DB_DATABASE = homestead
DB_USERNAME = homestead
DB_PASSWORD = secret

 

Step 3: Install Package in your project by using this command

composer require stripe/stripe-php

 

Step 4: Create PaymentController

Php artisan make:controller PaymentController Copy the code in your PaymentController file

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class PaymentController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        //$this->middleware('auth'); // if you want user to be logged in to use this function then uncomment this code.
    }
Public function payment()
 {
    return view(‘payment’); 
}
    
    public function handleonlinepay(Request $request){ 
      $input = $request->input();
        try {
            \Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
                
                // Creating a customer - If you want to create customer uncomment below code.
                /*  $customer = \Stripe\Customer::create(array(
                        'email' => $request->stripeEmail,
                        'source' => $request->stripeToken,
                        'card' => $request->stripeCard
                    ));
                      $stripe_id = $customer->id;
                
                // Card instance
                // $card = \Stripe\Card::create($customer->id, $request->tokenId); 
                */
                 $unique_id = uniqid(); // just for tracking purpose incase you want to describe something.
            
                // Charge to customer
                $charge = \Stripe\Charge::create(array(
                    'description' => "Plan: ".$input['plan']." - Amount: ".$input['amount'].' - '. $unique_id,
                    'source' => $request->stripeToken,                    
                    'amount' => (int)($input['amount'] * 100), // the mount will be consider as cent so we need to multiply with 100
                    'currency' => 'USD'
                     ));
                               
                // Insert into the database
                \App\PaymentLogs::create([                                         
                    'amount'=> $input['amount'],
                    'plan'=> $input['plan'],
                    'charge_id'=>$charge->id,
                    'stripe_id'=>$unique_id,                     
                    'quantity'=>1
                     ]);

                return response()->json([
                    'message' => 'Charge successful, Thank you for payment!',
                    'state' => 'success'
                ]);                
            } catch (\Exception $ex) {
                return response()->json([
                    'message' => 'There were some issue with the payment. Please try again later.',
                    'state' => 'error'
                ]);
                        }             
                
    }
}

 

Step 5: Create payment.blade.php view file Now go to your view->payment.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="{{ URL::asset('css/developer.css') }}" rel="stylesheet" type="text/css">
        <!-- Styles -->

         <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body>

        <section class="pricing py-5">
            <div class="container"> 
                    <form action="{{ route('dopay') }}" method="POST" id="subscribe-form" onsubmit="return submitpayment()" >
                    @csrf
                    <div style="text-align: center; margin-bottom: 20px">
                        <span id="alert-danger" class="alert alert-danger d-none"></span>
                        <span id="alert-success" class="alert alert-success d-none"></span>
                    </div>
                    <div class="row">
                        <div class="col-lg-3"></div> 
                        <div class="col-lg-3">
                            <div class="card mb-5 mb-lg-0">
                            	<div class="card-body">
                                    <h5 class="card-title text-muted text-uppercase text-center">Basic Plan</h5>
                                    <h6 class="card-price text-center">$9<span class="period">/year</span></h6>
                                    <hr>
                                    <ul class="fa-ul">
                                        <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
                                        <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
                                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
                                         <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
                                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free premium support</li>
                                    </ul>
                                     <input type="submit" id="submit-btn-1" name="submit-btn" value="Pay" class="btn btn-block btn-success text-uppercase" />        
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="card mb-5 mb-lg-0">
                                <div class="card-body">
                                    <h5 class="card-title text-muted text-uppercase text-center">Premium Plan</h5>
                                    <h6 class="card-price text-center">$19<span class="period">/year</span></h6>
                                    <hr>
                                    <ul class="fa-ul">
                                        <li><span class="fa-li"><i class="fas fa-check"></i></span>5 Users</li>
                                        <li><span class="fa-li"><i class="fas fa-check"></i></span>15GB Storage</li>
                                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
                                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
                                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free premium support</li>
                                    </ul>
                                    <input type="submit" id="submit-btn-2" name="submit-btn" value="Pay" class="btn btn-block btn-success text-uppercase" />        
                                </div>
                            </div>
                        </div> 
                        <div class="col-lg-3"></div>
                    </div>
                    <input type="hidden" name="amount" id="amount" value="" />
                    <input type="hidden" name="plan" id="plan" value="" />
                    <input type="hidden" name="stripeToken" id="stripeToken" value="" /> 
                </form> 
            </div>  
            <br/><br/><br/>
        </section>           
 
</body> 
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script> 
<script type="text/javascript">
function showProcessing() {
    $('.subscribe-process').show();
}
function hideProcessing() {
    $('.subscribe-process').hide();
}
// Handling and displaying error during form submit.
function subscribeErrorHandler(jqXHR, textStatus, errorThrown) {
    try {
        var resp = JSON.parse(jqXHR.responseText);
        if ('error_param' in resp) {
            var errorMap = {};
            var errParam = resp.error_param;
            var errMsg = resp.error_msg;
            errorMap[errParam] = errMsg;
        } else {
        	var errMsg = resp.error_msg;
            $("#alert-danger").addClass('alert alert-danger').removeClass('d-none').text(errMsg);
            }
    } catch (err) {
        $("#alert-danger").show().text("Error while processing your request");
    }
}
// Forward to thank you page after receiving success response.
function subscribeResponseHandler(responseJSON) {
//window.location.replace(responseJSON.successMsg);
    if (responseJSON.state == 'success') {
        $("#alert-success").addClass('alert alert-success').removeClass('d-none').text(responseJSON.message);
        $("#alert-danger").addClass('d-none');
    }
     if (responseJSON.state == 'error') {
        $("#alert-danger").addClass('alert alert-danger').removeClass('d-none').text(responseJSON.message);
        $("#alert-success").addClass('d-none');
    }
 }
var handler = StripeCheckout.configure({
//Replace it with your stripe publishable key
    key: "{{ env('STRIPE_KEY') }}",
    image: 'https://networkprogramming.files.wordpress.com/2018/10/twitter.png', // add your company logo here
    allowRememberMe: false,
    token: handleStripeToken
});
function submitpayment() {
    var form = $("#subscribe-form");
    if (parseInt($("#amount").val()) <= 0) {
        return false;
    }
    handler.open({
        name: 'Laravel Stripe Payment',
        description: $("#plan").val()+' Plan',
        amount: ($("#amount").val() * 100)
         });
    return false;
}

function handleStripeToken(token, args) {
    form = $("#subscribe-form");
    $("input[name='stripeToken']").val(token.id);
    var options = {
        beforeSend: showProcessing,
        // post-submit callback when error returns
        error: subscribeErrorHandler,
        // post-submit callback when success returns
        success: subscribeResponseHandler,
        complete: hideProcessing,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'json'
    };
    form.ajaxSubmit(options);
    return false;
}
$("#submit-btn-1").click(function(){
   $("#amount").val('9');
   $("#plan").val('Basic');
});
$("#submit-btn-2").click(function(){
   $("#amount").val('19');
   $("#plan").val('Premium');
});
</script>
</html>

 

Step 6 : set routes for the project

Route::get("/payment",'PaymentController@payment');
Route::post('/dopay', 'PaymentController@handleonlinepay')->name('dopay');

 

Step 7 : Now create the migration file for database php artisan make:migration payment_log

class PaymentLogs extends Migration
{
 	/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
    	 Schema::create('payment_logs', function (Blueprint $table) {
            $table->increments('id');
            $table->float('amount',8,2);
            $table->enum('plan', ['Basic', 'Premium'])->default('Basic');
            $table->string('charge_id')->collation('utf8mb4_bin');
            $table->string('stripe_id')->collation('utf8mb4_bin'); // for now we will store             
            $table->integer('quantity');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
    */
    public function down()
    {
        Schema::dropIfExists('payment_logs');
    }
}

 

Step 8 : Create the model for database Php artisan make:model PaymentLogs This command will create the model in your project and use the following code in PaymentLogs model:-

Now run the following command to migrate the file in your database.

class PaymentLogs extends Migration
{
 	/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
    	 Schema::create('payment_logs', function (Blueprint $table) {
            $table->increments('id');
            $table->float('amount',8,2);
            $table->enum('plan', ['Basic', 'Premium'])->default('Basic');
            $table->string('charge_id')->collation('utf8mb4_bin');
            $table->string('stripe_id')->collation('utf8mb4_bin'); // for now we will store             
            $table->integer('quantity');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
    */
    public function down()
    {
        Schema::dropIfExists('payment_logs');
    }
}

Now run the following command to migrate the file in your database.

Php artisan migrate

Step 9 : Configure env file

STRIPE_KEY=pk_test_stripe_key
STRIPE_SECRET=sk_test_stripe_secret

For key and secret register yourself on this url https://stripe.com/ and once registered you will see developer option where you will find key and secret for your project.

Step 10 : Now run your server and open your project

http://localhost/stripe_payment/public/payment

Conclusion: –

Stripe payment gateway is one of the allows store owners to accept credit card payment on their sites. If you are selling digital products on your website then stripe payment is better choice for your website project.

If you have any query related to this article kindly send us your valuable questions, we’ll get back to you soon.

Post Views: 1,656
Categories