This commit is contained in:
Constantin Simonis 2025-02-13 09:42:42 +01:00
parent 0ef2f58379
commit 177dd78592
No known key found for this signature in database
GPG key ID: 758DD9C506603183
11 changed files with 148 additions and 1 deletions

View file

@ -12,6 +12,7 @@
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@stripe/stripe-js": "^5.6.0",
"@tailwindcss/postcss": "^4.0.3",
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.5",
@ -489,6 +490,8 @@
"@socket.io/component-emitter": ["@socket.io/component-emitter@3.1.2", "", {}, "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="],
"@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="],
"@tailwindcss/node": ["@tailwindcss/node@4.0.3", "", { "dependencies": { "enhanced-resolve": "^5.18.0", "jiti": "^2.4.2", "tailwindcss": "4.0.3" } }, "sha512-QsVJokOl0pJ4AbJV33D2npvLcHGPWi5MOSZtrtE0GT3tSx+3D0JE2lokLA8yHS1x3oCY/3IyRyy7XX6tmzid7A=="],
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.0.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.0.3", "@tailwindcss/oxide-darwin-arm64": "4.0.3", "@tailwindcss/oxide-darwin-x64": "4.0.3", "@tailwindcss/oxide-freebsd-x64": "4.0.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.0.3", "@tailwindcss/oxide-linux-arm64-musl": "4.0.3", "@tailwindcss/oxide-linux-x64-gnu": "4.0.3", "@tailwindcss/oxide-linux-x64-musl": "4.0.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.0.3", "@tailwindcss/oxide-win32-x64-msvc": "4.0.3" } }, "sha512-FFcp3VNvRjjmFA39ORM27g2mbflMQljhvM7gxBAujHxUy4LXlKa6yMF9wbHdTbPqTONiCyyOYxccvJyVyI/XBg=="],

View file

@ -20,6 +20,7 @@
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@stripe/stripe-js": "^5.6.0",
"@tailwindcss/postcss": "^4.0.3",
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.5",

View file

@ -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],
}
];

View file

@ -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>

View file

@ -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});
});
}
}
}