Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example

Leave a Comment / php / By

Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example

In this post we will give you information about Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example. Hear we will give you detail about Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with exampleAnd how to use it also give you demo for it if it is necessary.

Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example

In this tutorial, You will know how to configure Stripe with Laravel 5.4 and register subscription based user using the Laravel 5.4 Cashier package.

Laravel is the best back-end technology to easily configure stripe payment system.


Install Laravel 5.4 & Cashier using Composer

In the first step, you will have to setup your Laravel application in your working directory.

Now i will run the following command to install Laravel :

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

Above command will create a fresh laravel application. Now we need to configure laravel/cashier package for Stripe in our composer.json file :


Composer 

.....
"require": {
        .....
        "laravel/cashier": "~7.0"
    },
    ......

Now run composer update command.


Service Provider (config/app.php)

Now we need to register service provider LaravelCashierCashierServiceProvider in config/app.php file to the providers array.

....
'providers' => [
    ....,
    LaravelCashierCashierServiceProvider::class,
]
    .....


Create the migrations

By default, you will get a migration file to create a users table so we will need some more columns to the users table and create a new subscriptions table for holding the information of the customer’s subscription.

Create a new migration file by using artisan command and add following line of code in that file :


Schema::table('users', function ($table) {
    $table->string('stripe_id')->nullable();
    $table->string('card_brand')->nullable();
    $table->string('card_last_four')->nullable();
    $table->timestamp('trial_ends_at')->nullable();
});

Schema::create('subscriptions', function ($table) {
    $table->increments('id');
    $table->integer('user_id');
    $table->string('name');
    $table->string('stripe_id');
    $table->string('stripe_plan');
    $table->integer('quantity');
    $table->timestamp('trial_ends_at')->nullable();
    $table->timestamp('ends_at')->nullable();
    $table->timestamps();
});

Now you are ready to migrate the database by running following command :

php artisan migrate


Create Stripe Plan

Now to get started with Stripe, we need to create an account first. Once you have created your stripe account then click Plans under Subscriptions.

I have created a diamond plan for testing, you can create your own subscription plan.

Now we need to get Stripe API access key to configure Stripe in Laravel and you can get keys from clicking on the API.

Now i will add the stripe key and secret in config/services.php file.

 'stripe' => [
        'model' => AppUser::class,
        'key' =>'your_stripe_key',
        'secret' => 'your_stripe_secret',
    ],

Finally i need to add the Billable Trait on User Model.


app/User.php 

use LaravelCashierBillable;

class User extends Authenticatable
{
    use Billable;
}


Add Routes

I assume that you have set up the stripe configuration successfully.

Ok let’s start with Laravel routes to register a subscription based user.

  1. Route::get('subscription',['as'=>'subscription','uses'=>'HomeController@subscription']);
  2. Route::post('subscription',['as'=>'post-subscription','uses'=>'HomeController@postSubscription']);
Route::get('subscription', ['as'=>'subscription','uses'=>'HomeController@subscription']);
Route::post('subscription', ['as'=>'post-subscription','uses'=>'HomeController@postSubscription']);


Add Controller

In this step, we will create a HomeController.php in following directory app/Http/Controllers.

  1. <?php
  2. namespace AppHttpControllers;
  4. use IlluminateHttpRequest;
  5. use AppUser;
  7. class HomeController extends Controller {
  9.     public functionsubscription(){
  10.         returnview('subscription');
  11.     }
  13.     public functionpostSubscription(Request $request){
  14.         $user=new User;
  15.         $user->name  =$request->name;        
  16.         $user->email =$request->email;
  17.         $user->password =bcrypt($request->password);
  18.         $user->save();
  19.         $user->newSubscription('main',$request->subscription)->create($request->token);
  20.         if($user->subscribed('main')){
  21.                returnresponse()->json(['msg'=>'Successfully subscribed']);
  22.         }
  23.            returnresponse()->json(['msg'=>'Oops there is something error with your input']);
  24.             
  25.     }
  27. }
<?php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppUser;

class HomeController extends Controller {

    public function subscription(){
        return view('subscription');
    }

    public function postSubscription(Request $request){
        $user = new User;
        $user->name  = $request->name;        
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();
        $user->newSubscription('main',$request->subscription)->create($request->token);
        if ($user->subscribed('main')) {
            return response()->json(['msg'=>'Successfully subscribed']);
        }
        return response()->json(['msg'=>'Oops there is something error with your input']);
            
    }

}

In above code within postSubscription method, i add a user first then subscribe the user with selected plan.

