How to Integrate Stripe Payment with React js & Laravel 10 Part 2
11 months ago
admin
Reactjs
In the second part of this tutorial, we are going to handle the front end, we will create the CheckoutForm, OrderSummary, and Stripe components and will see how to integrate the Stripe payment inside the OrderSummary component.
Create the CheckoutForm component
So let's create the CheckoutForm component and add the code below inside.
import { PaymentElement } from "@stripe/react-stripe-js";
import { useState } from "react";
import { useStripe, useElements } from "@stripe/react-stripe-js";
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setIsProcessing(true);
const response = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
},
redirect: 'if_required'
});
if (response.error && response.error.type === "card_error" || response.error && response.error.type === "validation_error") {
setMessage(response.error.message);
} else if(response.paymentIntent.id) {
//display success message or redirect user
}
setIsProcessing(false);
};
return (
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<button disabled={isProcessing || !stripe || !elements} id="submit">
<span id="button-text">
{isProcessing ? "Processing ... " : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
);
}
Create the Stripe component
Next, let's create the Stripe component and add the code below inside.
import React, { useEffect, useState } from 'react';
import {loadStripe} from '@stripe/stripe-js';
import {Elements} from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';
import axios from 'axios';
import { BASE_URL } from '../../Helpers/Url';
export default function Stripe({total}) {
const stripePromise = loadStripe('Your Publishable Key');
const [clientSecret, setClientSecret] = useState("");
const items = [{ amount: total }];
useEffect(() => {
fetchClientSecret();
}, []);
const fetchClientSecret = async () => {
try {
const response = await axios.post(`${BASE_URL}order/pay`, {
items,
});
setClientSecret(response.data.clientSecret);
} catch (error) {
console.log(error);
}
}
return (
<>
{
stripePromise && clientSecret && <Elements stripe={stripePromise} options={{clientSecret}}>
<CheckoutForm />
</Elements>
}
</>
);
}
Create the OrderSummary Component
Finally, let's create the OrderSummary component and add the code below inside.
import React from 'react';
import { useSelector } from 'react-redux';
import Stripe from './Stripe';
export default function OrderSummary() {
const { cartItems } = useSelector(state => state.cart);
let amount = cartItems.reduce((acc,item) => acc += item.price * item.quantity, 0);
return (
<div className="container">
<div className="row my-3">
<div className="col-md-6 mx-auto">
<Stripe total={amount} />
</div>
</div>
</div>
)
}