From 2c586592bbfdc75752e28dcfbe4d3758806c59fe Mon Sep 17 00:00:00 2001
From: Derek Siemens <derek.siemens@impact.com>
Date: Thu, 26 Feb 2026 14:51:57 -0800
Subject: [PATCH] DS: add masking for PII

---
 .../sqm-input-field/sqm-input-field-view.tsx  |  8 ++++
 .../sqm-name-fields/sqm-name-fields-view.tsx  |  4 ++
 .../sqm-banking-info-form/formDefinitions.tsx | 21 ++++++++++
 .../sqm-banking-info-form-view.tsx            |  7 ++++
 .../sqm-banking-info-form.tsx                 | 10 +++++
 .../sqm-indirect-tax-form-view.tsx            |  5 +++
 .../sqm-payout-details-card-view.tsx          |  6 ++-
 .../small-views/IndirectTaxDetailsView.tsx    | 13 +++++-
 .../sqm-user-info-form-view.tsx               | 18 +++++++++
 .../src/utils/posthogMasking.ts               | 40 +++++++++++++++++++
 10 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 packages/mint-components/src/utils/posthogMasking.ts

diff --git a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
index 8002017109..bb3f1a976f 100644
--- a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
+++ b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
@@ -3,6 +3,10 @@ import jss from "jss";
 import preset from "jss-preset-default";
 import { intl } from "../../global/global";
 import { ErrorStyles } from "../../global/mixins";