You will notice that we are getting a token as parameter in “create” method, This token is generated from sensitive card data and you will see in the next step that how it will generate.


Subscription Page

In this step, we will create a file where users will fill their details, to subscribe a plan for the application.

  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  6. <metaname="viewport"content="width=device-width, initial-scale=1">
  7. <title>Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example</title>
  8. <!-- Styles -->
  9. <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
  10. <linkrel="stylesheet"href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
  12. <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  13. <scriptsrc="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
  14. <scriptsrc="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
  15. </head>
  16. <body>
  17. <divclass="row">
  19. <formid="paymentForm"class="form-horizontal">
  20. <inputtype="hidden"name="_token"value="{{csrf_token()}}">
  21. <divclass="form-group">
  22. <labelclass="col-xs-3 control-label">Subscription Plan</label>
  23. <divclass="col-xs-5">
  24. <selectname="subscription"class="form-control">
  25. <optionvalue="diamond">Diamond ($20.00/month)</option>
  26. </select>
  27. </div>
  28. </div>
  29. <divclass="form-group">
  30. <labelclass="col-xs-3 control-label">Name</label>
  31. <divclass="col-xs-5">
  32. <inputtype="text"class="form-control"name="name"/>
  33. </div>
  34. </div>
  36. <divclass="form-group">
  37. <labelclass="col-xs-3 control-label">Email</label>
  38. <divclass="col-xs-5">
  39. <inputtype="email"class="form-control"name="email"/>
  40. </div>
  41. </div>
  43. <divclass="form-group">
  44. <labelclass="col-xs-3 control-label">Password</label>
  45. <divclass="col-xs-5">
  46. <inputtype="password"class="form-control"name="password"/>
  47. </div>
  48. </div>
  50. <divclass="form-group">
  51. <labelclass="col-xs-3 control-label">Credit card number</label>
  52. <divclass="col-xs-5">
  53. <inputtype="text"class="form-control"data-stripe="number"/>
  54. </div>
  55. </div>
  57. <divclass="form-group">
  58. <labelclass="col-xs-3 control-label">Expiration</label>
  59. <divclass="col-xs-3">
  60. <inputtype="text"class="form-control"placeholder="Month"data-stripe="exp-month"/>
  61. </div>
  62. <divclass="col-xs-2">
  63. <inputtype="text"class="form-control"placeholder="Year"data-stripe="exp-year"/>
  64. </div>
  65. </div>
  67. <divclass="form-group">
  68. <labelclass="col-xs-3 control-label">CVV</label>
  69. <divclass="col-xs-2">
  70. <inputtype="text"class="form-control"data-stripe="cvc"/>
  71. </div>
  72. </div>
  74. <divclass="form-group">
  75. <divclass="col-xs-9 col-xs-offset-3">
  76. <buttontype="submit"class="btn btn-primary">Sign Up</button>
  77. </div>
  78. </div>
  80. <inputtype="hidden"name="token"value=""/>
  81. </form>
  82. </div>
  83. <scriptsrc="https://js.stripe.com/v2/"></script>
  85. <script>
  86. $(document).ready(function() {
  87.     // Change the key to your one
  88.     Stripe.setPublishableKey('your_stripe_key');
  90.     $('#paymentForm')
  91.         .formValidation({
  92.             framework: 'bootstrap',
  93.             icon: {
  94.                 valid: 'glyphicon glyphicon-ok',
  95.                 invalid: 'glyphicon glyphicon-remove',
  96.                 validating: 'glyphicon glyphicon-refresh'
  97.             },
  98.             fields: {
  99.                 name: {
  100.                     validators: {
  101.                         notEmpty: {
  102.                             message: 'The name is required'
  103.                         }
  104.                     }
  105.                 },
  106.                 email: {
  107.                     validators: {
  108.                         notEmpty: {
  109.                             message: 'The email is required'
  110.                         }
  111.                     }
  112.                 },
  113.                 password: {
  114.                     validators: {
  115.                         notEmpty: {
  116.                             message: 'The password is required'
  117.                         }
  118.                     }
  119.                 },
  120.                 ccNumber: {
  121.                     selector: '[data-stripe="number"]',
  122.                     validators: {
  123.                         notEmpty: {
  124.                             message: 'The credit card number is required'
  125.                         },
  126.                         creditCard: {
  127.                             message: 'The credit card number is not valid'
  128.                         }
  129.                     }
  130.                 },
  131.                 expMonth: {
  132.                     selector: '[data-stripe="exp-month"]',
  133.                     row: '.col-xs-3',
  134.                     validators: {
  135.                         notEmpty: {
  136.                             message: 'The expiration month is required'
  137.                         },
  138.                         digits: {
  139.                             message: 'The expiration month can contain digits only'
  140.                         },
  141.                         callback: {
  142.                             message: 'Expired',
  143.                             callback: function(value, validator) {
  144.                                 value = parseInt(value, 10);
  145.                                 var year         = validator.getFieldElements('expYear').val(),
  146.                                     currentMonth = new Date().getMonth() + 1,
  147.                                     currentYear  = new Date().getFullYear();
  148.                                 if (value < 0 || value > 12) {
  149.                                     return false;
  150.                                 }
  151.                                 if (year == '') {
  152.                                     return true;
  153.                                 }
  154.                                 year = parseInt(year, 10);
  155.                                 if (year > currentYear || (year == currentYear && value >= currentMonth)) {
  156.                                     validator.updateStatus('expYear', 'VALID');
  157.                                     return true;
  158.                                 } else {
  159.                                     return false;
  160.                                 }
  161.                             }
  162.                         }
  163.                     }
  164.                 },
  165.                 expYear: {
  166.                     selector: '[data-stripe="exp-year"]',
  167.                     row: '.col-xs-3',
  168.                     validators: {
  169.                         notEmpty: {
  170.                             message: 'The expiration year is required'
  171.                         },
  172.                         digits: {
  173.                             message: 'The expiration year can contain digits only'
  174.                         },
  175.                         callback: {
  176.                             message: 'Expired',
  177.                             callback: function(value, validator) {
  178.                                 value = parseInt(value, 10);
  179.                                 var month        = validator.getFieldElements('expMonth').val(),
  180.                                     currentMonth = new Date().getMonth() + 1,
  181.                                     currentYear  = new Date().getFullYear();
  182.                                 if (value < currentYear || value > currentYear + 100) {
  183.                                     return false;
  184.                                 }
  185.                                 if (month == '') {
  186.                                     return false;
  187.                                 }
  188.                                 month = parseInt(month, 10);
  189.                                 if (value > currentYear || (value == currentYear && month >= currentMonth)) {
  190.                                     validator.updateStatus('expMonth', 'VALID');
  191.                                     return true;
  192.                                 } else {
  193.                                     return false;
  194.                                 }
  195.                             }
  196.                         }
  197.                     }
  198.                 },
  199.                 cvvNumber: {
  200.                     selector: '[data-stripe="cvc"]',
  201.                     validators: {
  202.                         notEmpty: {
  203.                             message: 'The CVV number is required'
  204.                         },
  205.                         cvv: {
  206.                             message: 'The value is not a valid CVV',
  207.                             creditCardField: 'ccNumber'
  208.                         }
  209.                     }
  210.                 }
  211.             }
  212.         })
  213.         .on('success.form.fv', function(e) {
  214.             e.preventDefault();
  215.             var $form = $(e.target);
  216.             // Reset the token first
  217.             $form.find('[name="token"]').val('');
  218.             Stripe.card.createToken($form, function(status, response) {
  219.                 if (response.error) {
  220.                     alert(response.error.message);
  221.                 } else {                  
  222.                     // Set the token value
  223.                     $form.find('[name="token"]').val(response.id);                 
  224.                     // Or using Ajax
  225.                     $.ajax({
  226.                         // You need to change the url option to your back-end endpoint
  227.                         url: "{{route('post-subscription')}}",
  228.                         data: $form.serialize(),
  229.                         method: 'POST',
  230.                         dataType: 'json'
  231.                     }).success(function(data) {
  232.                         alert(data.msg);                        
  233.                         // Reset the form
  234.                         $form.formValidation('resetForm', true);
  235.                     });
  236.                 }
  237.             });
  238.         });
  239. });
  240. </script>
  241. </body>
  242. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example</title>
    <!-- Styles -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
