Create a proper billing page

core/templates/partials/product-list.html

@@ -0,0 +1,50 @@
+{% load static %}
+
+{% for plan in plans %}
+
+{% if plan not in user_plans %}
+  <a href="order?product={{ plan.name }}">
+{% endif %}
+  <div class="product">
+    <img src="{% static plan.image %}" alt="Data image"/>
+    <div class="description">
+      <h3>{{ plan.description }}</h3>
+      <h5>£{{ plan.cost }}</h5>
+      {% if plan in user_plans %}
+      <h5> (purchased) </h5>
+      {% endif %}
+    </div>
+  </div>
+
+{% if plan not in user_plans %}
+  </a>
+{% endif %}
+{% endfor %}
+
+<script type="text/javascript">
+  // Create an instance of the Stripe object with your publishable API key
+  var stripe = Stripe("pk_test_51HbqYzAKLUD9ELc0KSyiQ9YohsfiUCeBpAfpflAIg2Uu2RFecx3sfWYXzM1xDtI5XlQihqHMnaPKd45JzDuqXdGP00pYWvRvRe");
+  var setupButton = document.getElementById('setup-button');
+  setupButton.addEventListener("click", function () {
+    fetch("/setup-bacs", {
+      method: "POST",
+    })
+      .then(function (response) {
+        return response.json();
+      })
+      .then(function (session) {
+        return stripe.redirectToCheckout({ sessionId: session.id });
+      })
+      .then(function (result) {
+        // If redirectToCheckout fails due to a browser or network
+        // error, you should display the localized error message to your
+        // customer using error.message.
+        if (result.error) {
+          alert(result.error.message);
+        }
+      })
+      .catch(function (error) {
+        console.error("Error:", error);
+      });
+  });
+</script>