feat: make stripe functional

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

@@ -1,14 +1,5 @@
 <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

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
+import { DepositService } from '../service/deposit.service';
 
 @Component({
   selector: 'app-deposit',
@@ -13,19 +14,18 @@ import { loadStripe, Stripe } from '@stripe/stripe-js';
 })
 export class DepositComponent implements OnInit{
   protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])});
-  private stripe: Stripe | null;
+  private stripe: Stripe | null = null;
+  private service: DepositService = inject(DepositService);
 
   async ngOnInit() {
-    this.stripe = await loadStripe('pk_test_51');
+    this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG');
   }
 
   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});
+      console.log(JSON.stringify(this.form.value.amount as number));
+      this.service.handleDeposit(this.form.value.amount as number).subscribe(({sessionId}) => {
+        this.stripe?.redirectToCheckout({sessionId});
       });
     }
   }

frontend/src/app/service/deposit.service.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DepositService {
+  private http: HttpClient = inject(HttpClient);
+
+  handleDeposit(amount: number): Observable<{ sessionId: string }> {
+    return this.http.post<{sessionId: string}>('/backend/deposit/checkout', {amount});
+  }
+}