+import {
+  sensitiveMaskAttrs,
+  shouldMaskSensitiveField,
+} from "../../utils/posthogMasking";
 import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 
 export interface InputFieldViewProps {
@@ -40,6 +44,9 @@ const styleString = sheet.toString();
 export function InputFieldView(props: InputFieldViewProps) {
   const { states, content } = props;
   const validationErrors = states?.registrationFormState?.validationErrors;
+  const shouldMask =
+    content.fieldType === "tel" || shouldMaskSensitiveField(content.fieldName);
+  const maskAttrs = sensitiveMaskAttrs(shouldMask);
 
   return (
     <div class={sheet.classes.FieldContainer} part="sqm-base">
@@ -52,6 +59,7 @@ export function InputFieldView(props: InputFieldViewProps) {
         name={`/${content.fieldName}`}
         type={content.fieldType}
         label={content.fieldLabel}
+        {...maskAttrs}
         {...(!content.fieldOptional ? { required: true } : [])}
         disabled={
           states.registrationFormState?.loading ||
diff --git a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
index 1426f18a1b..5b364727a3 100644
--- a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
+++ b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { ErrorStyles } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../utils/posthogMasking";
 import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 
 export interface NameFieldsViewProps {
@@ -67,6 +68,7 @@ const styleString = sheet.toString();
 export function NameFieldsView(props: NameFieldsViewProps) {
   const { states } = props;
   const validationErrors = states?.registrationFormState?.validationErrors;
+  const maskAttrs = sensitiveMaskAttrs(true);
   return (
     <div class={sheet.classes.FieldsContainer}>
       <style type="text/css">
@@ -78,6 +80,7 @@ export function NameFieldsView(props: NameFieldsViewProps) {
         name="/firstName"
         type="text"
         label={states.content.firstNameLabel}
+        {...maskAttrs}
         required={!states.optional}
         disabled={
           states.registrationFormState?.loading ||
@@ -100,6 +103,7 @@ export function NameFieldsView(props: NameFieldsViewProps) {
         name="/lastName"
         type="text"
         label={states.content.lastNameLabel}
+        {...maskAttrs}
         required={!states.optional}
         disabled={
           states.registrationFormState?.loading ||
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/formDefinitions.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/formDefinitions.tsx
index e33adccd35..1262d76a2c 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/formDefinitions.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/formDefinitions.tsx
@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 import { BankingInfoFormViewProps } from "./sqm-banking-info-form-view";
 
 export function getFormMap({
@@ -15,11 +16,13 @@ export function getFormMap({
   bankCountry?: string;
 }) {
   const { errors, ...formState } = props.states.formState;
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
 
   return {
     0: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.beneficiaryAccountNameLabel}
           name="/beneficiaryAccountName"
@@ -40,6 +43,7 @@ export function getFormMap({
     1: {
       input: (
         <sl-select
+          {...sensitiveAttrs}
           required
           label={props.text.bankAccountTypeLabel}
           name="/bankAccountType"
@@ -65,6 +69,7 @@ export function getFormMap({
     2: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankAccountNumberLabel}
           name="/bankAccountNumber"
@@ -85,6 +90,7 @@ export function getFormMap({
     3: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.ibanLabel}
           name="/bankAccountNumber"
@@ -106,6 +112,7 @@ export function getFormMap({
     4: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.swiftCodeLabel}
           name="/swiftCode"
@@ -125,6 +132,7 @@ export function getFormMap({
     5: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={intl.formatMessage(
             {
@@ -160,6 +168,7 @@ export function getFormMap({
     6: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankNameLabel}
           name="/bankName"
@@ -179,6 +188,7 @@ export function getFormMap({
     7: {
       input: [
         <sl-select
+          {...sensitiveAttrs}
           required
           label={props.text.classificationLabel}
           name="/beneficiaryClassification"
@@ -203,6 +213,7 @@ export function getFormMap({
           </sl-menu-item>
         </sl-select>,
         <sl-input
+          {...sensitiveAttrs}
           required
           label={intl.formatMessage(
             {
@@ -230,6 +241,7 @@ export function getFormMap({
     8: {
       input: (
         <sl-select
+          {...sensitiveAttrs}
           required
           label={props.text.classificationCPFLabel}
           name="/beneficiaryClassification"
@@ -251,6 +263,7 @@ export function getFormMap({
     9: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           key="patronymicName"
           required
           label={props.text.patronymicNameLabel}
@@ -270,6 +283,7 @@ export function getFormMap({
     10: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           key="voCode"
           label={props.text.voCodeLabel}
           name="/voCode"
@@ -288,6 +302,7 @@ export function getFormMap({
     11: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.agencyCodeLabel}
           name="/agencyCode"
@@ -307,6 +322,7 @@ export function getFormMap({
     12: {
       input: [
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankAddressLabel}
           name="/bankAddress"
@@ -322,6 +338,7 @@ export function getFormMap({
           })}
         ></sl-input>,
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankCityLabel}
           name="/bankCity"
@@ -337,6 +354,7 @@ export function getFormMap({
           })}
         ></sl-input>,
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankStateLabel}
           name="/bankState"
@@ -352,6 +370,7 @@ export function getFormMap({
           })}
         ></sl-input>,
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.bankPostalCodeLabel}
           name="/bankPostalCode"
@@ -371,6 +390,7 @@ export function getFormMap({
     13: {
       input: (
         <sl-input
+          {...sensitiveAttrs}
           required
           label={props.text.branchCodeLabel}
           name="/branchCode"
@@ -390,6 +410,7 @@ export function getFormMap({
     14: {
       input: (
         <sl-select
+          {...sensitiveAttrs}
           required
           label={props.text.classificationLabel}
           name="/beneficiaryClassification"
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.tsx
index 806eaf1139..a6fc3e3cf5 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.tsx
@@ -1,6 +1,7 @@
 import { h, VNode } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 import { FORM_STEPS } from "../data";
 import { BankingInfoFormData } from "./useBankingInfoForm";
 
@@ -290,6 +291,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
   } = props;
 
   const { classes } = sheet;
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
 
   const getLoadingSkeleton = (
     checkedValue: "toBankAccount" | "toPayPalAccount" | undefined,
@@ -339,6 +341,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
   return (
     <sl-form
       class={classes.FormWrapper}
+      {...sensitiveAttrs}
       onSl-submit={callbacks.onSubmit}
       ref={(el: HTMLFormElement) => (refs.formRef.current = el)}
       novalidate
@@ -448,6 +451,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
                 <sl-radio
                   class={classes.Checkbox}
                   exportparts="base: radio-base"
+                  {...sensitiveAttrs}
                   checked={formState.paymentMethodChecked === "toBankAccount"}
                   onInput={() =>
                     callbacks.setPaymentMethodChecked("toBankAccount")
@@ -481,6 +485,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
                 <sl-radio
                   class={classes.Checkbox}
                   exportparts="base: radio-base"
+                  {...sensitiveAttrs}
                   checked={formState.paymentMethodChecked === "toPayPalAccount"}
                   onInput={() =>
                     callbacks.setPaymentMethodChecked("toPayPalAccount")
@@ -514,6 +519,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
               <sl-radio
                 class={classes.Checkbox}
                 exportparts="base: radio-base"
+                {...sensitiveAttrs}
                 checked={
                   formState.paymentScheduleChecked === "BALANCE_THRESHOLD"
                 }
@@ -541,6 +547,7 @@ export const BankingInfoFormView = (props: BankingInfoFormViewProps) => {
               <sl-radio
                 class={classes.Checkbox}
                 exportparts="base: radio-base"
+                {...sensitiveAttrs}
                 checked={formState.paymentScheduleChecked === "FIXED_DAY"}
                 onInput={() => callbacks.setPaymentScheduleChecked("FIXED_DAY")}
                 disabled={states.disabled}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.tsx
index 2a674f973d..13d40660c3 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.tsx
@@ -6,6 +6,7 @@ import deepmerge from "deepmerge";
 import { DemoData } from "../../../global/demo";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 import { getProps } from "../../../utils/utils";
 import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { getFormMap } from "./formDefinitions";
@@ -381,6 +382,7 @@ export class BankingInfoForm {
       ? useDemoBankingInfoForm(this)
       : useBankingInfoForm(this);
 
+      const sensitiveAttrs = sensitiveMaskAttrs(true);
     const { errors } = props.states.formState;
 
     const fieldRequiredError = this.fieldRequiredError;
@@ -491,11 +493,13 @@ export class BankingInfoForm {
         {props.states.isPartner && props.states.showVerification ? (
           <sl-dialog
             class={sheet.classes.Dialog}
+            {...sensitiveAttrs}
             open={true}
             onSl-hide={props.callbacks.onVerificationHide}
             label={props.text.verifyEmailHeaderText}
           >
             <sqm-code-verification
+              {...sensitiveAttrs}
               verifyCodeHeaderText={verifyDescription}
               reverifyCodeHeaderText={verifyDescription}
               onVerification={props.callbacks.onVerification}
@@ -511,6 +515,7 @@ export class BankingInfoForm {
             formInputsSlot: inputFields?.map(({ input }) => input),
             countryInputSlot: (
               <sl-select
+                  {...sensitiveAttrs}
                 label={props.text.bankLocationLabel}
                 disabled={props.states.saveLoading}
                 required
@@ -529,6 +534,7 @@ export class BankingInfoForm {
                 })}
               >
                 <sl-input
+                  {...sensitiveAttrs}
                   disabled={props.states.saveLoading}
                   class={sheet.classes.SearchInput}
                   placeholder={this.searchForCountryText}
@@ -559,6 +565,7 @@ export class BankingInfoForm {
             ),
             paymentMethodSlot: (
               <sl-input
+                  {...sensitiveAttrs}
                 key="paymentMethod"
                 label={props.text.paymentMethod}
                 placeholder={props.states.paymentMethodFeeLabel}
@@ -567,6 +574,7 @@ export class BankingInfoForm {
             ),
             paymentThresholdSelectSlot: (
               <sl-select
+                  {...sensitiveAttrs}
                 required
                 disabled={props.states.saveLoading}
                 label={props.text.paymentThresholdSelectLabel}
@@ -590,6 +598,7 @@ export class BankingInfoForm {
             ),
             paymentFixedDaySelectSlot: (
               <sl-select
+                  {...sensitiveAttrs}
                 required
                 disabled={props.states.saveLoading}
                 label={props.text.paymentDaySelectLabel}
@@ -614,6 +623,7 @@ export class BankingInfoForm {
             ),
             paypalInputSlot: (
               <sl-input
+                  {...sensitiveAttrs}
                 required
                 disabled={props.states.saveLoading}
                 value={props.states?.formState?.paypalEmailAddress || ""}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
index b50e2fa835..a86f7022a2 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
@@ -1,6 +1,7 @@
 import { VNode, h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 import { FORM_STEPS } from "../data";
 
 export interface IndirectTaxFormViewProps {
@@ -195,10 +196,12 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => {
   } = props;
 
   const { classes } = sheet;
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
 
   return (
     <sl-form
       class={classes.FormWrapper}
+      {...sensitiveAttrs}
       onSl-submit={callbacks.onSubmit}
       ref={(el: HTMLFormElement) => (refs.formRef.current = el)}
       novalidate
@@ -304,6 +307,7 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => {
             <div class={classes.InnerRadioContainer}>
               <sl-radio
                 exportparts="base: radio-base"
+                {...sensitiveAttrs}
                 name="/checked"
                 value="notRegistered"
                 id="notRegistered"
@@ -320,6 +324,7 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => {
               </sl-radio>
               <sl-radio
                 exportparts="base: radio-base"
+                {...sensitiveAttrs}
                 name="/checked"
                 value="otherRegion"
                 id="otherRegion"
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
index 6deb396346..c5a7aad549 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 import { PayPalIcon } from "../SVGs";
 import { intl } from "../../../global/global";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 
 export interface PayoutDetailsCardViewProps {
   states: {
@@ -168,6 +169,7 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) {
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const { classes } = sheet;
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
 
   const { states, text } = props;
 
@@ -239,14 +241,14 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) {
 
           {states.payoutType === "PAYPAL" ? (
             <div class={classes.PaypalDetailsContainer}>
-              <span class={classes.PaypalEmail}>
+              <span class={classes.PaypalEmail} {...sensitiveAttrs}>
                 {states.paypalEmailAddress}
               </span>
               <PayPalIcon />
             </div>
           ) : (
             <div class={classes.AccountDetailsContainer}>
-              <span>
+              <span {...sensitiveAttrs}>
                 {states.cardNumberPreview
                   ? `${text.accountText} ${states.cardNumberPreview}`
                   : text.payoutMissingInformationText}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx
index 5fca562096..6610dc89b5 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx
@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../../global/global";
 import { createStyleSheet } from "../../../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../../../utils/posthogMasking";
 import { vatLabels } from "../../countries";
 import { TaxCountry } from "../../data";
 import { INDIRECT_TAX_PROVINCES } from "../../subregions";
@@ -153,6 +154,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
     text,
   } = props;
   const { classes } = sheet;
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
 
   const getTaxFieldLabel = (taxType: TaxType) => {
     return intl.formatMessage(
@@ -186,6 +188,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
     return (
       <sl-input
         required
+        {...sensitiveAttrs}
         exportparts="label: input-label, base: input-base"
         class={classes.Input}
         label={label}
@@ -206,6 +209,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
       <div class={classes.ConditionalInputsContainer}>
         <sl-select
           required
+          {...sensitiveAttrs}
           exportparts="label: input-label, base: input-base"
           class={classes.Input}
           value={formState.subRegion}
@@ -232,6 +236,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
         />
         <sl-checkbox
           class={classes.Checkbox}
+          {...sensitiveAttrs}
           exportparts="label: input-label, base: input-base"
           checked={formState.hasSubRegionTaxNumber}
           onSl-change={callbacks.onSpainToggle}
@@ -242,6 +247,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
         {formState.hasSubRegionTaxNumber && (
           <sl-input
             required
+            {...sensitiveAttrs}
             exportparts="label: input-label, base: input-base"
             class={classes.Input}
             label={text.subRegionTaxNumberLabel}
@@ -273,6 +279,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
       <div class={classes.ConditionalInputsContainer}>
         <sl-select
           required
+          {...sensitiveAttrs}
           value={formState.province}
           exportparts="label: input-label, base: input-base"
           class={classes.Input}
@@ -311,6 +318,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
           <div class={classes.ConditionalInputsContainer}>
             <sl-checkbox
               class={classes.Checkbox}
+              {...sensitiveAttrs}
               exportparts="label: input-label, base: input-base"
               onSl-change={callbacks.onQstToggle}
               checked={formState.hasQst}
@@ -344,6 +352,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
         return (
           <sl-input
             required
+            {...sensitiveAttrs}
             exportparts="label: input-label, base: input-base"
             class={classes.Input}
             value={formState.indirectTaxNumber}
@@ -366,7 +375,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
 
   return (
     <div style={states.hide ? { display: "none" } : {}}>
-      <form class={classes.Container}>
+      <form class={classes.Container} {...sensitiveAttrs}>
         <style type="text/css">
           {styleString}
           {vanillaStyle}
@@ -376,6 +385,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
           <sl-select
             required
             class={classes.Input}
+            {...sensitiveAttrs}
             value={formState.selectedRegion}
             exportparts="label: input-label, base: input-base"
             label={text.selectedRegion}
@@ -393,6 +403,7 @@ export const OtherRegionSlotView = (props: IndirectDetailsSlotViewProps) => {
           >
             <sl-input
               class={classes.SearchInput}
+              {...sensitiveAttrs}
               placeholder={text.searchForCountryText}
               onKeyDown={(e) => {
                 // Stop shoelace intercepting key presses
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
index 345886bd76..9949755945 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
@@ -5,6 +5,7 @@ import { FORM_STEPS, ImpactPublisher, ImpactUser } from "../data";
 import { PHONE_EXTENSIONS } from "../phoneExtensions";
 import LoadingView from "../sqm-tax-and-cash/LoadingView";
 import { formatErrorMessage, validateBillingField } from "../utils";
+import { sensitiveMaskAttrs } from "../../../utils/posthogMasking";
 
 export interface UserInfoFormViewProps {
   states: {
@@ -438,9 +439,11 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
   function isDisabledUserInput(field: string) {
     return states.isUser && !!data.userData?.[field];
   }
+  const sensitiveAttrs = sensitiveMaskAttrs(true);
   return (
     <sl-form
       class={classes.FormWrapper}
+      {...sensitiveAttrs}
       onSl-submit={callbacks.onSubmit}
       ref={(el: HTMLFormElement) => (refs.formRef.current = el)}
       novalidate
@@ -553,6 +556,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               <sl-input
                 class="ErrorInput"
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 value={formState.firstName}
                 label={text.firstName}
                 disabled={states.disabled || isDisabledUserInput("firstName")}
@@ -571,6 +575,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               />
               <sl-input
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 value={formState.lastName}
                 label={text.lastName}
                 disabled={states.disabled || isDisabledUserInput("lastName")}
@@ -589,6 +594,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               />
               <sl-input
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 value={formState.email}
                 label={text.email}
                 disabled={true}
@@ -600,6 +606,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               <sl-select
                 id="countryCode"
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 name="/countryCode"
                 label={text.country}
                 value={formState.countryCode}
@@ -620,6 +627,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               >
                 <sl-input
                   class={classes.SearchInput}
+                  {...sensitiveAttrs}
                   placeholder={text.searchForCountryText}
                   onKeyDown={(e) => {
                     // Stop shoelace intercepting key presses
@@ -649,6 +657,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
                   <sl-select
                     id="phoneNumberCountryCode"
                     exportparts="label: input-label, base: input-base"
+                    {...sensitiveAttrs}
                     name="/phoneNumberCountryCode"
                     value={formState.phoneNumberCountryCode}
                     disabled={
@@ -671,6 +680,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
                   >
                     <sl-input
                       class={classes.SearchInput}
+                      {...sensitiveAttrs}
                       placeholder={text.searchForCountryText}
                       onKeyDown={(e) => {
                         // Stop shoelace intercepting key presses
@@ -702,6 +712,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
                   </sl-select>
                   <sl-input
                     exportparts="label: input-label, base: input-base"
+                    {...sensitiveAttrs}
                     id="phoneNumber"
                     name="/phoneNumber"
                     value={formState.phoneNumber}
@@ -731,6 +742,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               </div>
               <sl-input
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 label={text.address}
                 id="address"
                 name="/address"
@@ -759,6 +771,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               ></sl-input>
               <sl-input
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 label={text.city}
                 id="city"
                 name="/city"
@@ -789,6 +802,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
                 <sl-select
                   label={regionLabel}
                   exportparts="label: input-label, base: input-base"
+                  {...sensitiveAttrs}
                   id="state"
                   name="/state"
                   value={formState.state}
@@ -814,6 +828,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               <sl-input
                 label={text.postalCode}
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 id="postalCode"
                 name="/postalCode"
                 value={formState.postalCode}
@@ -834,6 +849,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               <sl-select
                 id="currency"
                 exportparts="label: input-label, base: input-base"
+                {...sensitiveAttrs}
                 name="/currency"
                 label={text.currency}
                 menu
@@ -854,6 +870,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
               >
                 <sl-input
                   class={classes.SearchInput}
+                  {...sensitiveAttrs}
                   placeholder={text.searchForCurrencyText}
                   onKeyDown={(e) => {
                     // Stop shoelace intercepting key presses
@@ -880,6 +897,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
 
               <div class={classes.CheckboxWrapper}>
                 <sl-checkbox
+                  {...sensitiveAttrs}
                   checked={formState.allowBankingCollection === true}
                   onSl-change={(e) => {
                     e.target.value = e.target.checked;
diff --git a/packages/mint-components/src/utils/posthogMasking.ts b/packages/mint-components/src/utils/posthogMasking.ts
new file mode 100644
index 0000000000..3c75668b5d
--- /dev/null
+++ b/packages/mint-components/src/utils/posthogMasking.ts
@@ -0,0 +1,40 @@
+const SENSITIVE_FIELD_PATTERNS = [
+  "name",
+  "address",
+  "city",
+  "state",
+  "province",
+  "region",
+  "postal",
+  "zip",
+  "phone",
+  "tax",
+  "account",
+  "iban",
+  "swift",
+  "routing",
+  "beneficiary",
+  "paypal",
+  "bank",
+  "card",
+  "payment",
+];
+
+export function shouldMaskSensitiveField(field?: string): boolean {
+  if (!field) {
+    return false;
+  }
+
+  const normalized = field.toLowerCase();
+  return SENSITIVE_FIELD_PATTERNS.some((pattern) =>
+    normalized.includes(pattern)
+  );
+}
+
+export function sensitiveMaskAttrs(enabled: boolean): Record<string, string> {
+  return enabled
+    ? {
+        "data-sqm-sensitive": "true",
+      }
+    : {};
+}