image

Laravel Stripe Integration

27 Apr, 2022 Abdelrahman Etry

In this topic i'm going to talk about how to integrate with Stripe with Laravel.

Stripe is an Irish multinational financial services and software as a service company headquartered in Dublin, Ireland. The company primarily offers payment-processing software and application programming interfaces for e-commerce websites and mobile applications

in this topic you'll learn how simply integrate with Stripe and add it to your project .


Requirements:

  1. Create a business account on Stripe.
  2. Locate both public_key and secret_key in your Stripe account.


Optional Step:

  • You can clone this repository from GitHub and put it directly in your project from here.


Steps:


First we need to configure our application

1- Create a new Laravel project by opening your terminal and running the following command:

composer create-project laravel/laravel stripe-integration


2- Navigate to project's directory:

cd stripe-integration


3-Install Stripe-php integration Laravel package to your project:

composer require stripe/stripe-php


4- After installation process, you need to Set the secret credentials provided by stripe in you .env file by adding the following:

STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxx 
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxx 


5- Next you need to set up the Stripe API key, open or create config/services.php file and add the following:

'stripe' => [
    'secret' => env('STRIPE_SECRET'),
],


Next step we need to setup the transactions and actions


1- we need to create a controller to handle the actions in our applications by running the following command

php artisan make:controller StripeController


2- we need to define the main methods for our application in the controller as follows

<?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Session;
    use Stripe;

    class StripeController  extends Controller{
        /**
        * success response method.
        *
        * @return \Illuminate\Http\Response
        */
        public function stripe(){
            return view('stripe');
        }
   
        /**
        * success response method.
        *
        * @return \Illuminate\Http\Response
        */
        public function stripePost(Request $request){
            Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
            Stripe\Charge::create ([
                "amount" => 100 * 100,
                "currency" => "usd",
                "source" => $request->stripeToken,
                "description" => "This payment is tested purpose phpcodingstuff.com"
            ]);
 
            Session::flash('success', 'Payment successful!');
            return back();
        }
}


3- We need to create a simple view for our application, locate resources/views folder and then create the view named stripe.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Payment Page - HackTheStuff</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <style type="text/css">
            .panel-title {
                display: inline;
                font-weight: bold;
            }
            .display-table {
                display: table;
            }
            .display-tr {
                display: table-row;
            }
            .display-td {
                display: table-cell;
                vertical-align: middle;
                width: 61%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <h1>Stripe Payment Page - HackTheStuff</h1>
            
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="panel panel-default credit-card-box">
                        <div class="panel-heading display-table">
                            <div class="row display-tr">
                                <h3 class="panel-title display-td" >Payment Details</h3>
                                <div class="display-td">                            
                                    <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                                </div>
                            </div>
                        </div>
              
                        <div class="panel-body">
                            @if (Session::has('success'))
                            <div class="alert alert-success text-center">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                <p>{{ Session::get('success') }}</p>
                            </div>
                            @endif
                            <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="{{env('STRIPE_KEY') }}" id="payment-form">
                                @csrf
                                <div class='form-row row'>
                                    <div class='col-xs-12 form-group required'>
                                        <label class='control-label'>Name on Card</label>
                                        <input class='form-control' size='4' type='text'>
                                    </div>
                                </div>
                    
                                <div class='form-row row'>
                                    <div class='col-xs-12 form-group card required'>
                                        <label class='control-label'>Card Number</label>
                                        <input autocomplete='off' class='form-control card-number' size='20' type='text'>
                                    </div>
                                </div>
                    
                                <div class='form-row row'>
                                    <div class='col-xs-12 col-md-4 form-group cvc required'>
                                        <label class='control-label'>CVC</label>
                                        <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
                                    </div>
                       
                                    <div class='col-xs-12 col-md-4 form-group expiration required'>
                                        <label class='control-label'>Expiration Month</label>
                                        <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
                                    </div>
                       
                                    <div class='col-xs-12 col-md-4 form-group expiration required'>
                                        <label class='control-label'>Expiration Year</label>
                                        <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
                                    </div>
                                </div>
                    
                                <div class='form-row row'>
                                    <div class='col-md-12 error form-group hide'>
                                        <div class='alert-danger alert'>Please correct the errors and try again. </div>
                                    </div>
                                </div>
                    
                                <div class="row">
                                    <div class="col-xs-12">
                                        <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($100)</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    <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('div.error'),
                valid = true;
                $errorMessage.addClass('hide');
                $('.has-error').removeClass('has-error');
    
                $inputs.each(function(i, el) {
                    var $input = $(el);
                    if ($input.val() === '') {
                        $input.parent().addClass('has-error');
                        $errorMessage.removeClass('hide');
                        e.preventDefault();
                    }
                });
    
                if(!$form.data('cc-on-file')){
                    e.preventDefault();
                    Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                    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(status, response) {
                if(response.error) {
                    $('.error').removeClass('hide').find('.alert').text(response.error.message);
                }else{
                    /* token contains id, last4, and card type */
                    var token = response['id'];
                    $form.find('input[type=text]').empty();
                    $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                    $form.get(0).submit();
                }
            }
        });
    </script>
</html>


Finally we need to create the routes for our application


1- Navigate to the web.php file located in routes/web.php and add the following routes

Route::get('/',              'StripeController@index');
Route::post('stripe',   'StripeController@store')->name('stripe.post');


You can now test your application by running it in your terminal using the following command

php artisan serve


Testing Cards

  • Card No: 4242424242424242
  • Month: any future month
  • Year: any future Year
  • CVV: 123

you can also find extra testing cards here

Recent Posts
image

Laravel Livewire

12 Sep, 2024 Abdelrahman Etry
image

Deployment with Envoyer and Laravel

30 Oct, 2023 Abdelrahman Etry
image

Laravel Request Lifecycle

28 Oct, 2023 Abdelrahman Etry
image

Laravel Queues: Everything You Need to Know

28 Oct, 2023 Abdelrahman Etry
image

Laravel Repository Pattern

28 Oct, 2023 Abdelrahman Etry
image

Laravel Packages You Should Know About

26 Oct, 2023 Abdelrahman Etry