Upload New File

payment.py

+import dash
+import dash_core_components as dcc #provides a set of higher-level components for building interactive dashboards.
+import dash_html_components as html #offers a library of HTML elements like divs, headings, paragraphs
+from dash.dependencies import Input, Output #define dependencies # can use it to create callback functions that respond to user interactions
+import dash_bootstrap_components as dbc #integrates the Bootstrap CSS framework into the Dash application.
+from app import app #the main configuration and layout of the Dash application
+payment = html.Div([
+    dbc.Container([ #structure the content with Bootstrap's grid system
+        dbc.Row([
+            dbc.Col(
+                html.H1("Payment Options", className="text-center"), #heading in the center as payment options
+                className="mb-4"
+            )
+        ]),
+        dbc.Row([
+            dbc.Col(
+                html.Label("Card Number"), #label
+                className="mb-3"
+            ),
+            dbc.Col( #inputing to the card number
+                dcc.Input(id='card-number', type='text', className="form-control"),
+                className="mb-3"
+            ),
+        ]),
+        dbc.Row([
+            dbc.Col(
+                html.Label("CVV"),
+                className="mb-3"
+            ),
+            dbc.Col(
+                dcc.Input(id='cvv', type='password', className="form-control"),
+                className="mb-3"
+            ),
+        ]),
+        dbc.Row([
+            dbc.Col(
+                html.Label("Expiration Date"),
+                className="mb-3"
+            ),
+            dbc.Col(
+                dcc.Input(id='expire-date', type='text', placeholder="MM/YYYY", className="form-control"),
+                className="mb-3"
+            ),
+        ]),
+        dbc.Row([
+            dbc.Col(
+                dbc.Alert(id='payment-status', color="success", className="mt-3"),
+                width=6
+            )
+        ]),
+        dbc.Row([
+            dbc.Col( #"submit payment" button to submit
+                html.Button("Submit Payment", id='submit-button', n_clicks=0, className="btn btn-primary btn-lg mt-3")
+            )
+        ])
+    ],style={'width':'50%','margin':'auto'}),
+    html.Img(src=app.get_asset_url('pay.gif'),id="login-vector") #an image to display on the web page
+],className="pay-outer-box",style={'display':'flex','align-items':'center','justify-content':'center'})
+
+@app.callback( #triggered when the "submit payment" button is pressed
+    Output('payment-status', 'children'),
+    Input('submit-button', 'n_clicks')
+)
+def update_payment_status(n_clicks): #if the button clicked, msg returns successfully
+    if n_clicks > 0:
+        return "Payment successful!"
+    return ""
+