Contact US


Get Your Project Done by our experts
info@fundaofwebit.com

How to integrate stripe payment gateway in laravel 5.8

Whatsapp

https://www.fundaofwebit.com/post/how-to-integrate-stripe-payment-gateway-in-laravel-5-8

How to integrate stripe payment gateway in laravel 5.8


Here, in this article we are going to integrate stripe payment gateway in Laravel as follows:

Step 1: First, create a project in laravel with the following command:

composer create-project --prefer-dist laravel/laravel stripelaravel


Step 2: After Laravel successfully created project, let's Install stripe-php Package to integrate in laravel as follows: 

composer require stripe/stripe-php


Step 3: Let's create a pop up modal where we will ask for CARD Details a blade.php file as follows:

<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#StripeCardModal">Stripe - Pay Online</button>
 <!-- Modal -->
     <div class="modal fade" id="StripeCardModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pay with Stripe</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form" action="{{ url('place-order-with-stripe') }}" method="POST"
                        class="require-validation" data-cc-on-file="false" id="payment-form">

                        {{ csrf_field() }}

                        <div class="row">
                            <div class="col-md-12">
                                <div><p class="stripe-error py-3 text-danger"></p></div>
                            </div>
                            <div class="col-md-12 required">
                                <div class="form-group">
                                    <label class="control-label">Name on Card</label>
                                    <input type="text" class="form-control" required size="4">
                                </div>
                            </div>

                            <div class="col-md-12 required">
                                <div class="form-group">
                                    <label class="control-label">Card Number</label>
                                    <input type="text" autocomplete='off' class="form-control card-number" required size="20">
                                </div>
                            </div>

                            <div class="col-md-4 required">
                                <div class="form-group">
                                    <label class='control-label'>CVC</label>
                                    <input type="text" autocomplete="off" class="form-control card-cvc" required placeholder="ex. 311" size="4">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Expiration Month</label>
                                    <input type="text" class="form-control card-expiry-month" required placeholder="MM" size="2">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class='control-label'>Expiration Year</label>
                                    <input type="text" class="form-control card-expiry-year" required placeholder="YYYY" size="4">
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-12 form-group d-none">
                                <div class="alert-danger alert">
                                    <h6 class="inp-error">Please correct the errors and try again.</h6>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <hr>
                                <input type="text" name="stipe_payment_btn" value="1">
                                <button type="submit" class="btn btn-primary btn-sm btn-block">Pay Now with Stripe</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


Step 4: Let's add the scripts as given below directly in blade file or else create stripecheckout.js file and paste in it: 


<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
$(function() {
    var $form = $(".require-validation");
    $('form.require-validation').bind('submit'function(e) {
        var $form = $(".require-validation"),
            inputSelector = ['input[type=email]',
                            'input[type=password]',
                            'input[type=text]',
                            'input[type=file]',
                            'textarea'].join(', '),
            $inputs       = $form.find('.required').find(inputSelector),
            $errorMessage = $form.find('.inp-error'),
            valid         = true;
            $errorMessage.addClass('d-none');
        $('.has-error').removeClass('has-error');

        $inputs.each(function(iel) {
            var $input = $(el);
            if ($input.val() === '') {
                $input.parent().addClass('has-error');
                $errorMessage.removeClass('d-none');
                e.preventDefault();
            }
        });

        if (!$form.data('cc-on-file')) {
            var StripeKey = "pk_test_YourSkipePublication_KEY_value";

            e.preventDefault();
            Stripe.setPublishableKey(StripeKey);
            Stripe.createToken({
                number: $('.card-number').val(),
                cvc: $('.card-cvc').val(),
                exp_month: $('.card-expiry-month').val(),
                exp_year: $('.card-expiry-year').val()
            }, stripeResponseHandler);
        }

    });

    function stripeResponseHandler(statusresponse) {
        if (response.error) {
            $('.stripe-error').text(response.error.message);
        } else {
            var token = response['id'];
            $form.find('input[type=text]').empty();
            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            $form.get(0).submit();
        }
    }

});
</script>


Step 5: Let's create a controller and paste the below code:

use Stripe\Charge;
use Stripe\Stripe;

public function stripeorder(Request $request)
{    
if(isset($_POST['stipe_payment_btn']))
    {
        $stripetoken = $request->input('stripeToken');
        $STRIPE_SECRET = "YOUR_STRIPE_SECRET";
        Stripe::setApiKey($STRIPE_SECRET);
        \Stripe\Charge::create([
            'amount' => 100 * 100,
            'currency' => 'usd',
            'description' => "Thank you for purchasing with Fabcart",
            'source' => $stripetoken,
            'shipping' => [
                'name' => "User Name",
                'phone' => "+1XXXXXXX",
                'address' => [
                    'line1' => "Address 1",
                    'line2' => "Address 2",
                    'postal_code' => "Zipcode",
                    'city' => "City",
                    'state' => "State",
                    'country' => 'US',
                ],
            ],
        ]);
        return redirect('/thank-you')->with('status','Order has been placed Successfully');
    }
}


Step 7: Let's give a route to set and call the controller code as follows route/web.php:

// Stripe
Route::post('place-order-with-stripe','Frontend\CheckoutController@stripeorder');

 

Step 8: You are done with it. Now, run the artisan command to check:

$ php artisan serve


Step 9: Now lets test the payment thing:

Name: Any Name (Test)
Card No: 4242 4242 4242 4242
CSV: 123
Expiry month: 12
Expiry year: 2024


Thanks for ready.


© Copyright - 2018 - 2021 | All rights reserved at Funda of Web IT