</head>
<body>
<div >

<form id="paymentForm" >
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <div >
        <label >Subscription Plan</label>
        <div >
            <select name="subscription" >
                <option value="diamond">Diamond ($20.00/month)</option>
            </select>
        </div>
    </div>
    <div >
        <label >Name</label>
        <div >
            <input type="text"  name="name" />
        </div>
    </div>

    <div >
        <label >Email</label>
        <div >
            <input type="email"  name="email" />
        </div>
    </div>

    <div >
        <label >Password</label>
        <div >
            <input type="password"  name="password" />
        </div>
    </div>

    <div >
        <label >Credit card number</label>
        <div >
            <input type="text"  data-stripe="number" />
        </div>
    </div>

    <div >
        <label >Expiration</label>
        <div >
            <input type="text"  placeholder="Month" data-stripe="exp-month" />
        </div>
        <div >
            <input type="text"  placeholder="Year" data-stripe="exp-year" />
        </div>
    </div>

    <div >
        <label >CVV</label>
        <div >
            <input type="text"  data-stripe="cvc" />
        </div>
    </div>

    <div >
        <div >
            <button type="submit" >Sign Up</button>
        </div>
    </div>

    <input type="hidden" name="token" value="" />
</form>
</div>
<script src="https://js.stripe.com/v2/"></script>

