Laravel 8 Stripe Payment Gateway Integration Tutorial

by

Stripe payment gateway integration in laravel 8. In this post, i will show you how to integrate stripe payment geteway in laravel 8 app.

In this post, i will use jQuery, ajax and stripe javascript library for payment deduction in laravel 8 app. And will call ajax request to deduct payment and store payment information into database in laravel 8 app.

And in this post, you will learn step by step on how to integrate stripe payment gateway in laravel 8 app.

Stripe Payment Gateway Integration in Laravel 8

  • Step 1 – Installing Laravel 8 Application
  • Step 2 – Create account in Stripe and generate key and secret
  • Step 3 – Install Stripe package And Configure
  • Step 4 – Database and Stripe Key Configuration
  • Step 5 – Creating Payment Model & Migration
  • Step 6 – Create Routes
  • Step 7 – Creating Stripe Controller
  • Step 8 – Create Directory and Blade View
    • Create Directory Name Stripe
    • Create Stripe Payment Blade View
  • Step 9 – Start Development Server
  • Step 10 – Run This App On Browser

Step 1 – Installing Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Create account in Stripe and generate key and secret

In step 2, Create stripe account. Then generate key and secret.

Step 3 – Install Stripe package And Configure

In step 3, open terminal and run the following command on it to install stripe packate in laravel 8 app:

composer require cartalyst/stripe-laravel

Then configure stripe package in app.php, which is located inside config directory:

'providers' => [
 ..........
 Cartalyst\Stripe\Laravel\StripeServiceProvider::class 
],
 
'aliases' => [
 ..........
 'Stripe' => Cartalyst\Stripe\Laravel\Facades\Stripe::class 
],

Step 4 – Database and Stripe Key Configuration

In step 4, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail and stripe key and secret like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxx 
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxx

Next step, you need to set up the Stripe API key, to do this open or create the config/services.php file, and add or update the 'stripe' array:

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

Step 5 – Creating Payment Model & Migration

In step 5, run the following command on terminal to create model and migration file by using the following command:

php artisan make:model Payment -m

The above command will create two files into your laravel 8 stripe payment gateway integration tutorial app, which is located inside the following locations:

  • Laravel8Stripe/app/Models/Payment.php
  • Laravel8Stripe/database/migrations/create_payments_table.php

So, find create_payments_table.php file inside Laravel8Stripe/database/migrations/ directory. Then open this file and add the following code into function up() on this file:

    public function up()
    {
        Schema::create('payments', function (Blueprint $table) {
            $table->id();
            $table->string('s_payment_id'); // stripe payment id
            $table->string('user_id');
            $table->string('product_id');
            $table->string('amount');
            $table->timestamps();
        });
    }

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 6 – Create Routes

In step 6, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Controllers\StripeController;

Route::get('stripe', [StripeController::class, 'index']);
Route::post('payment-process', [StripeController::class, 'process']);

Step 7 – Creating Stripe Controller

In step 7, create stripe payment controller by using the following command:

php artisan make:controller StripeController

The above command will create StripeController.php file, which is located inside Laravel8Stripe/app/Http/Controllers/ directory.

So open StripeController.php file and add the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Payment;

use Stripe;

class StripeController extends Controller
{
     public function index()
	 {
	   return view('stripe.index');
	 }

	public function process(Request $request)
    {
  
        $stripe = Stripe::charges()->create([
            'source' => $request->get('tokenId'),
            'currency' => 'USD',
            'amount' => $request->get('amount') * 100
        ]);
  
        return $stripe;
    }
}

Step 8 – Create Directory and Blade View

In step 8, create the following directory and blade view file.

  • create directory name stripe inside resources/views directory.
  • Create Payment Blade View name index.blade.php inside resources/views/stripe directory. Then add the following code into it:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Laravel 8 Stripe Payment Gateway Integration Example - LaraTutorials.com</title>
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <style>
         .container{
         padding: 0.5%;
         } 
      </style>
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-12 mt-2 mb-2">
               <h3 class="text-center">Laravel 8 Stripe Payment Gateway Integration Example Tutorial</h3><hr>
            </div>            
            <div class="col-md-12 mt-2 mb-2">
               <pre id="res_token"></pre>
            </div>
         </div>
         <div class="row">
            <div class="col-md-4">
               <button class="btn btn-primary btn-block" onclick="stripePay(10)">Pay $10</button>
            </div>
            <div class="col-md-4">
               <button class="btn btn-success btn-block" onclick="stripePay(50)">Pay $50</button>
            </div>
            <div class="col-md-4">
               <button class="btn btn-info btn-block" onclick="stripePay(100)">Pay $100</button>
            </div>
         </div>
      </div>
<script src = "https://checkout.stripe.com/checkout.js" > </script> 
<script type = "text/javascript">
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });

function stripePay(amount) {
    var handler = StripeCheckout.configure({
        key: 'pk_test_5f6jfFP2ZV5U9TXQYG0vtqFJ00eFVWNoRX', // your publisher key id
        locale: 'auto',
        token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            console.log('Token Created!!');
            console.log(token)
            $('#res_token').html(JSON.stringify(token));
            $.ajax({
                url: '{{ url("payment-process") }}',
                method: 'post',
                data: {
                    tokenId: token.id,
                    amount: amount
                },
                success: (response) => {
                    console.log(response)
                },
                error: (error) => {
                    console.log(error);
                    alert('Oops! Something went wrong')
                }
            })
        }
    });
    handler.open({
        name: 'Demo Site',
        description: '2 widgets',
        amount: amount * 100
    });
} 
</script>
   </body>
</html>

Step 9 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your laravel 8 stripe payment gateway integration example:

php artisan serve

Step 10 – Run This App On Browser

In step 10, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/stripe

When you fire the above url on the browser, you will see the image below:

Testing Card Credential

 Card No : 4242 4242 4242 4242
 Month : any future month
 Year : any future Year
 CVV : 123

Leave a Comment