Skip to content
Snippets Groups Projects
Commit 39cd1d02 authored by Pelle Koster's avatar Pelle Koster
Browse files

style checkout page

parent 2a488b36
No related branches found
No related tags found
No related merge requests found
......@@ -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:
......
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
......@@ -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 %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment