53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ChangeDetectionStrategy, 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';
|
|
import { debounceTime } from 'rxjs';
|
|
|
|
@Component({
|
|
selector: 'app-deposit',
|
|
standalone: true,
|
|
imports: [
|
|
ReactiveFormsModule,
|
|
],
|
|
templateUrl: './deposit.component.html',
|
|
styleUrl: './deposit.component.css',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class DepositComponent implements OnInit {
|
|
protected form!: FormGroup;
|
|
protected errorMsg: string = '';
|
|
private stripe: Stripe | null = null;
|
|
private service: DepositService = inject(DepositService);
|
|
|
|
async ngOnInit() {
|
|
this.form = new FormGroup({
|
|
amount: new FormControl(50, [Validators.min(50)]),
|
|
});
|
|
|
|
this.form.controls['amount'].valueChanges
|
|
.pipe(debounceTime(1000))
|
|
.subscribe((value) => {
|
|
if (value < 50) {
|
|
this.errorMsg = 'Minimum Einzahlungsbetrag ist 50€';
|
|
}
|
|
});
|
|
|
|
this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG');
|
|
}
|
|
|
|
submit() {
|
|
if (!this.stripe) {
|
|
this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
|
|
return;
|
|
}
|
|
if (!this.form.valid) {
|
|
this.errorMsg = 'Bitte geben Sie einen gültigen Betrag ein.';
|
|
return;
|
|
}
|
|
|
|
this.service.handleDeposit(this.form.value.amount as number).subscribe(({ sessionId }) => {
|
|
this.stripe?.redirectToCheckout({ sessionId });
|
|
});
|
|
}
|
|
}
|