How to integrate Stripe payment gateway in laravel

Hello Laravel enthusiasts, welcome back. Here I am going to discuss something very exciting. You will know how to integrate Stripe payment gateway in Laravel applications.

Working Demo      Project on Github

You can also watch the video on YouTube here

Why Stripe?

There are so many payment gateways available, one of the most popular gateways is PayPal, but Stripe has some advantages over PayPal –  simple, hassle-free, easier integration, setup, maintenance, and the seamless checkout experience. Moreover integrating stripe with Laravel is a breeze.

We just need a payment form which collects card information like card number, expiry date, and a CVC code. When these details are sent to stripe it validates and returns a token which is used to process the payment.

I also made a post on PayPal payment gateway integration, check how to integrate PayPal payment gateway integration here.

Getting started with Stripe

• First, we need to register with stripe, go to https://stripe.com/ and register yourself there.
• Now get the public and private keys from your account which are provided in your account settings.
• Make sure you set your account as a test account so that real transactions do not occur.

So now let’s install stripe in our Laravel app,  here I will install it using composer.

composer require stripe/stripe-php

While in test mode, we cannot use genuine card information, so it provides us with some test cards,

Payment form

As said earlier, we need a form to collect some data. There are many ready-made awesome stripe payment form, we will grab one and use it here.

The form I used here is from http://bootsnipp.com/snippets/featured/responsive-stripe-payment-form

We modify this form a bit to fit Laravel environment. The form is as below,

<form accept-charset="UTF-8" action="/" class="require-validation"
    data-cc-on-file="false"
    data-stripe-publishable-key="test_public_key"
    id="payment-form" method="post">
    {{ csrf_field() }}
    <div class='form-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'>
        <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'>
        <div class='col-xs-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-4 form-group expiration required'>
            <label class='control-label'>Expiration</label> <input
                class='form-control card-expiry-month' placeholder='MM' size='2'
                type='text'>
        </div>
        <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label> <input
                class='form-control card-expiry-year' placeholder='YYYY' size='4'
                type='text'>
        </div>
    </div>
    <div class='form-row'>
        <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
                Total: <span class='amount'>$300</span>
            </div>
        </div>
    </div>
    <div class='form-row'>
        <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button'
                type='submit' style="margin-top: 10px;">Pay »</button>
        </div>
    </div>
    <div class='form-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>
</form>

We place the public key of our stripe account in the data attribute which we use later for processing the payment process.

<form  ....
data-stripe-publishable-key="test_public_key"
....
</form>

Validation part

The payment form which we used, has some validation to it,

$(function() {
  $('form.require-validation').bind('submit', function(e) {
    var $form         = $(e.target).closest('form'),
        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(); // cancel on first error
      }
    });
  });
});

Working Demo      Project on Github

Generate a token

Here, when the submit button is clicked, we do not actually submit the form, we first generate a stripe token which processes the payment and then uses that token to Charge the user with the specified amount.

Now we get the card number, expiry month, expiry year and CVC code and with these details, the stripe generates a token.

$form.on('submit', function(e) {
    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);
    }
  });

Now in this stripeResponseHandler function, append the token which we got to the form input field,

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'];
        // insert the token into the form so it gets submitted to the server
        $form.find('input[type=text]').empty();
        $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
        $form.get(0).submit();
    }
}

now the form gets submitted and will call to the action specified in the form action.

Stripe Charge

When the form is submitted, it calls the following action.

Route::post ( '/', function (Request $request) {
    \Stripe\Stripe::setApiKey ( 'test_SecretKey' );
    try {
        \Stripe\Charge::create ( array (
                "amount" => 300 * 100,
                "currency" => "usd",
                "source" => $request->input ( 'stripeToken' ), // obtained with Stripe.js
                "description" => "Test payment." 
        ) );
        Session::flash ( 'success-message', 'Payment done successfully !' );
        return Redirect::back ();
    } catch ( \Exception $e ) {
        Session::flash ( 'fail-message', "Error! Please Try again." );
        return Redirect::back ();
    }
} );

We show, if any, success and error messages and redirect back to the main page.

As we show in the form that we charge $300, here we set the currency to 300 * 100. We multiply by 100 because the default currency unit in Stripe is cent.

Here this tutorial is just a simple tutorial, so we set a static amount, also did not use any database to save the transaction details.

If we need to save those details we can save then in the above function and also can get the amount value from the form.

This is how the dashboard looks,

Working Demo      Project on Github

Videos: Working Demo and Code Explanation

You can watch this playlist on YouTube here.

Also please feel free to look at other payment gateway implementations like PayPal payment gateway Integration and all other posts here.