Laravel 8 E-Commerce - Checkout With Stripe

In this video, we are going to learn about Checkout With Stripe.

So, let's see how we can implement the Checkout With Stripe option.

To integrate Stripe, we will use the Cartalyst stripe-laravel package.

First, let's install this package.

Open Google and search for "Cartalyst stripe-laravel".

Click on the link and follow the installation guide.

The first step is to add the cartalyst/stripe-laravel package to the composer.json file.

Go to the project and open the composer.json file.

Inside the require array, add the following code:

"cartalyst/stripe-laravel": "^13.0"

Next, go to the command prompt and run the following command:

composer update

Now, let's configure this package in the app.php file.

Go to the config directory and open the app.php file.

Inside the providers array, add the following code:

Cartalyst\Stripe\Laravel\StripeServiceProvider::class,

Copy this code and paste it inside the aliases array:

'Stripe' => Cartalyst\Stripe\Laravel\Facades\Stripe::class, 

Now, let's create a Stripe account.

Go to stripe.com and click on "Start now".

Enter your email ID, name, and password, and click on "Create account".

Once you have created an account, log in and click on the "Home" link.

You will see the Test API keys and Live API keys.

For testing purposes, we will use the Test API keys.

Once all testing is done, we will use the Live API keys.

Reveal the Test API key and copy it.

Open the .env file and add the Stripe secret key:

STRIPE_KEY=sk_test_51IfLWvGRFb8TqOPoEEZxZZWmnNwjAUlyvhtUuytY4G0qW2fsCP5EuXYTM6OVSjH3KnnH1WQBMhcBNEuB6N7ZNgA7008p18tNjn

Paste the key into the .env file.

Now, go to the checkout-component.blade.php view file.

Inside the checkout page, create a form for accepting card details.

Inside the payment-method div, add the following code:

<h4 class="title-box">Payment Method</h4>
@if($paymentmode == 'card')
<div class="wrap-address-billing">
	@if(Session::has('stripe_error'))
		<div class="alert alert-danger" role="alert">{{Session::get('stripe_error')}}</div>
	@endif
	<p class="row-in-form">
		<label for="card-no">Card Number:</label>
		<input  type="text" name="card-no" value="" placeholder="Card Number" wire:model="card_no">
		@error('card_no')  <span class="text-danger">{{$message}}</span> @enderror
	</p> 

	<p class="row-in-form">
		<label for="exp-month">Expiry Month:</label>
		<input  type="text" name="exp-month" value="" placeholder="MM" wire:model="exp_month">
		@error('exp_month')  <span class="text-danger">{{$message}}</span> @enderror
	</p> 

	<p class="row-in-form">
		<label for="exp-year">Expiry Year:</label>
		<input  type="text" name="exp-year" value="" placeholder="YYYY" wire:model="exp_year">
		@error('exp_year')  <span class="text-danger">{{$message}}</span> @enderror
	</p> 

	<p class="row-in-form">
		<label for="cvc">CVC:</label>
		<input  type="password" name="cvc" value="" placeholder="CVC" wire:model="cvc">
		@error('cvc')  <span class="text-danger">{{$message}}</span> @enderror
	</p> 
</div>  
@endif 

Next, go to the CheckoutComponent.php class file and create properties:

public $card_no;
public $exp_month;
public $exp_year;
public $cvv;

Inside the updated method, add the following code:

if($this->paymentmode == 'card')
{
	$this->validateOnly($fields,[
		'card_no' => 'required|numeric',
		'exp_month' => 'required|numeric',
		'exp_year' => 'required|numeric',
		'cvc' => 'required|numeric'
	]);
}

Inside the placeOrder method, add the following line of code:

if($this->paymentmode == 'card')
{
	$this->validate([
		'card_no' => 'required|numeric',
		'exp_month' => 'required|numeric',
		'exp_year' => 'required|numeric',
		'cvc' => 'required|numeric'
	]);
}   

Add the code for Stripe payment:

if($this->paymentmode == 'cod')
{
	$this->makeTransaction($order->id,'pending');
	$this->resetCart();
}  
else if($this->paymentmode == 'card')
{
	$stripe = Stripe::make(env('STRIPE_KEY'));

	try{
		$token = $stripe->tokens()->create([
			'card' => [
				'number' => $this->card_no,
				'exp_month' => $this->exp_month,
				'exp_year' => $this->exp_year,
				'cvc' => $this->cvc
			]
		]);

		if(!isset($token['id']))
		{
			session()->flash('stripe_error','The stripe token was not generated correctly!');
			$this->thankyou = 0;
		}

		$customer = $stripe->customers()->create([
			'name' => $this->firstname . ' ' . $this->lastname,
			'email' =>$this->email,
			'phone' =>$this->mobile,
			'address' => [
				'line1' =>$this->line1,
				'postal_code' => $this->zipcode,
				'city' => $this->city,
				'state' => $this->province,
				'country' => $this->country
			],
			'shipping' => [
				'name' => $this->firstname . ' ' . $this->lastname,
				'address' => [
					'line1' =>$this->line1,
					'postal_code' => $this->zipcode,
					'city' => $this->city,
					'state' => $this->province,
					'country' => $this->country
				],
			],
			'source' => $token['id']
		]);

		$charge = $stripe->charges()->create([
			'customer' => $customer['id'],
			'currency' => 'USD',
			'amount' => session()->get('checkout')['total'],
			'description' => 'Payment for order no ' . $order->id
		]);

		if($charge['status'] == 'succeeded')
		{
			$this->makeTransaction($order->id,'approved');
			$this->resetCart();
		}
		else
		{
			session()->flash('stripe_error','Error in Transaction!');
			$this->thankyou = 0;
		}
	} catch(Exception $e){
		session()->flash('stripe_error',$e->getMessage());
		$this->thankyou = 0;
	}
}  

All done! Let's test it out.

Switch to the browser and refresh the page.

Go to the shop page and add some products.

Click on checkout and add the billing details.

Check the "Debit/Credit Card" option and click on checkout.

You should see the thank you page, indicating that the payment was successful.

Let's check the Stripe dashboard.

Go to Stripe and you should see the last payment.

And that's it!

In this way, you can implement Checkout With Stripe.