begin integration of payment gateways

src/server/backend/plugins/payments/README.md

@@ -0,0 +1,26 @@
+# Creating new payment provider integrations
+All payment gateway integration plugins have to be in their own folders. This folder has to contain a file called [Payment gateway name as camelCase word (starting in small letter)]Routes.js, a file called plugin.json and any number of other files that it needs. 
+
+You will also need to add documentation for the user to set up the payment gateway. Read on below to find out how.
+
+## Setting up the routes.js file
+In the routes.js file you should have at least the following code:
+
+```
+    module.exports = ( app ) => {
+
+    }
+```
+
+Take some inspiration of the stripe or adyen setup as these are officially supported by the system and have been developed by the original creator.
+
+The express.js routes it has to expose are the following:
+
+- /payments/prepare (POST) (returns object: { 'link': [Link to the payment gateway payment], 'id': [Purchase ID to subscribe to status updating] })
+- /payments/getStatus (SSE) (sends updates to the UI once subscribed (like payment success) using the id sent by /payments/prepare)
+
+It can contain any number of (not interfering) routes. Please always use the /payments/ route as a base to avoid running into problems.
+
+
+## The plugin.json file
+The plugin.json file should look as follows:

src/server/backend/plugins/payments/stripe/stripeRoutes.js

@@ -0,0 +1,12 @@
+/*
+*				libreevent - stripeRoutes.js
+*
+*	Created by Janis Hutz 07/25/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+module.exports = ( app ) => {
+    app.post( '/payments/prepare' )
+}

src/webapp/main/src/views/purchasing/PurchaseView.vue

@@ -67,6 +67,7 @@
                 </div>
             </div>
         </div>
+        <notifications ref="notification" location="topleft" size="bigger"></notifications>
     </div>
 </template>
 
@@ -80,6 +81,7 @@
         transition: all 0.5s;
         font-size: 100%;
         margin-top: 4%;
+        cursor: pointer;
     }
 
     #buy-button:hover {
@@ -192,6 +194,7 @@
 import { useUserStore } from '@/stores/userStore';
 import { useBackendStore } from '@/stores/backendStore';
 import { mapStores } from 'pinia';
+import notifications from '@/components/notifications/notifications.vue';
 
 export default {
     name: 'PurchaseView',
@@ -205,6 +208,9 @@ export default {
             userData: {},
         }
     },
+    components: {
+        notifications,
+    },
     computed: {
         ...mapStores( useUserStore ),
         ...mapStores( useBackendStore )
@@ -248,6 +254,11 @@ export default {
                 route (plain HTML document) which then awaits processing completion and gives the
                 user a link to download the ticket. A mail has been sent to user automatically.
             */
+            let prep = this.$refs.notification.createNotification( 'Preparing payment...', 20, 'progress', 'high' );
+            setTimeout( () => {
+                this.$refs.notification.cancelNotification( prep );
+                this.$refs.notification.createNotification( 'Payment prepared, redirecting...', 5, 'progress', 'high' );
+            }, 5000 );
         }
     },
     created () {

src/webapp/main/src/views/purchasing/TicketsDetailsView.vue

@@ -11,8 +11,8 @@
     <div class="details">
         <div class="top-container" :style="`background: url( ${ event.banner } ); background-repeat: no-repeat; background-size: cover;`">
             <h1 class="eventTitle">{{ event.name }}</h1>
+            <router-link to="/tickets" class="back-button"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span></router-link>
         </div>
-        <router-link to="/tickets"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span>Back</router-link>
         <p>{{ event.description }}</p>
         <router-link to="/tickets/order">Order tickets</router-link>
     </div>
@@ -37,6 +37,22 @@
         padding: 1.5% 3%;
         margin: 0;
     }
+
+    .back-button {
+        color: white;
+        background-color: rgb(31, 31, 31);
+        padding: 10px;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: fit-content;
+        height: fit-content;
+        text-decoration: none;
+        position: fixed;
+        left: 2vh;
+        top: 2vh;
+    }
 </style>
 
 <script>