integration of 3D secure v2 for eboutic bank payment

eboutic/static/eboutic/css/eboutic.css

@@ -0,0 +1,177 @@
+#eboutic {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    column-gap: 20px;
+    margin: 0 20px 20px;
+}
+
+#eboutic-title {
+    margin-left: 20px;
+}
+
+#eboutic h3 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+#basket {
+    min-width: 300px;
+    border-radius: 8px;
+    box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
+    padding: 10px;
+}
+
+#basket h3 {
+    margin-top: 0;
+}
+
+@media screen and (max-width: 765px) {
+    #eboutic {
+        flex-direction: column;
+        align-items: center;
+        margin: 10px;
+        row-gap: 20px;
+    }
+    #eboutic-title {
+        margin-bottom: 20px;
+        margin-top: 4px;
+    }
+    #basket {
+    }
+}
+
+#eboutic .item-list {
+    margin-left: 0;
+    list-style: none;
+}
+
+#eboutic .item-list li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px
+}
+
+#eboutic .item-name {
+    flex: 1;
+}
+
+#eboutic .item-price, #eboutic .item-quantity {
+    width: 65px;
+}
+
+#eboutic .item-quantity {
+    text-align: center;
+}
+
+#eboutic .fa-plus, #eboutic .fa-minus {
+    cursor: pointer;
+}
+
+#eboutic .item-price {
+    text-align: right;
+}
+
+/*  CSS du catalogue  */
+
+#eboutic #catalog {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    row-gap: 30px;
+}
+
+#eboutic .category-header {
+    margin-bottom: 15px;
+}
+
+#eboutic .product-group {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 15px;
+    row-gap: 15px;
+}
+
+@media screen and (max-width: 765px) {
+    #eboutic #catalog {
+        row-gap: 15px;
+    }
+
+    #eboutic section {
+        text-align: center;
+    }
+
+    #eboutic .product-group {
+        justify-content: space-around;
+    }
+}
+
+#eboutic .product-button {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 120px;
+    max-width: 150px;
+    padding: 10px;
+    overflow: hidden;
+    box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 5px;
+}
+
+#eboutic .product-button:active {
+    box-shadow: none;
+}
+
+#eboutic .product-button img, #eboutic .product-button .fa {
+    margin: 0;
+    border-radius: 4px;
+    height: 40px;
+    line-height: 40px;
+}
+
+#eboutic .product-button p {
+    font-size: 13px;
+    margin: 0;
+}
+
+#eboutic .catalog-buttons {
+    display: flex;
+    justify-content: center;
+    column-gap: 30px;
+    margin: 30px 0 0;
+}
+
+#eboutic input {
+    all: unset;
+}
+
+#eboutic .catalog-buttons button {
+    font-size: 15px!important;
+    font-weight: normal;
+    color: white;
+    min-width: 60px;
+    padding: 5px 10px;
+}
+#eboutic .catalog-buttons .validate {
+    background-color: #354a5f;
+}
+#eboutic .catalog-buttons .clear {
+    background-color: gray;
+}
+#eboutic .catalog-buttons button i {
+    margin-right: 4px;
+}
+
+#eboutic .catalog-buttons button.validate:hover {
+    background-color: #2c3646;
+}
+
+#eboutic .catalog-buttons button.clear:hover {
+    background-color:hsl(210,5%,30%);
+}
+
+#eboutic .catalog-buttons form {
+    margin: 0;
+}

eboutic/static/eboutic/js/eboutic.js

