style checkout page

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:

stripe_checkout/stripe_checkout/static/main.css

+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

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 %}