How to Integrate Stripe Payment with Vue js & Laravel

1 year ago admin Laravel

In this tutorial, we will see how to integrate stripe payment with Vue js and Laravel, I assume that you have already created a stripe account and you have your API keys.


Install the packages

First, let's install the packages that we need. 

                                                    
                                                                                                                
//for the frontend 
npm install @vue-stripe/vue-stripe
//for the backend
composer require stripe/stripe-php

Create the controller

Next, create the PaymentController inside we receive the amount to pay and send the checkout form link to the frontend.

                                                        
                                                                                                                        
<?php

namespace App\Http\Controllers;

use Stripe\Stripe;
use ErrorException;
use Illuminate\Http\Request;
use Stripe\Checkout\Session;

class PaymentController extends Controller
{
    //
    public function payByStripe(Request $request)
    {
        Stripe::setApiKey('YOUR SECRET KEY');
 
        try {

            $checkout_session = Session::create([
                'line_items' => [[
                    'price_data' => [
                        'currency' => 'usd',
                        'product_data' => [
                            'name' => 'T-SHIRT',
                        ],
                        'unit_amount' => $request->price * 100,
                    ],
                    'quantity' => 1,
                ]],
                'mode' => 'payment',
                'success_url' => $request->success_url
            ]);

            return response()->json(['url' => $checkout_session->url]);

        } catch (ErrorException $e) {
            return response()->json(['error' => $e->getMessage()]);
        }
    }
}

Create the route

Next, we will add the route inside routes/api.php.

                                                        
                                                                                                                        
Route::post('order/pay',[PaymentController::class,'payByStripe']);

Create the Stripe component

Next, let's create the Stripe component inside we have a button 'Pay now' once we click on we send the request to the backend with the amount to pay and the success route to be redirected to after the payment succeeds.

Finally, we will receive the link that takes us to the stripe checkout form once the payment is done we will be redirected to the success route already sent by the request. 

                                                        
                                                                                                                        
<template>
    <div class="d-grid gap-2 col-6 mx-auto">
        <button class="btn btn-primary" @click="fetchPaymentUrl">
            Pay now
        </button>
    </div>
</template>

<script setup>
    import axios from 'axios'

    const fetchPaymentUrl = async () => {
        try {
            const response = await axios.post(`http://127.0.0.1:8000/order/pay`,
            {
                price: 20,
                success_url: `http://127.0.0.1:5173/#/payment/success`
            })
            window.location.href = response.data.url
        } catch (error) {
            console.log(error);
        }
    }

</script>

<style>
</style>

Related Tuorials

How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 3

In the third part of this tutorial, we will display the products on the home page and add, update, a...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 2

In the second part of this tutorial, we will add the controllers we need with the function...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 1

In this tutorial, we will Learn how to create a fully functional shopping cart in Laravel 12. The us...


How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...


How to Add Middleware in Laravel 12

In this tutorial, we will see how to add middleware in Laravel 12, Now we can use bootstrap/app.php...


How to Add React js to Laravel 12 with Vite

In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Larav...