[PM-24964] Stripe-hosted bank account verification (#16220)

* Implement bank account hosted URL verification with webhook handling notification

* [PM-25491] Create org/provider bank account warning needs to be updated

apps/web/src/app/billing/organizations/payment-details/organization-payment-details.component.ts

@@ -19,6 +19,7 @@ import {
   take,
   takeUntil,
   tap,
+  withLatestFrom,
 } from "rxjs";
 
 import {
@@ -31,6 +32,7 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { DialogService } from "@bitwarden/components";
+import { CommandDefinition, MessageListener } from "@bitwarden/messaging";
 import { SubscriberBillingClient } from "@bitwarden/web-vault/app/billing/clients";
 import { OrganizationFreeTrialWarningComponent } from "@bitwarden/web-vault/app/billing/organizations/warnings/components";
 import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/organizations/warnings/services";
@@ -67,6 +69,10 @@ type View = {
   taxIdWarning: TaxIdWarningType | null;
 };
 
+const BANK_ACCOUNT_VERIFIED_COMMAND = new CommandDefinition<{ organizationId: string }>(
+  "organizationBankAccountVerified",
+);
+
 @Component({
   templateUrl: "./organization-payment-details.component.html",
   standalone: true,
@@ -150,6 +156,7 @@ export class OrganizationPaymentDetailsComponent implements OnInit, OnDestroy {
     private activatedRoute: ActivatedRoute,
     private configService: ConfigService,
     private dialogService: DialogService,
+    private messageListener: MessageListener,
     private organizationService: OrganizationService,
     private organizationWarningsService: OrganizationWarningsService,
     private router: Router,
@@ -195,6 +202,30 @@ export class OrganizationPaymentDetailsComponent implements OnInit, OnDestroy {
           }
         });
     }
+
+    this.messageListener
+      .messages$(BANK_ACCOUNT_VERIFIED_COMMAND)
+      .pipe(
+        withLatestFrom(this.view$),
+        filter(([message, view]) => message.organizationId === view.organization.data.id),
+        switchMap(
+          async ([_, view]) =>
+            await Promise.all([
+              this.subscriberBillingClient.getPaymentMethod(view.organization),
+              this.subscriberBillingClient.getBillingAddress(view.organization),
+            ]),
+        ),
+        tap(async ([paymentMethod, billingAddress]) => {
+          if (paymentMethod) {
+            await this.setPaymentMethod(paymentMethod);
+          }
+          if (billingAddress) {
+            this.setBillingAddress(billingAddress);
+          }
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
   }
 
   ngOnDestroy() {

apps/web/src/app/billing/payment/components/display-payment-method.component.ts

@@ -8,7 +8,6 @@ import { BitwardenSubscriber } from "../../types";
 import { MaskedPaymentMethod } from "../types";
 
 import { ChangePaymentMethodDialogComponent } from "./change-payment-method-dialog.component";
-import { VerifyBankAccountComponent } from "./verify-bank-account.component";
 
 @Component({
   selector: "app-display-payment-method",
@@ -18,18 +17,23 @@ import { VerifyBankAccountComponent } from "./verify-bank-account.component";
       @if (paymentMethod) {
         @switch (paymentMethod.type) {
           @case ("bankAccount") {
-            @if (!paymentMethod.verified) {
-              <app-verify-bank-account
-                [subscriber]="subscriber"
-                (verified)="onBankAccountVerified($event)"
-              >
-              </app-verify-bank-account>
+            @if (paymentMethod.hostedVerificationUrl) {
+              <p>
+                {{ "verifyBankAccountWithStripe" | i18n }}
+                <a
+                  bitLink
+                  rel="noreferrer"
+                  target="_blank"
+                  [attr.href]="paymentMethod.hostedVerificationUrl"
+                  >{{ "verifyNow" | i18n }}</a
+                >
+              </p>
             }
 
             <p>
               <i class="bwi bwi-fw bwi-billing"></i>
               {{ paymentMethod.bankName }}, *{{ paymentMethod.last4 }}
-              @if (!paymentMethod.verified) {
+              @if (paymentMethod.hostedVerificationUrl) {
                 <span>- {{ "unverified" | i18n }}</span>
               }
             </p>
@@ -63,7 +67,7 @@ import { VerifyBankAccountComponent } from "./verify-bank-account.component";
     </bit-section>
   `,
   standalone: true,
-  imports: [SharedModule, VerifyBankAccountComponent],
+  imports: [SharedModule],
 })
 export class DisplayPaymentMethodComponent {
   @Input({ required: true }) subscriber!: BitwardenSubscriber;
@@ -96,8 +100,6 @@ export class DisplayPaymentMethodComponent {
     }
   };
 
-  onBankAccountVerified = (paymentMethod: MaskedPaymentMethod) => this.updated.emit(paymentMethod);
-
   protected getBrandIconForCard = (): string | null => {
     if (this.paymentMethod?.type !== "card") {
       return null;

apps/web/src/app/billing/payment/components/enter-payment-method.component.ts

@@ -118,7 +118,7 @@ type PaymentMethodFormGroup = FormGroup<{
         @case ("bankAccount") {
           <ng-container>
             <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-              {{ "verifyBankAccountWarning" | i18n }}
+              {{ "requiredToVerifyBankAccountWithStripe" | i18n }}
             </bit-callout>
             <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankAccount">
               <bit-form-field class="tw-col-span-1" [disableMargin]="true">

apps/web/src/app/billing/payment/types/masked-payment-method.ts

@@ -25,7 +25,7 @@ type MaskedBankAccount = {
   type: BankAccountPaymentMethod;
   bankName: string;
   last4: string;
-  verified: boolean;
+  hostedVerificationUrl?: string;
 };
 
 type MaskedCard = {
@@ -73,7 +73,7 @@ class MaskedBankAccountResponse extends BaseResponse implements MaskedBankAccoun
   type: BankAccountPaymentMethod;
   bankName: string;
   last4: string;
-  verified: boolean;
+  hostedVerificationUrl?: string;
 
   constructor(response: any) {
     super(response);
@@ -81,7 +81,7 @@ class MaskedBankAccountResponse extends BaseResponse implements MaskedBankAccoun
     this.type = "bankAccount";
     this.bankName = this.getResponseProperty("BankName");
     this.last4 = this.getResponseProperty("Last4");
-    this.verified = this.getResponseProperty("Verified");
+    this.hostedVerificationUrl = this.getResponseProperty("HostedVerificationUrl");
   }
 }
 

apps/web/src/app/billing/shared/payment/payment.component.html

@@ -81,7 +81,7 @@
   <!-- Bank Account -->
   <ng-container *ngIf="showBankAccount && usingBankAccount">
     <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-      {{ bankAccountWarning }}
+      {{ "requiredToVerifyBankAccountWithStripe" | i18n }}
     </bit-callout>
     <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankInformation">
       <bit-form-field class="tw-col-span-1" disableMargin>

apps/web/src/app/billing/shared/payment/payment.component.ts

@@ -212,12 +212,4 @@ export class PaymentComponent implements OnInit, OnDestroy {
   private get usingStripe(): boolean {
     return this.usingBankAccount || this.usingCard;
   }
-
-  get bankAccountWarning(): string {
-    if (this.bankAccountWarningOverride) {
-      return this.bankAccountWarningOverride;
-    } else {
-      return this.i18nService.t("verifyBankAccountWithStatementDescriptorWarning");
-    }
-  }
 }

apps/web/src/locales/en/messages.json

@@ -11244,5 +11244,14 @@
   },
   "confirmKeyConnectorDomain": {
     "message": "Confirm Key Connector domain"
+  },
+  "requiredToVerifyBankAccountWithStripe": {
+    "message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make a micro-deposit within the next 1-2 business days. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
+  },
+  "verifyBankAccountWithStripe": {
+    "message": "We have made a micro-deposit to your bank account. This may take 1-2 business days. When you see the deposit in your account, you can verify your bank account. Failure to verify your bank account will result in a missed payment and your subscription will be suspended."
+  },
+  "verifyNow": {
+    "message": "Verify now."
   }
 }