Stripe Payment Integration with Laravel

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

1 Create the shopping cart
2 Create the checkout page with 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 product to it. I will hard code the product in HTML file and this card is only for demosntration purpose only. What we consider here only the total values of the shopping cart

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

Next I am going to create CartController using artisan command

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

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

Now you can start the server using following command

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 pre-built UI component from the Stripe

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

Then your action checkout should be like this

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

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 to the form. All the work are 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 token, amount etc to the Stripe server for charging the amout

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

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

Then you can make 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

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 submit to make a charge.
So we need to make the action of the form. You can add following php code to routes\
web.php file

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

Then you can add the following code to CartController

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