6 files changed, 127 insertions, 0 deletions
diff --git a/alphabetlearning/templates/payments/cancel.html b/alphabetlearning/templates/payments/cancel.html
new file mode 100644
index 0000000..efe0fd3
--- /dev/null
+++ b/alphabetlearning/templates/payments/cancel.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <div class="container my-5">
+            <div class="row">
+                <h2>Transaction Cancelled</h2>
+                <p>Your transaction was cancelled.</p>
+            </div>
+    </div>
+{% endblock content %}
+\ No newline at end of file
diff --git a/alphabetlearning/templates/payments/cart_detail.html b/alphabetlearning/templates/payments/cart_detail.html
new file mode 100644
index 0000000..8c6c01b
--- /dev/null
+++ b/alphabetlearning/templates/payments/cart_detail.html
@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+<div class="container my-5">
+    <h1 class="mb-4">My basket</h1>
+    <p class="text-body-secondary">{% lorem %}</p>
+    {% if cart %}
+    <div class="row">
+        <div class="col-8 my-5 bg-secondary-subtle border border-1 rounded border-dark">
+            <div class="my-4 bg-white rounded">
+    
+                <div>
+                    {% for item in cart.items.all %}
+                    <div class="my-3">
+                        {% include "payments/cart_lineitem.html" with item=item %}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
+        <div class="col-4 my-5">
+            {% include "payments/cart_sidepanel.html" with cart=cart %} 
+        </div>
+
+    </div>
+    {% else %}
+    <p>Your cart is empty.</p>
+    {% endif %}
+</div>
+{% endblock %}
diff --git a/alphabetlearning/templates/payments/cart_lineitem.html b/alphabetlearning/templates/payments/cart_lineitem.html
new file mode 100644
index 0000000..0ef8a97
--- /dev/null
+++ b/alphabetlearning/templates/payments/cart_lineitem.html
@@ -0,0 +1,17 @@
+<div class="container my-2">
+    <div class="col">
+        <div class="p-2 border border-1 border-success">
+            {{ item.resource.name }}
+        </div>
+        <div class="p-2 border border-1 border-success">
+            {{ item.resource.card_description }} 
+        </div>
+        <div class="d-flex flex-row border border-2 border-danger p-1">
+            {% for tn_url in item.resource.thumbnail_urls  %}
+            <div class="flex-shrink border border-2 border-alert p-1">
+                <img class="img-fluid rounded" src="{{ tn_url }}" alt="unknown"/> 
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
diff --git a/alphabetlearning/templates/payments/cart_sidepanel.html b/alphabetlearning/templates/payments/cart_sidepanel.html
new file mode 100644
index 0000000..7742c9a
--- /dev/null
+++ b/alphabetlearning/templates/payments/cart_sidepanel.html
@@ -0,0 +1,28 @@
+<div class="p-2 border border-2 rounded rounded-2 border-light-subtle">
+    <div class="p-1 d-flex justify-content-between">
+       <div>
+           <strong>Subtotal:</strong>
+       </div> 
+       <div>
+          &#163;{{ cart_total }} 10.24
+       </div>
+    </div>
+    <div class="p-1 d-flex justify-content-between">
+       <div>
+           <strong>Shipping and handling:</strong>
+       </div> 
+       <div>
+           <p class="text-end">There is nothing to say here</p>
+       </div>
+    </div>
+    <hr>
+    <div class="my-1">
+        <p class="p-1 text-secondary">After payment, links to your download will be generated.
+        <a class="p-1 text-sm" href="#">Help</a>
+        </p>
+        
+    </div>
+    <div class="d-grid gap-2 mx-auto col-11">
+        <button class="btn btn-primary btn-lg">Checkout now</button>
+    </div>
+</div>
diff --git a/alphabetlearning/templates/payments/landingpage.html b/alphabetlearning/templates/payments/landingpage.html
new file mode 100644
index 0000000..9897301
--- /dev/null
+++ b/alphabetlearning/templates/payments/landingpage.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block content %}
+    <div class="container my-5">
+        <div class="row">
+            <h2>Welcome to PyBlackbird - Buy this</h2>
+
+            <section>
+                <div class="product">
+                    <div class="description">
+                        <h3>{{ product.name }}</h3>
+                        <hr/>
+                        {% for price in prices %}
+
+                            <div>
+                                <h5>${{ price.get_display_price }}</h5>
+                                <form action="{% url 'payments:create-checkout-session' price.id %}" method="POST">
+                                    {% csrf_token %}
+                                    <button type="submit" class="btn btn-primary">Checkout</button>
+                                </form>
+                            </div>
+
+                        {% endfor %}
+                    </div>
+                </div>
+            </section>
+
+
+        </div>
+{% endblock content %}
+\ No newline at end of file
diff --git a/alphabetlearning/templates/payments/success.html b/alphabetlearning/templates/payments/success.html
new file mode 100644
index 0000000..c1fb089
--- /dev/null
+++ b/alphabetlearning/templates/payments/success.html
@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block content %}
+    <div class="container my-5">
+        <div class="row">
+            <h2>Thanks for your order!</h2>
+            <p>You have successfully transacted.</p>
+        </div>
+{% endblock content %}
+\ No newline at end of file