Stripe Payment Integration with Laravel

In this tutorial, we will see how to integrate the Stripe payment system with Laravel

1 Create the shopping cart
2 Create the checkout page with the payment form and get token
3 Charging the customer

Create the shopping cart

I am going to create the shopping cart now and add some products to it. I will hard code the product in an HTML file and this cart is only for demonstration purposes only. What we consider here are only the total values of the shopping cart

I will create the resources\view\cart.blade.php and it will have the following code

@extends('layouts.app')

@section('content')

@endsection

Next, I am going to create CartController using artisan command

php artisan make:controller CartController

Now I will create the show() method to display the cart

This is the route in routes\web.php to display the cart

Route::get('/cart', 'CartController@show');

Now you can start the server using the following command

 php artisan serve --port=8001

You can view the cart at http://127.0.0.1:8001/cart

Create the checkout page

Now I am going to create the checkout page. To create the payment form I am using Stripe Element which is a pre-built UI component from the Stripe

We need route, action, and view to implement checkout.
So our route should be like this

Route::post('/cart/checkout', 'CartController@checkout')->name('cart.checkout');

Then your action checkout should be like this

 public function checkout(){
    	return view("checkout");
    }

Now you can create the views\checkout.blade.php to start the checkout page code
You need the following code in your file

@extends('layouts.app')
@section('content')
 <script src="https://js.stripe.com/v3/" type="text/javascript"></script></pre>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><form id="payment-form" action="{{route('cart.charge')}}" method="post">{{ csrf_field() }}
<div class="form-row"><label for="card-element"> Credit or debit card </label>
<div id="card-element"><!-- a Stripe Element will be inserted here. --></div>
<!-- Used to display Element errors -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>

</form></div>
<div class="col-md-4"></div>
</div>
</div>
@endsection

@section('script')
<script src="{{asset('js/stripe-checkout.js')}}"> </script>
@endsection

On the top of the file, we have the Javascript code https://js.stripe.com/v3/ from Stripe. Then we have the form which is a Stripe Element.
So Stripe Element will be inserted automatically and it will show the error messages when you enter the details into the form. All the work is handled by the Stripe Javascript code.

To make a payment via Stripe, you need to follow two steps.
1 Get the token from the Stripe server
2 Send back the token, amount, etc to the Stripe server for charging the amount

So to get the token you need some javascript code. I am going to do that code in public\js\stripe-checkout.js file

var stripe = Stripe('pk_test_0i3MPhnul2126bQ9HqdyCmr3');
var elements = stripe.elements();


// Custom styling can be passed to options when creating an Element.
var style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: "#32325d",
  }
};

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');


card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

First, you have to get the public key from the Stripe.com website.

Then you can make a reference to the element. You can create the style which can be used when you create the element. Finally, you can mount the card.

To show the Card Errors I have used the change event of the card element.

Now you can add the following code to generate the token from the server

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});


function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

Now you can see the following screen

When you hit the Submit Payment button it will run the above JavaScript code and get the token from Strip and It will be passed to stripeTokenHandler() function. Finally, it will call the form submission.

3 Charging the customer

Once you get the Token form will be submitted to make a charge.
So we need to make the action of the form. You can add the following Laravel code to routes\
web.php file

Route::post('/cart/charge', 'CartController@charge')->name('cart.charge');

You need to install stripe/php code to make the charge from Laravel. You can go to the terminal and run the following command

composer require stripe/stripe-php

Then you can add the following code to CartController

public function charge(){
    	\Stripe\Stripe::setApiKey("sk_test_rHjOdqU5sokYSnU973P2DCnr");

			// Token is created using Checkout or Elements!
			// Get the payment token ID submitted by the form:
			$token = $_POST['stripeToken'];

			// Charge the user's card:
			$charge = \Stripe\Charge::create(array(
			  "amount" => 1000,
			  "currency" => "usd",
			  "description" => "Example charge",
			  "source" => $token,
			));
    }

You can get the API key from the API section of the stripe.com

These are the completed code to make the Stripe payment. Once you make the payment you can see it on stripe.com

References

https://stripe.com/docs/checkout/integration-builder