<script>
$(document).ready(function() {
    // Change the key to your one
    Stripe.setPublishableKey('pk_test_8FVTOTZ9myqpA4p1zTADRMhp');

    $('#paymentForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email is required'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        }
                    }
                },
                ccNumber: {
                    selector: '[data-stripe="number"]',
                    validators: {
                        notEmpty: {
                            message: 'The credit card number is required'
                        },
                        creditCard: {
                            message: 'The credit card number is not valid'
                        }
                    }
                },
                expMonth: {
                    selector: '[data-stripe="exp-month"]',
                    row: '.col-xs-3',
                    validators: {
                        notEmpty: {
                            message: 'The expiration month is required'
                        },
                        digits: {
                            message: 'The expiration month can contain digits only'
                        },
                        callback: {
                            message: 'Expired',
                            callback: function(value, validator) {
                                value = parseInt(value, 10);
                                var year         = validator.getFieldElements('expYear').val(),
                                    currentMonth = new Date().getMonth() + 1,
                                    currentYear  = new Date().getFullYear();
                                if (value < 0 || value > 12) {
                                    return false;
                                }
                                if (year == '') {
                                    return true;
                                }
                                year = parseInt(year, 10);
                                if (year > currentYear || (year == currentYear && value >= currentMonth)) {
                                    validator.updateStatus('expYear', 'VALID');
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    }
                },
                expYear: {
                    selector: '[data-stripe="exp-year"]',
                    row: '.col-xs-3',
                    validators: {
                        notEmpty: {
                            message: 'The expiration year is required'
                        },
                        digits: {
                            message: 'The expiration year can contain digits only'
                        },
                        callback: {
                            message: 'Expired',
                            callback: function(value, validator) {
                                value = parseInt(value, 10);
                                var month        = validator.getFieldElements('expMonth').val(),
                                    currentMonth = new Date().getMonth() + 1,
                                    currentYear  = new Date().getFullYear();
                                if (value < currentYear || value > currentYear + 100) {
                                    return false;
                                }
                                if (month == '') {
                                    return false;
                                }
                                month = parseInt(month, 10);
                                if (value > currentYear || (value == currentYear && month >= currentMonth)) {
                                    validator.updateStatus('expMonth', 'VALID');
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    }
                },
                cvvNumber: {
                    selector: '[data-stripe="cvc"]',
                    validators: {
                        notEmpty: {
                            message: 'The CVV number is required'
                        },
                        cvv: {
                            message: 'The value is not a valid CVV',
                            creditCardField: 'ccNumber'
                        }
                    }
                }
            }
        })
        .on('success.form.fv', function(e) {
            e.preventDefault();
            var $form = $(e.target);
            // Reset the token first
            $form.find('[name="token"]').val('');
            Stripe.card.createToken($form, function(status, response) {
                if (response.error) {
                    alert(response.error.message);
                } else {                  
                    // Set the token value
                    $form.find('[name="token"]').val(response.id);                 
                    // Or using Ajax
                    $.ajax({
                        // You need to change the url option to your back-end endpoint
                        url: "{{route('post-subscription')}}",
                        data: $form.serialize(),
                        method: 'POST',
                        dataType: 'json'
                    }).success(function(data) {
                        alert(data.msg);                        
                        // Reset the form
                        $form.formValidation('resetForm', true);
                    });
                }
            });
        });
});
</script>
</body>
</html>

Using stripe, we do not need to save sensitive card data, we pass these details to the Stripe server and stripe server will return a token if we do not get any error.

Click here to download this project from github: GitHub

Label :

PHP

Laravel PHP Framework

How To

MVC

Web Development

Hope this code and post will helped you for implement Monthly Subscription App using Stripe, Cashier and Laravel 5.4 with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

10  +    =  12

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US