Skip to content

Commit 1a63eb6

Browse files
pavanbadempetpavanbadempet
committed
feat: Implement dedicated payment gateway UI
1 parent c74ce7e commit 1a63eb6

File tree

1 file changed

+112
-51
lines changed

1 file changed

+112
-51
lines changed

‎frontend/views/pricing_view.py‎

Lines changed: 112 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,115 @@
99
from frontend.utils import api
1010

1111
def render_pricing_page():
12+
# --- STATE MANAGEMENT ---
13+
if 'show_payment' not in st.session_state:
14+
st.session_state.show_payment = False
15+
16+
# --- PAYMENT VIEW (Modal-like "Middle Gateway") ---
17+
if st.session_state.show_payment:
18+
# Full width container for the payment experience
19+
st.markdown("""
20+
<div style="text-align: center; padding: 2rem 0;">
21+
<h2 style="color: #F8FAFC; margin-bottom: 0.5rem;">Secure Payment Gateway</h2>
22+
<p style="color: #94A3B8;">Completing transaction for <b>Diagnostic Center License</b></p>
23+
</div>
24+
""", unsafe_allow_html=True)
25+
26+
# Centered Layout
27+
c1, c2, c3 = st.columns([1, 2, 1])
28+
with c2:
29+
st.info("Initializing Secure Connection to Razorpay...")
30+
31+
# Create Order
32+
with st.spinner("Contacting Banking Servers..."):
33+
resp = api.create_payment_order(249900, "diagnostic_tier")
34+
35+
if resp:
36+
order_id = resp['id']
37+
key_id = resp['key_id']
38+
amount = resp['amount']
39+
curr = resp['currency']
40+
41+
# Full-size Payment Interface
42+
html_code = f"""
43+
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
44+
<div style="background: #1E293B; padding: 30px; border-radius: 12px; text-align: center; color: white; border: 1px solid #334155;">
45+
<h3 style="margin-top:0;">Confirm Payment</h3>
46+
<p style="font-size: 1.5rem; font-weight: bold; color: #60A5FA;">₹2,499.00</p>
47+
<p style="color: #94A3B8; margin-bottom: 20px;">Secure SSL Connection</p>
48+
49+
<button id="rzp-button1" style="
50+
background: #3B82F6;
51+
color: white;
52+
border: none;
53+
padding: 12px 24px;
54+
border-radius: 6px;
55+
font-weight: 600;
56+
font-size: 1rem;
57+
cursor: pointer;
58+
transition: background 0.2s;
59+
width: 100%;
60+
max-width: 300px;
61+
">Pay Now</button>
62+
63+
<div id="payment-status" style="margin-top: 20px;"></div>
64+
</div>
65+
66+
<script>
67+
var options = {{
68+
"key": "{key_id}",
69+
"amount": "{amount}",
70+
"currency": "{curr}",
71+
"name": "AI Healthcare System",
72+
"description": "Diagnostic Center License",
73+
"image": "https://cdn-icons-png.flaticon.com/512/3063/3063823.png",
74+
"order_id": "{order_id}",
75+
"handler": function (response){{
76+
document.getElementById('payment-status').innerHTML = '<p style="color:#4ADE80; font-weight:bold;">✅ Payment Successful! Redirecting...</p>';
77+
// You could trigger a streamlit rerun/callback here if embedded differently
78+
alert("Payment Successful! ID: " + response.razorpay_payment_id);
79+
}},
80+
"prefill": {{
81+
"name": "Clinic Admin",
82+
"email": "admin@clinic.com"
83+
}},
84+
"theme": {{
85+
"color": "#3B82F6"
86+
}},
87+
"modal": {{
88+
"ondismiss": function() {{
89+
console.log('Checkout form closed');
90+
}}
91+
}}
92+
}};
93+
94+
var rzp1 = new Razorpay(options);
95+
96+
document.getElementById('rzp-button1').onclick = function(e){{
97+
rzp1.open();
98+
e.preventDefault();
99+
}}
100+
101+
// Auto-open for convenience
102+
setTimeout(function() {{ rzp1.open(); }}, 1000);
103+
</script>
104+
"""
105+
components.html(html_code, height=600, scrolling=False)
106+
107+
# Back Button
108+
if st.button("← Cancel & Return to Plans", key="cancel_pay"):
109+
st.session_state.show_payment = False
110+
st.rerun()
111+
112+
else:
113+
st.error("Could not initiate payment session. Please check your internet connection.")
114+
if st.button("← Go Back"):
115+
st.session_state.show_payment = False
116+
st.rerun()
117+
118+
return # STOP execution here so we don't render pricing cards
119+
120+
# --- PRICING CARDS VIEW (Default) ---
12121
# Inject responsive CSS for pricing cards
13122
st.markdown("""
14123
<style>
@@ -116,56 +225,8 @@ def render_pricing_page():
116225

117226
# Use simple True/False for width to avoid deprecation confusion, or useContainerWidth if supported
118227
if st.button("Upgrade Facility", key="upgrade_pro", type="primary", use_container_width=True):
119-
with st.spinner("Initializing Clinical License..."):
120-
# Create Order (2499 INR = 249900 paise)
121-
resp = api.create_payment_order(249900, "diagnostic_tier")
122-
123-
if resp:
124-
order_id = resp['id']
125-
key_id = resp['key_id']
126-
amount = resp['amount']
127-
curr = resp['currency']
128-
129-
html_code = f"""
130-
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
131-
<script>
132-
var options = {{
133-
"key": "{key_id}",
134-
"amount": "{amount}",
135-
"currency": "{curr}",
136-
"name": "AI Healthcare System",
137-
"description": "Diagnostic Center License",
138-
"image": "https://cdn-icons-png.flaticon.com/512/3063/3063823.png",
139-
"order_id": "{order_id}",
140-
"handler": function (response){{
141-
alert("License Activation Successful! Payment ID: " + response.razorpay_payment_id + "\\nYour facility dashboard will be upgraded shortly.");
142-
}},
143-
"prefill": {{
144-
"name": "Clinic Admin",
145-
"email": "admin@clinic.com"
146-
}},
147-
"theme": {{
148-
"color": "#3B82F6"
149-
}},
150-
"modal": {{
151-
"ondismiss": function() {{
152-
console.log('Checkout form closed');
153-
}}
154-
}}
155-
}};
156-
var rzp1 = new Razorpay(options);
157-
rzp1.open();
158-
// Try to auto-focus if possible, though sandboxed
159-
</script>
160-
<div style="color: #64748B; font-size: 0.9rem; padding: 20px; text-align: center;">
161-
<p>Secure Payment Gateway Initialized.</p>
162-
<p>If the popup didn't appear, ensure popups are allowed.</p>
163-
</div>
164-
"""
165-
# Increased HEIGHT to allow the embedded form to show if it doesn't pop out
166-
components.html(html_code, height=600, scrolling=True)
167-
else:
168-
st.error("Could not initiate payment. Please try again.")
228+
st.session_state.show_payment = True
229+
st.rerun()
169230

170231
st.markdown("</div>", unsafe_allow_html=True)
171232

@@ -176,7 +237,7 @@ def render_pricing_page():
176237
<h3 style="margin-top: 0; color: #F8FAFC; font-weight: 600;">Hospital Network</h3>
177238
<div style="font-size: 2.5rem; font-weight: 700; margin: 1rem 0; color: #E2E8F0;">Custom</div>
178239
<p style="color: #94A3B8; font-size: 0.9rem;">For large healthcare chains</p>
179-
<div style="margin: 2rem 0; text-align: left; font-size: 0.9rem;">
240+
<div style="margin: 2rem 0; text-align: left; font-size: 0.9rem; color: #CBD5E1;">
180241
<div style="margin-bottom: 0.5rem;">✅ Full HL7 / FHIR Integration</div>
181242
<div style="margin-bottom: 0.5rem;">✅ Custom AI Model Tuning</div>
182243
<div style="margin-bottom: 0.5rem;">✅ On-Premise Deployment</div>

0 commit comments

Comments
 (0)