109 lines
2.5 KiB
JavaScript
109 lines
2.5 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
const MIN_AMOUNT = 1.0; // Minimum allowed amount
|
|
|
|
const GooglePayUPIButton = ({
|
|
upiId = "paytmqr6q5qpv@ptys",
|
|
name = "Pozomind Technologies Private Limited",
|
|
note = "Test Payment",
|
|
merchantCode = "7372",
|
|
merchandId = "BCR2DN7T5GJJ7JSR"
|
|
|
|
}) => {
|
|
const [amount, setAmount] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
const handlePayment = () => {
|
|
const amt = parseFloat(amount);
|
|
|
|
// ✅ Validate amount
|
|
if (isNaN(amt) || amt < MIN_AMOUNT) {
|
|
setError(`Please enter a valid amount (minimum ₹${MIN_AMOUNT})`);
|
|
return;
|
|
}
|
|
|
|
setError("");
|
|
|
|
// ✅ Generate a unique transaction reference
|
|
const transactionRef = `TXN${Date.now()}`;
|
|
|
|
// ✅ Universal UPI scheme
|
|
const upiLink = `upi://pay?pa=${encodeURIComponent(
|
|
upiId
|
|
)}&pn=${encodeURIComponent(name)}&mid=${encodeURIComponent(
|
|
"AzqifC58839792984360"
|
|
)}&tn=${encodeURIComponent(note)}&am=${encodeURIComponent(
|
|
amt.toFixed(2)
|
|
)}&cu=INR`;
|
|
|
|
|
|
console.log("Generated UPI Link:", upiLink);
|
|
|
|
// ✅ Open directly in any UPI app
|
|
window.location.href = upiLink;
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<h2>UPI Payment Gateway</h2>
|
|
<p>Enter the amount:</p>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
placeholder={`₹${MIN_AMOUNT} or more`}
|
|
style={styles.input}
|
|
/>
|
|
<button onClick={handlePayment} style={styles.button}>
|
|
Pay Now
|
|
</button>
|
|
{error && <p style={styles.error}>{error}</p>}
|
|
<p style={styles.note}>
|
|
Works with Google Pay, PhonePe, Paytm, and other UPI apps.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const styles = {
|
|
container: {
|
|
fontFamily: "Arial, sans-serif",
|
|
textAlign: "center",
|
|
padding: "40px",
|
|
maxWidth: "400px",
|
|
margin: "50px auto",
|
|
background: "#f9fafb",
|
|
borderRadius: "12px",
|
|
boxShadow: "0 0 10px rgba(0,0,0,0.1)",
|
|
},
|
|
input: {
|
|
padding: "10px",
|
|
width: "80%",
|
|
marginBottom: "15px",
|
|
fontSize: "16px",
|
|
borderRadius: "6px",
|
|
border: "1px solid #ccc",
|
|
},
|
|
button: {
|
|
backgroundColor: "#0A66C2",
|
|
color: "white",
|
|
padding: "12px 25px",
|
|
border: "none",
|
|
borderRadius: "8px",
|
|
fontSize: "16px",
|
|
cursor: "pointer",
|
|
},
|
|
error: {
|
|
color: "red",
|
|
marginTop: "10px",
|
|
},
|
|
note: {
|
|
marginTop: "15px",
|
|
color: "#555",
|
|
fontSize: "14px",
|
|
},
|
|
};
|
|
|
|
export default GooglePayUPIButton;
|