Mrunali Khandekar

Mrunali Khandekar

Stripe Payment Gateway integration in Laravel 6.2 (PHP 7.2) using JavaScript.

Stripe Payment Gateway integration in Laravel 6.2 (PHP 7.2) using JavaScript.

Subscribe to my newsletter and never miss my upcoming articles

Install Laravel Project using Following command

composer create-project --prefer-dist laravel/laravel Projectname 6.2

Install stripe package in your laravel project

composer require stripe/stripe-php

Add below line in your composer.json file

"require": {
    "php": "^7.2",
     ...........
    "cartalyst/stripe-laravel": "11.0.*"
},

run composer update command in terminal.

Then set routes

route::post('/stripe','StripeController@index')->name('stripe');
route::post('/stripe/payment','StripeController@stripepost')->name('stripe.post');

Create Controller

php artisan make:controller StripeController

Write below code in Stripe Controller

<?php

namespace App\Http\Controllers;

use App\Course;
use App\Payment;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;
use Stripe\Customer;
use Stripe\Stripe;
use Stripe\Charge;
use Stripe\Token;
use willvincent\Rateable\Tests\models\User;


class StripeController extends Controller
{
    //

    public function index(Request $request){
        $course = Course::findOrFail($request->course_id) // product_id;
        $coupon = $request->coupon // coupon product from database;
        $amount = $request->amount //pric of product from database;

        return view('stripe',compact('coupon','amount','course'));
    }

    public function stripepost(Request $request){
        \Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
        try {

            $token = $_POST['stripeToken'];
            $customer = Customer::create(array(
                'email' => Auth::user()->email,
                'source' => $request->stripeToken
            ));
            $charge = Charge::create(array(
                'customer' => $customer->id,
                'amount' => $request->amount * 100,
                'currency' => 'INR',
                "description" => "KEET Classroom"
            ));

               $user = Course::findOrfail($request->course_id)->user;
               Payment::insert([
                    'instructor_id'=>$user->id,
                   'user_id'=>Auth::user()->id,
                   'course_id'=>$request->course_id,
                   'coupon'=>$request->coupon,
                   'amount'=>$request->amount,
                   'payment_status'=>1,
                   'mode'=>1
               ]);

            return "payment Completed";
        }catch (\Exception $ex) {
            return $ex->getMessage();
        }


    }


}

Set Stripe key and Secret in .env file

STRIPE_KEY=pk_test_s....
 STRIPE_SECRET=sk_test_...

Create Blade files in view folder as stripe.blade.php

Add below code in stripe.blade.php

<html>

<body>
<style>

    body{
        background-color: #5b5b5b;
    }

    .spacer {
        margin-bottom: 24px;
    }


    /**
     * The CSS shown here will not be introduced in the Quickstart guide, but shows
     * how you can use CSS to style your Element's container.
     */
    .StripeElement {
        background-color: white;
        padding: 10px 12px;
        border-radius: 4px;
        border: 1px solid #ccd0d2;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

    #card-errors {
        color: #fa755a;
    }


</style>
<form method="POST" action="{{route('stripe.post')}}" id="payment-form">@csrf
    <input hidden id="course_id" name="course_id" value="{{$course->id}}">
    <input hidden id="coupon" name="coupon" value="{{$coupon}}">
    <input hidden id="amount" name="amount" value="{{$amount}}">


<div class="container justify-content-center align-items-center" style="margin-top: 10%;">
    <div class="row">
        <div class="col">
            <h4 class="text-white text-center">Congratulations! You are about to buy {{$course->title}}</h4><br>
            <div id="card-element">
                <!-- Elements will create input elements here -->
            </div>
            <div id="card-errors StripeElement" role="alert"></div>
<div class="text-center mt-3">
    <button type="submit" class="btn btn-warning btn-lg">Pay <i class="fa fa-rupee"></i> {{$amount}}</button>
</div>

        </div>

    </div>

</div>


    <!-- We'll put the error messages in this element -->





</form>
<script src="https://js.stripe.com/v3/"></script>
<script>

    var stripe = Stripe('pk_test_...');
    var elements = stripe.elements();
    var style = {
        base: {

            color: "#32325d",
        }
    };

    var card = elements.create("card", {
        style: style,
        hidePostalCode: true
    });
    card.mount("#card-element");

    // Create a token or display an error when the form is submitted.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                // Send the token to your server.
                stripeTokenHandler(result.token);
            }
        });
    });

    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }
</script>
</body>
</html>
 
Share this