@@ -0,0 +1,104 @@
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+function get_starting_items() {
+    const cookie = getCookie("basket_items")
+    try {
+        // django cookie backend does an utter mess on non-trivial data types
+        // so we must perform a conversion of our own
+        const biscuit = JSON.parse(JSON.parse(cookie.replace(/\\054/g, ',')));
+        if (Array.isArray(biscuit)) {
+            return biscuit;
+        }
+        return [];
+    } catch (e) {
+        return [];
+    }
+}
+
+document.addEventListener('alpine:init', () => {
+    Alpine.data('basket', () => ({
+        items: get_starting_items(),
+
+        get_total() {
+            let total = 0;
+            for (const item of this.items) {
+                total += item["quantity"] * item["unit_price"];
+            }
+            return total;
+        },
+
+        add(item) {
+            item.quantity++;
+            this.edit_cookies()
+        },
+
+        remove(item_id) {
+            const index = this.items.findIndex(e => e.id === item_id);
+            if (index < 0) return;
+            this.items[index].quantity -= 1;
+            if (this.items[index].quantity === 0) {
+                this.items = this.items.filter((e) => e.id !== this.items[index].id);
+            }
+            this.edit_cookies();
+        },
+
+        clear_basket() {
+            this.items = []
+            this.edit_cookies();
+        },
+
+        edit_cookies() {
+            // a cookie survives an hour
+            document.cookie = "basket_items=" + JSON.stringify(this.items) + ";Max-Age=3600";
+        },
+
+        /**
+         * Create an item in the basket if it was not already in
+         * @param id : int the id of the product to add
+         * @param name : String the name of the product
+         * @param price : number the unit price of the product
+         */
+        create_item(id, name, price) {
+            let new_item = {
+                id: id,
+                name: name,
+                quantity: 0,
+                unit_price: price
+            };
+            this.items.push(new_item);
+            this.add(new_item);
+        },
+
+        /**
+         * add an item to the basket.
+         * This is called when the user click
+         * on a button in the catalog (left side of the page)
+         * @param id : int the id of the product to add
+         * @param name : String the name of the product
+         * @param price : number the unit price of the product
+         */
+        add_from_catalog(id, name, price) {
+            const item = this.items.find(e => e.id === id)
+            if (item === undefined) {
+                this.create_item(id, name, price);
+            } else {
+                // the user clicked on an item which is already in the basket
+                this.add(item);
+            }
+        },
+    }))
+})

eboutic/static/eboutic/js/makecommand.js

@@ -0,0 +1,73 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.store('bank_payment_enabled', false)
+
+    Alpine.store('billing_inputs', {
+        data: JSON.parse(et_data)["data"],
+
+        async fill() {
+            document.getElementById("bank-submit-button").disabled = true;
+            const request = new Request(et_data_url, {
+                method: "GET",
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                },
+            });
+            const res = await fetch(request);
+            if (res.ok) {
+                const json = await res.json();
+                if (json["data"]) {
+                    this.data = json["data"];
+                }
+                document.getElementById("bank-submit-button").disabled = false;
+            }
+        }
+    })
+
+    Alpine.data('billing_infos', () => ({
+        errors: [],
+        successful: false,
+        url: billing_info_exist ? edit_billing_info_url : create_billing_info_url,
+
+        async send_form() {
+            const form = document.getElementById("billing_info_form");
+            const submit_button = form.querySelector("input[type=submit]")
+            submit_button.disabled = true;
+            document.getElementById("bank-submit-button").disabled = true;
+            this.successful = false
+
+            let payload = {};
+            for (const elem of form.querySelectorAll("input")) {
+                if (elem.type === "text" && elem.value) {
+                    payload[elem.name] = elem.value;
+                }
+            }
+            const country = form.querySelector("select");
+            if (country && country.value) {
+                payload[country.name] = country.value;
+            }
+            const request = new Request(this.url, {
+                method: "POST",
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': getCSRFToken(),
+                },
+                body: JSON.stringify(payload),
+            });
+            const res = await fetch(request);
+            const json = await res.json();
+            if (json["errors"]) {
+                this.errors = json["errors"];
+            } else {
+                this.errors = [];
+                this.successful = true;
+                this.url = edit_billing_info_url;
+                Alpine.store("billing_inputs").fill();
+            }
+            submit_button.disabled = false;
+        }
+    }))
+})
+
+