How to Integrate Stripe Payment with Vue js & 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>