PaymentComponent.js

 import React from 'react';


const PaymentComponent = ({ amount, rideId, onPaymentSuccess, onPaymentFailure }) => {
    const handlePayment = (event) => {
        event.preventDefault();

        if (!window.Razorpay) {
            console.error('Razorpay is not loaded');
            return;
        }

        const options = {
            key: 'rzp_test_LMZHnNT5VlTSU1',
            amount: amount * 100, // Amount in paise
            currency: 'INR',
            name: 'RideShare',
            description: 'Payment For Ride',
            handler: function (response) {
                console.log('Payment successful:', response);
                alert(`Payment successful! Payment ID: ${response.razorpay_payment_id}`);

                const paymentId = response.razorpay_payment_id;
                const paymentStatus = 'success'; // Assuming payment was successful
                const paymentAmount = amount;

                const paymentPayload = {
                    paymentId: paymentId,
                    status: paymentStatus,
                    amount: paymentAmount,
                    rideId: rideId // Include the RideId here
                };

                // Send payment data to the backend
                fetch('https://localhost:44345/api/payment/savePayment', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(paymentPayload)
                })
                .then(res => {
                    if (!res.ok) {
                        throw new Error(`HTTP error! status: ${res.status}`);
                    }
                    return res.json();
                })
                .then(data => {
                    if (data.success) {
                        console.log('Payment saved to the database');
                        if (onPaymentSuccess && typeof onPaymentSuccess === 'function') {
                            onPaymentSuccess(paymentId);
                        }
                    } else {
                        console.error('Failed to save payment ID');
                        if (onPaymentFailure && typeof onPaymentFailure === 'function') {
                            onPaymentFailure();
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    if (onPaymentFailure && typeof onPaymentFailure === 'function') {
                        onPaymentFailure();
                    }
                });
            },
            modal: {
                ondismiss: function () {
                    alert('Payment was not completed.');
                    if (onPaymentFailure && typeof onPaymentFailure === 'function') {
                        onPaymentFailure();
                    }
                }
            },
            prefill: {
                name: 'Customer Name',
                email: 'customer@example.com',
                contact: '9999999999',
            },
            theme: {
                color: '#F37254',
            },
        };

        const razorpay = new window.Razorpay(options);
        razorpay.open();
    };

    return (
        <div>
            <h2>Payment</h2>
            <p>Amount: ₹{amount}</p>
            <button
                onClick={handlePayment}
                style={{
                    backgroundColor: '#2563eb',
                    color: 'white',
                    padding: '10px 15px',
                    border: 'none',
                    borderRadius: '5px',
                    cursor: 'pointer',
                    textAlign: 'center',
                    display: 'inline-block',
                    marginTop: '10px',
                    fontSize: '16px',
                    transition: 'background-color 0.3s ease',
                }}
            >
                Pay Now
            </button>
        </div>
    );
};

export default PaymentComponent;

Comments

Post a Comment

Popular posts from this blog

Homesit

$scope.compressImageAndUpload = async function() {     const fileInput = $scope.view.wdg['FileUpload-1'].file;     if (!fileInput || fileInput.length === 0) {         alert("Please select an image first.");         return;     }     const file = fileInput[0];     const compressedBase64 = await compressImage(file);     const byteCharacters = atob(compressedBase64);     const byteNumbers = Array.from(byteCharacters, c => c.charCodeAt(0));     const byteArray = new Uint8Array(byteNumbers);     const compressedBlob = new Blob([byteArray], { type: "image/jpeg" });     uploadToRepository(compressedBlob, file.name); }; function compressImage(file) {     return new Promise((resolve, reject) => {         const reader = new FileReader();         reader.readAsDataURL(file);         rea...
Read more

Login.js

  import React , { useState } from 'react' ; import { Link , useNavigate } from 'react-router-dom' ; const Login = () => {     const navigate = useNavigate ();     const [ email , setEmail ] = useState ( '' );     const [ password , setPassword ] = useState ( '' );     const [ emailError , setEmailError ] = useState ( '' );     const [ passwordError , setPasswordError ] = useState ( '' );     const [ modalMessage , setModalMessage ] = useState ( '' );     const [ modalVisible , setModalVisible ] = useState ( false );     const handleSubmit = async ( event ) => {         event . preventDefault ();                 // Email validation         const emailRegex = / ^ [ a-zA-Z0-9._%+- ] + @ [ a-zA-Z0-9.- ] +\. [ a-zA-Z ] {2,} $ / ;         if ( ! emailRegex . test ( email...
Read more