wip
This commit is contained in:
parent
0ef2f58379
commit
177dd78592
11 changed files with 148 additions and 1 deletions
|
@ -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=="],
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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],
|
||||
}
|
||||
];
|
||||
|
|
0
frontend/src/app/deposit/deposit.component.css
Normal file
0
frontend/src/app/deposit/deposit.component.css
Normal file
14
frontend/src/app/deposit/deposit.component.html
Normal file
14
frontend/src/app/deposit/deposit.component.html
Normal 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>
|
32
frontend/src/app/deposit/deposit.component.ts
Normal file
32
frontend/src/app/deposit/deposit.component.ts
Normal 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});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
Reference in a new issue