bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 22:33:35 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* Implement bank account hosted URL verification with webhook handling notification

* [PM-25491] Create org/provider bank account warning needs to be updated
This commit is contained in:
Alex Morask
2025-09-09 12:22:45 -05:00
committed by GitHub
parent 52642056d8
commit 4907820383
11 changed files with 149 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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() {

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

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

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

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

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

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

2
apps/web/src/app/billing/shared/payment/payment.component.html
View File

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

8
apps/web/src/app/billing/shared/payment/payment.component.ts
View File

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

9
apps/web/src/locales/en/messages.json
View File

@@ -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."
}
}

57
bitwarden_license/bit-web/src/app/billing/providers/payment-details/provider-payment-details.component.ts
View File

@@ -17,13 +17,18 @@ import {
take,
takeUntil,
tap,
withLatestFrom,
} from "rxjs";
import { catchError } from "rxjs/operators";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
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 { CommandDefinition, MessageListener } from "@bitwarden/messaging";
import { UserId } from "@bitwarden/user-core";
import { SubscriberBillingClient } from "@bitwarden/web-vault/app/billing/clients";
import {
DisplayAccountCreditComponent,
@@ -52,6 +57,7 @@ class RedirectError {
}
type View = {
activeUserId: UserId;
provider: BitwardenSubscriber;
paymentMethod: MaskedPaymentMethod | null;
billingAddress: BillingAddress | null;
@@ -59,6 +65,11 @@ type View = {
taxIdWarning: TaxIdWarningType | null;
};
const BANK_ACCOUNT_VERIFIED_COMMAND = new CommandDefinition<{
providerId: string;
adminId: string;
}>("providerBankAccountVerified");
@Component({
templateUrl: "./provider-payment-details.component.html",
imports: [
@@ -94,15 +105,20 @@ export class ProviderPaymentDetailsComponent implements OnInit, OnDestroy {
const getTaxIdWarning = firstValueFrom(
this.providerWarningsService.getTaxIdWarning$(provider.data as Provider),
);
const getActiveUserId = firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
const [paymentMethod, billingAddress, credit, taxIdWarning] = await Promise.all([
this.billingClient.getPaymentMethod(provider),
this.billingClient.getBillingAddress(provider),
this.billingClient.getCredit(provider),
getTaxIdWarning,
]);
const [activeUserId, paymentMethod, billingAddress, credit, taxIdWarning] = await Promise.all(
[
getActiveUserId,
this.billingClient.getPaymentMethod(provider),
this.billingClient.getBillingAddress(provider),
this.billingClient.getCredit(provider),
getTaxIdWarning,
],
);
return {
activeUserId,
provider,
paymentMethod,
billingAddress,
@@ -131,9 +147,11 @@ export class ProviderPaymentDetailsComponent implements OnInit, OnDestroy {
protected enableTaxIdWarning!: boolean;
constructor(
private accountService: AccountService,
private activatedRoute: ActivatedRoute,
private billingClient: SubscriberBillingClient,
private configService: ConfigService,
private messageListener: MessageListener,
private providerService: ProviderService,
private providerWarningsService: ProviderWarningsService,
private router: Router,
@@ -169,6 +187,33 @@ export class ProviderPaymentDetailsComponent implements OnInit, OnDestroy {
}
});
}
this.messageListener
.messages$(BANK_ACCOUNT_VERIFIED_COMMAND)
.pipe(
withLatestFrom(this.view$),
filter(
([message, view]) =>
message.providerId === view.provider.data.id && message.adminId === view.activeUserId,
),
switchMap(
async ([_, view]) =>
await Promise.all([
this.subscriberBillingClient.getPaymentMethod(view.provider),
this.subscriberBillingClient.getBillingAddress(view.provider),
]),
),
tap(async ([paymentMethod, billingAddress]) => {
if (paymentMethod) {
await this.setPaymentMethod(paymentMethod);
}
if (billingAddress) {
this.setBillingAddress(billingAddress);
}
}),
takeUntil(this.destroy$),
)
.subscribe();
}
ngOnDestroy() {

3
libs/common/src/enums/notification-type.enum.ts
View File

@@ -30,4 +30,7 @@ export enum NotificationType {
NotificationStatus = 21,
RefreshSecurityTasks = 22,
OrganizationBankAccountVerified = 23,
ProviderBankAccountVerified = 24,
}

26
libs/common/src/models/response/notification.response.ts
View File

@@ -63,6 +63,12 @@ export class NotificationResponse extends BaseResponse {
case NotificationType.NotificationStatus:
this.payload = new EndUserNotificationResponse(payload);
break;
case NotificationType.OrganizationBankAccountVerified:
this.payload = new OrganizationBankAccountVerifiedPushNotification(payload);
break;
case NotificationType.ProviderBankAccountVerified:
this.payload = new ProviderBankAccountVerifiedPushNotification(payload);
break;
default:
break;
}
@@ -158,3 +164,23 @@ export class OrganizationCollectionSettingChangedPushNotification extends BaseRe
this.limitCollectionDeletion = this.getResponseProperty("LimitCollectionDeletion");
}
}
export class OrganizationBankAccountVerifiedPushNotification extends BaseResponse {
organizationId: string;
constructor(response: any) {
super(response);
this.organizationId = this.getResponseProperty("OrganizationId");
}
}
export class ProviderBankAccountVerifiedPushNotification extends BaseResponse {
providerId: string;
adminId: string;
constructor(response: any) {
super(response);
this.providerId = this.getResponseProperty("ProviderId");
this.adminId = this.getResponseProperty("AdminId");
}
}

11
libs/common/src/platform/server-notifications/internal/default-server-notifications.service.ts
View File

@@ -298,6 +298,17 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
case NotificationType.SyncOrganizationCollectionSettingChanged:
await this.syncService.fullSync(true);
break;
case NotificationType.OrganizationBankAccountVerified:
this.messagingService.send("organizationBankAccountVerified", {
organizationId: notification.payload.organizationId,
});
break;
case NotificationType.ProviderBankAccountVerified:
this.messagingService.send("providerBankAccountVerified", {
providerId: notification.payload.providerId,
adminId: notification.payload.adminId,
});
break;
default:
break;
}