-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
- {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
-
-
- ();
-
- bank: any = {
- routing_number: null,
- account_number: null,
- account_holder_name: null,
- account_holder_type: "",
- currency: "USD",
- country: "US",
- };
-
+ protected paymentForm = new FormGroup({
+ method: new FormControl(this.method),
+ bank: new FormGroup({
+ routing_number: new FormControl(null, [Validators.required]),
+ account_number: new FormControl(null, [Validators.required]),
+ account_holder_name: new FormControl(null, [Validators.required]),
+ account_holder_type: new FormControl("", [Validators.required]),
+ currency: new FormControl("USD"),
+ country: new FormControl("US"),
+ }),
+ });
paymentMethodType = PaymentMethodType;
private btScript: HTMLScriptElement;
@@ -85,7 +97,6 @@ export class PaymentComponent implements OnInit, OnDestroy {
invalid: "is-invalid",
};
}
-
async ngOnInit() {
if (!this.showOptions) {
this.hidePaypal = this.method !== PaymentMethodType.PayPal;
@@ -97,6 +108,13 @@ export class PaymentComponent implements OnInit, OnDestroy {
if (!this.hidePaypal) {
window.document.head.appendChild(this.btScript);
}
+ this.paymentForm
+ .get("method")
+ .valueChanges.pipe(takeUntil(this.destroy$))
+ .subscribe((v) => {
+ this.method = v;
+ this.changeMethod();
+ });
}
ngOnDestroy() {
@@ -140,7 +158,6 @@ export class PaymentComponent implements OnInit, OnDestroy {
changeMethod() {
this.btInstance = null;
-
if (this.method === PaymentMethodType.PayPal) {
window.setTimeout(() => {
(window as any).braintree.dropin.create(
@@ -209,15 +226,17 @@ export class PaymentComponent implements OnInit, OnDestroy {
}
});
} else {
- this.stripe.createToken("bank_account", this.bank).then((result: any) => {
- if (result.error) {
- reject(result.error.message);
- } else if (result.token && result.token.id != null) {
- resolve([result.token.id, this.method]);
- } else {
- reject();
- }
- });
+ this.stripe
+ .createToken("bank_account", this.paymentForm.get("bank").value)
+ .then((result: any) => {
+ if (result.error) {
+ reject(result.error.message);
+ } else if (result.token && result.token.id != null) {
+ resolve([result.token.id, this.method]);
+ } else {
+ reject();
+ }
+ });
}
}
});
-
-
+
+
+
+ {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
+
+
-
-
-
-
- {{ "makeSureEnoughCredit" | i18n }}
-
-
+
+
+
+ {{ "makeSureEnoughCredit" | i18n }}
+
+
+
diff --git a/apps/web/src/app/billing/shared/payment.component.ts b/apps/web/src/app/billing/shared/payment.component.ts
index 652bed7801d..95b25a74e4e 100644
--- a/apps/web/src/app/billing/shared/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment.component.ts
@@ -1,4 +1,5 @@
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
import { Subject, takeUntil } from "rxjs";
import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
@@ -17,23 +18,34 @@ import { SharedModule } from "../../shared";
export class PaymentComponent implements OnInit, OnDestroy {
@Input() showMethods = true;
@Input() showOptions = true;
- @Input() method = PaymentMethodType.Card;
@Input() hideBank = false;
@Input() hidePaypal = false;
@Input() hideCredit = false;
@Input() trialFlow = false;
+ @Input()
+ set method(value: PaymentMethodType) {
+ this._method = value;
+ this.paymentForm?.controls.method.setValue(value, { emitEvent: false });
+ }
+
+ get method(): PaymentMethodType {
+ return this._method;
+ }
+ private _method: PaymentMethodType = PaymentMethodType.Card;
+
private destroy$ = new Subject
+
+ {{ "routingNumber" | i18n }}
+
+
+
+ {{ "accountNumber" | i18n }}
+
+
+
+ {{ "accountHolderName" | i18n }}
+
+
+
+
+ {{ "bankAccountType" | i18n }}
+
+
+
-
-
-
+
+
+
-
+
+ {{ "paypalClickSubmit" | i18n }}
-
-
-
-
-
-
-
-
-
-
- {{ "paypalClickSubmit" | i18n }}
-
-