diff --git a/apps/web/src/app/billing/services/stripe.service.ts b/apps/web/src/app/billing/services/stripe.service.ts
index 0445504d508..d19a7ef9da8 100644
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -1,6 +1,8 @@
import { Injectable } from "@angular/core";
import { BankAccount } from "@bitwarden/common/billing/models/domain";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { BillingServicesModule } from "./billing-services.module";
@@ -15,7 +17,10 @@ export class StripeService {
cardCvc: string;
};
- constructor(private logService: LogService) {}
+ constructor(
+ private logService: LogService,
+ private configService: ConfigService,
+ ) {}
/**
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the element of the current page and mounts
@@ -32,15 +37,23 @@ export class StripeService {
const script = window.document.createElement("script");
script.id = "stripe-script";
script.src = "https://js.stripe.com/v3?advancedFraudSignals=false";
- script.onload = () => {
+ script.onload = async () => {
const window$ = window as any;
this.stripe = window$.Stripe(process.env.STRIPE_KEY);
this.elements = this.stripe.elements();
- const options = this.getElementOptions();
+ const isExtensionRefresh = await this.configService.getFeatureFlag(
+ FeatureFlag.ExtensionRefresh,
+ );
setTimeout(() => {
- this.elements.create("cardNumber", options);
- this.elements.create("cardExpiry", options);
- this.elements.create("cardCvc", options);
+ this.elements.create(
+ "cardNumber",
+ this.getElementOptions("cardNumber", isExtensionRefresh),
+ );
+ this.elements.create(
+ "cardExpiry",
+ this.getElementOptions("cardExpiry", isExtensionRefresh),
+ );
+ this.elements.create("cardCvc", this.getElementOptions("cardCvc", isExtensionRefresh));
if (autoMount) {
this.mountElements();
}
@@ -135,7 +148,10 @@ export class StripeService {
}, 500);
}
- private getElementOptions(): any {
+ private getElementOptions(
+ element: "cardNumber" | "cardExpiry" | "cardCvc",
+ isExtensionRefresh: boolean,
+ ): any {
const options: any = {
style: {
base: {
@@ -160,6 +176,17 @@ export class StripeService {
},
};
+ // Unique settings that should only be applied when the extension refresh flag is active
+ if (isExtensionRefresh) {
+ options.style.base.fontWeight = "500";
+ options.classes.base = "v2";
+
+ // Remove the placeholder for number and CVC fields
+ if (["cardNumber", "cardCvc"].includes(element)) {
+ options.placeholder = "";
+ }
+ }
+
const style = getComputedStyle(document.documentElement);
options.style.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
options.style.base["::placeholder"].color = `rgb(${style.getPropertyValue(
diff --git a/apps/web/src/app/billing/shared/payment/payment-label-v2.component.html b/apps/web/src/app/billing/shared/payment/payment-label-v2.component.html
new file mode 100644
index 00000000000..a2e1c92a050
--- /dev/null
+++ b/apps/web/src/app/billing/shared/payment/payment-label-v2.component.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+ ({{ "required" | i18n }})
+
+
+
+
+
+
+
diff --git a/apps/web/src/app/billing/shared/payment/payment-label-v2.component.ts b/apps/web/src/app/billing/shared/payment/payment-label-v2.component.ts
new file mode 100644
index 00000000000..4e671ed593c
--- /dev/null
+++ b/apps/web/src/app/billing/shared/payment/payment-label-v2.component.ts
@@ -0,0 +1,36 @@
+import { booleanAttribute, Component, Input, OnInit } from "@angular/core";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { FormFieldModule } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared";
+
+/**
+ * Label that should be used for elements loaded via Stripe API.
+ *
+ * Applies the same label styles from CL form-field component when
+ * the `ExtensionRefresh` flag is set.
+ */
+@Component({
+ selector: "app-payment-label-v2",
+ templateUrl: "./payment-label-v2.component.html",
+ standalone: true,
+ imports: [FormFieldModule, SharedModule],
+})
+export class PaymentLabelV2 implements OnInit {
+ /** `id` of the associated input */
+ @Input({ required: true }) for: string;
+ /** Displays required text on the label */
+ @Input({ transform: booleanAttribute }) required = false;
+
+ protected extensionRefreshFlag = false;
+
+ constructor(private configService: ConfigService) {}
+
+ async ngOnInit(): Promise {
+ this.extensionRefreshFlag = await this.configService.getFeatureFlag(
+ FeatureFlag.ExtensionRefresh,
+ );
+ }
+}
diff --git a/apps/web/src/app/billing/shared/payment/payment-v2.component.html b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
index e701c1ce679..51fdb1738f5 100644
--- a/apps/web/src/app/billing/shared/payment/payment-v2.component.html
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
@@ -43,10 +43,9 @@
-
+
@@ -57,29 +56,24 @@
/>
-
+
-
-
+
+ {{ "securityCodeSlashCVV" | i18n }}
-
+
diff --git a/apps/web/src/app/billing/shared/payment/payment-v2.component.ts b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
index fa2b53fc7b5..6c12b14cf0d 100644
--- a/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
@@ -10,6 +10,8 @@ import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/
import { SharedModule } from "../../../shared";
import { BillingServicesModule, BraintreeService, StripeService } from "../../services";
+import { PaymentLabelV2 } from "./payment-label-v2.component";
+
/**
* Render a form that allows the user to enter their payment method, tokenize it against one of our payment providers and,
* optionally, submit it using the {@link onSubmit} function if it is provided.
@@ -20,7 +22,7 @@ import { BillingServicesModule, BraintreeService, StripeService } from "../../se
selector: "app-payment-v2",
templateUrl: "./payment-v2.component.html",
standalone: true,
- imports: [BillingServicesModule, SharedModule],
+ imports: [BillingServicesModule, SharedModule, PaymentLabelV2],
})
export class PaymentV2Component implements OnInit, OnDestroy {
/** Show account credit as a payment option. */
diff --git a/apps/web/src/app/billing/shared/payment/payment.component.html b/apps/web/src/app/billing/shared/payment/payment.component.html
index 4e71df2eff7..a627da18da0 100644
--- a/apps/web/src/app/billing/shared/payment/payment.component.html
+++ b/apps/web/src/app/billing/shared/payment/payment.component.html
@@ -26,8 +26,10 @@