From 39cd1d0272a3fac17869ec7b86a0f636001aa3cb Mon Sep 17 00:00:00 2001
From: Pelle Koster <pelle.koster@geant.org>
Date: Thu, 19 Dec 2024 10:54:31 +0100
Subject: [PATCH] style checkout page
---
manage-dev.py | 1 +
.../stripe_checkout/static/main.css | 80 +++++++++++++++++++
.../stripe_checkout/templates/checkout.html | 50 ++++++------
3 files changed, 108 insertions(+), 23 deletions(-)
diff --git a/manage-dev.py b/manage-dev.py
index c898e67..3f96004 100755
--- a/manage-dev.py
+++ b/manage-dev.py
@@ -7,6 +7,7 @@ import sys
def main():
"""Run administrative tasks."""
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "stripe_checkout.settings.dev")
+ os.environ.setdefault("CONFIG_FILENAME", "config.json")
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
diff --git a/stripe_checkout/stripe_checkout/static/main.css b/stripe_checkout/stripe_checkout/static/main.css
index e69de29..fac5205 100644
--- a/stripe_checkout/stripe_checkout/static/main.css
+++ b/stripe_checkout/stripe_checkout/static/main.css
@@ -0,0 +1,80 @@
+body {
+ font-family: sans-serif;
+ color: #101010;
+}
+.flex {
+ display: flex;
+}
+.flex.center {
+ justify-content: center;
+ align-items: center;
+}
+.flex.column {
+ flex-direction: column;
+}
+.checkout-summary {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 3fr 1fr;
+ max-width: 300px;
+ padding: 4px;
+ margin: 10px;
+}
+.checkout-summary .item {
+ padding: 0px 4px 4px 0px;
+ border-right-style: solid;
+ border-width: 1px;
+}
+.checkout-summary .price {
+ padding-left: 4px;
+ text-align: right;
+}
+.checkout-summary .total {
+ padding-top: 4px;
+ border-top-style: solid;
+ border-top-width: 1px;
+ font-weight: bold;
+}
+.checkout-card {
+ padding: 2rem;
+ border: solid;
+ border-radius: 2rem;
+ border-width: 1px;
+ max-width: 800px;
+}
+
+.button {
+ background-color: #04aa6d; /* Green */
+ border: none;
+ color: white;
+ border-radius: 4px;
+ height: 32px;
+ padding: 0 12px 0 12px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ max-width: fit-content;
+ cursor: pointer;
+}
+.button:active,
+.button:hover {
+ background-color: #03794e;
+}
+#checkout-form {
+ width: 100%;
+ max-width: 200px;
+}
+#checkout-form > label {
+ font-size: smaller;
+ margin-bottom: 2px;
+}
+#checkout-form > input,
+#checkout-form > select {
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+#checkout-form > input {
+ width: 192px;
+}
\ No newline at end of file
diff --git a/stripe_checkout/stripe_checkout/templates/checkout.html b/stripe_checkout/stripe_checkout/templates/checkout.html
index 75ce699..7ebf919 100644
--- a/stripe_checkout/stripe_checkout/templates/checkout.html
+++ b/stripe_checkout/stripe_checkout/templates/checkout.html
@@ -3,28 +3,32 @@
Checkout
{% endblock title %}
{% block body %}
- {% if shopping_cart|length > 0 %}
- <div class="checkout">
- <h1>Please confirm a payment method</h1>
- <table>
- {% for item in shopping_cart %}
- <tr>
- <td>{{ item.display_name }}</td>
- <td>€{{ item.price }}</td>
- </tr>
- {% endfor %}
- <tr>
- <td>Total</td>
- <td>€{{ total }}</td>
- </tr>
- </table>
- <form id="checkout_form" method="post">
- {{ form }}
- {% csrf_token %}
- <input type="submit" value="confirm">
- </form>
+ <div class="checkout flex center">
+ <div class="checkout-card flex center column">
+ {% if shopping_cart|length > 0 %}
+ <h1>Please confirm your payment</h1>
+ <div class="checkout-summary">
+ {% for item in shopping_cart %}
+ <div class="item">{{ item.display_name }}</div>
+ <div class="price">€{{ item.price }}</div>
+ {% endfor %}
+ <div class="total item">Total</div>
+ <div class="total price">€{{ total }}</div>
+ </div>
+ <form id="checkout-form" class="flex column"method="post">
+ {% for field in form %}
+ <label class="label">{{ field.label }}</label>
+ {{ field }}
+ {% endfor %}
+ {% csrf_token %}
+ <div class="flex center">
+ <input type="submit" class="button" value="confirm">
+ </div>
+ </form>
+ </div>
+ {% else %}
+ <p>You have nothing to pay for</p>
</div>
- {% else %}
- <p>You have nothing to pay for</p>
- {% endif %}
+ </div>
+{% endif %}
{% endblock body %}
--
GitLab