wip

frontend/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { HomepageComponent } from './homepage/homepage/homepage.component';
 import { authGuard } from './auth.guard';
+import { DepositComponent } from './deposit/deposit.component';
 
 export const routes: Routes = [
   {
@@ -13,4 +14,9 @@ export const routes: Routes = [
     component: HomepageComponent,
     canActivate: [authGuard],
   },
+  {
+    path: 'deposit',
+    component: DepositComponent,
+    canActivate: [authGuard],
+  }
 ];

frontend/src/app/deposit/deposit.component.html

@@ -0,0 +1,14 @@
+<form [formGroup]="form">
+  <input type="number" formControlName="amount">€
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <button type="button" (click)="submit()">Einzahlen</button>
+</form>

frontend/src/app/deposit/deposit.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+
+@Component({
+  selector: 'app-deposit',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+  ],
+  templateUrl: './deposit.component.html',
+  styleUrl: './deposit.component.css'
+})
+export class DepositComponent implements OnInit{
+  protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])});
+  private stripe: Stripe | null;
+
+  async ngOnInit() {
+    this.stripe = await loadStripe('pk_test_51');
+  }
+
+  submit() {
+    if (this.stripe) {
+      fetch('/backend/deposit/checkout', {
+        method: 'POST',
+        body: JSON.stringify(this.form.value),
+      }).then(response => response.json()).then(response => {
+        this.stripe?.redirectToCheckout({sessionId: response.sessionId});
+      });
+    }
+  }
+}