From 6b11e4cf7ab31000e7404586a1cc4e6b0e5864c7 Mon Sep 17 00:00:00 2001 From: elizabeth-ilina Date: Wed, 10 Dec 2025 14:06:53 -0500 Subject: [PATCH] fix(payments-next): "Name as it appears on credit card" field does not appear prior to entering credit card number Because: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * We’d like to collect less info and less fields, so we want to remove the Name field. This commit: * Removes "Name as it appears on your card" field from ui pages (checkout, submanage) * Removes any backend code that required the full name field. Closes #PAY-3417 --- libs/payments/cart/src/lib/cart.factories.ts | 1 - libs/payments/cart/src/lib/cart.types.ts | 1 - .../payments/cart/src/lib/checkout.service.ts | 1 - .../customer/src/lib/customer.manager.spec.ts | 1 - .../customer/src/lib/customer.manager.ts | 4 +- .../subscriptionManagement.service.spec.ts | 6 +- .../src/lib/subscriptionManagement.service.ts | 4 +- .../src/lib/actions/checkoutCartWithStripe.ts | 1 - .../actions/setDefaultStripePaymentDetails.ts | 2 - .../lib/client/components/CheckoutForm/en.ftl | 5 -- .../client/components/CheckoutForm/index.tsx | 81 +------------------ .../PaymentMethodManagement/index.tsx | 70 +--------------- .../client/components/PaymentSection/en.ftl | 3 - .../src/lib/nestapp/nextjs-actions.service.ts | 4 +- .../CheckoutCartWithStripeActionArgs.ts | 3 - ...etDefaultStripePaymentDetailsActionArgs.ts | 3 - 16 files changed, 9 insertions(+), 181 deletions(-) delete mode 100644 libs/payments/ui/src/lib/client/components/PaymentSection/en.ftl diff --git a/libs/payments/cart/src/lib/cart.factories.ts b/libs/payments/cart/src/lib/cart.factories.ts index 64f2256d9c..f4139474d3 100644 --- a/libs/payments/cart/src/lib/cart.factories.ts +++ b/libs/payments/cart/src/lib/cart.factories.ts @@ -44,7 +44,6 @@ export const CheckoutCustomerDataFactory = ( override?: Partial ): CheckoutCustomerData => ({ locale: faker.helpers.arrayElement(['en-US', 'de', 'es', 'fr-FR']), - displayName: faker.person.fullName(), ...override, }); diff --git a/libs/payments/cart/src/lib/cart.types.ts b/libs/payments/cart/src/lib/cart.types.ts index 50cd19c502..a969008834 100644 --- a/libs/payments/cart/src/lib/cart.types.ts +++ b/libs/payments/cart/src/lib/cart.types.ts @@ -13,7 +13,6 @@ import Stripe from 'stripe'; export type CheckoutCustomerData = { locale: string; - displayName: string; }; export type FinishCart = { diff --git a/libs/payments/cart/src/lib/checkout.service.ts b/libs/payments/cart/src/lib/checkout.service.ts index 4f9f5387d4..8fefb9461d 100644 --- a/libs/payments/cart/src/lib/checkout.service.ts +++ b/libs/payments/cart/src/lib/checkout.service.ts @@ -164,7 +164,6 @@ export class CheckoutService { customer = await this.customerManager.create({ uid, email, - displayName: customerData.displayName, taxAddress, }); diff --git a/libs/payments/customer/src/lib/customer.manager.spec.ts b/libs/payments/customer/src/lib/customer.manager.spec.ts index ac328a81a4..4601ed0b5a 100644 --- a/libs/payments/customer/src/lib/customer.manager.spec.ts +++ b/libs/payments/customer/src/lib/customer.manager.spec.ts @@ -120,7 +120,6 @@ describe('CustomerManager', () => { const result = await customerManager.create({ uid: faker.string.uuid(), email: faker.internet.email(), - displayName: faker.person.fullName(), taxAddress: taxAddress, }); diff --git a/libs/payments/customer/src/lib/customer.manager.ts b/libs/payments/customer/src/lib/customer.manager.ts index d609650bb3..a10997ec13 100644 --- a/libs/payments/customer/src/lib/customer.manager.ts +++ b/libs/payments/customer/src/lib/customer.manager.ts @@ -45,10 +45,9 @@ export class CustomerManager { async create(args: { uid: string; email: string; - displayName: string; taxAddress?: TaxAddress; }) { - const { uid, email, displayName, taxAddress } = args; + const { uid, email, taxAddress } = args; const shipping = taxAddress ? { @@ -62,7 +61,6 @@ export class CustomerManager { const customer = await this.stripeClient.customersCreate({ email, - name: displayName || '', description: uid, metadata: { [STRIPE_CUSTOMER_METADATA.Userid]: uid, diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts index 4581f9bb9f..89ca091bfd 100644 --- a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts +++ b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts @@ -1477,7 +1477,6 @@ describe('SubscriptionManagementService', () => { const mockPaymentMethod = StripeResponseFactory( StripePaymentMethodFactory() ); - const mockFullName = faker.person.fullName(); jest .spyOn(accountCustomerManager, 'getAccountCustomerByUid') @@ -1486,8 +1485,7 @@ describe('SubscriptionManagementService', () => { await subscriptionManagementService.setDefaultStripePaymentDetails( mockCustomer.id, - mockPaymentMethod.id, - mockFullName + mockPaymentMethod.id ); expect(customerManager.update).toHaveBeenCalledWith( @@ -1496,7 +1494,6 @@ describe('SubscriptionManagementService', () => { invoice_settings: { default_payment_method: mockPaymentMethod.id, }, - name: mockFullName, } ); }); @@ -1513,7 +1510,6 @@ describe('SubscriptionManagementService', () => { subscriptionManagementService.setDefaultStripePaymentDetails( mockAccountCustomer.uid, 'pm_12345', - 'john doe' ) ).rejects.toBeInstanceOf(SetDefaultPaymentAccountCustomerMissingStripeId); }); diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.ts b/libs/payments/management/src/lib/subscriptionManagement.service.ts index 4142e70b25..b21884a98c 100644 --- a/libs/payments/management/src/lib/subscriptionManagement.service.ts +++ b/libs/payments/management/src/lib/subscriptionManagement.service.ts @@ -940,7 +940,6 @@ export class SubscriptionManagementService { async setDefaultStripePaymentDetails( uid: string, paymentMethodId: string, - fullName: string ) { const accountCustomer = await this.accountCustomerManager.getAccountCustomerByUid(uid); @@ -952,8 +951,7 @@ export class SubscriptionManagementService { await this.customerManager.update(accountCustomer.stripeCustomerId, { invoice_settings: { default_payment_method: paymentMethodId, - }, - name: fullName, + } }); } diff --git a/libs/payments/ui/src/lib/actions/checkoutCartWithStripe.ts b/libs/payments/ui/src/lib/actions/checkoutCartWithStripe.ts index 5385e112bf..5b70993a05 100644 --- a/libs/payments/ui/src/lib/actions/checkoutCartWithStripe.ts +++ b/libs/payments/ui/src/lib/actions/checkoutCartWithStripe.ts @@ -13,7 +13,6 @@ export const checkoutCartWithStripe = async ( confirmationTokenId: string, customerData: { locale: string; - displayName: string; }, attribution: SubscriptionAttributionParams, sessionUid?: string diff --git a/libs/payments/ui/src/lib/actions/setDefaultStripePaymentDetails.ts b/libs/payments/ui/src/lib/actions/setDefaultStripePaymentDetails.ts index c7ba7795d0..746869b9fa 100644 --- a/libs/payments/ui/src/lib/actions/setDefaultStripePaymentDetails.ts +++ b/libs/payments/ui/src/lib/actions/setDefaultStripePaymentDetails.ts @@ -9,13 +9,11 @@ import { getApp } from '../nestapp/app'; export const setDefaultStripePaymentDetails = async ( uid: string, paymentMethodId: string, - fullName: string ) => { const actionsService = getApp().getActionsService(); return await actionsService.setDefaultStripePaymentDetails({ uid, paymentMethodId, - fullName, }); }; diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm/en.ftl b/libs/payments/ui/src/lib/client/components/CheckoutForm/en.ftl index 6346adce17..6c1364b891 100644 --- a/libs/payments/ui/src/lib/client/components/CheckoutForm/en.ftl +++ b/libs/payments/ui/src/lib/client/components/CheckoutForm/en.ftl @@ -1,10 +1,5 @@ ## Checkout Form next-new-user-submit = Subscribe Now -next-payment-validate-name-error = Please enter your full name next-pay-with-heading-paypal = Pay with { -brand-paypal } - -# Label for the Full Name input -payment-name-label = Name as it appears on your card -payment-name-placeholder = Full Name diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx index 9294d2e526..9dab210276 100644 --- a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx +++ b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 'use client'; -import { Localized, useLocalization } from '@fluent/react'; +import { Localized, } from '@fluent/react'; import { PayPalButtons } from '@paypal/react-paypal-js'; import * as Form from '@radix-ui/react-form'; import Stripe from 'stripe'; @@ -97,7 +97,6 @@ export function CheckoutForm({ sessionUid, sessionEmail, }: CheckoutFormProps) { - const { l10n } = useLocalization(); const elements = useElements(); const router = useRouter(); const stripe = useStripe(); @@ -113,8 +112,6 @@ export function CheckoutForm({ const [isPaymentElementLoading, setIsPaymentElementLoading] = useState(true); const [loading, setLoading] = useState(false); const [stripeFieldsComplete, setStripeFieldsComplete] = useState(false); - const [fullName, setFullName] = useState(''); - const [hasFullNameError, setHasFullNameError] = useState(false); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(''); const [isSavedPaymentMethod, setIsSavedPaymentMethod] = useState( !!cart?.paymentInfo?.type @@ -123,7 +120,6 @@ export function CheckoutForm({ const linkAuthOptions = sessionEmail ? { defaultValues: { email: sessionEmail } } : {}; - const [isNotCard, setIsNotCard] = useState(false); const engageGlean = useCallbackOnce(() => { recordEmitterEventAction( @@ -155,10 +151,6 @@ export function CheckoutForm({ const isNewCardSelected = event?.value?.type === 'card' && !hasSavedPaymentMethod; - const selectedType = event?.value?.type || ''; - const isNotCardType = selectedType !== 'card'; - setIsNotCard(isNotCardType); - setShowLinkAuthElement(isNewCardSelected && hasSavedPaymentMethod); setSelectedPaymentMethod(event?.value?.type || ''); @@ -172,13 +164,6 @@ export function CheckoutForm({ const showPayPalButton = selectedPaymentMethod === 'external_paypal'; const isStripe = cart?.paymentInfo?.type !== 'external_paypal'; - const showFullNameInput = - !isPaymentElementLoading && - !showPayPalButton && - !isSavedPaymentMethod && - selectedPaymentMethod === 'card' && - !isNotCard; - const nonStripeFieldsComplete = !showFullNameInput || !!fullName; const submitHandler = async ( event: React.SyntheticEvent @@ -220,16 +205,6 @@ export function CheckoutForm({ return; } - if (showFullNameInput) { - setHasFullNameError(!fullName); - if (!fullName) { - setLoading(false); - return; - } - } else { - setHasFullNameError(false); - } - // Trigger form validation and wallet collection const { error: submitError } = await elements.submit(); if (submitError) { @@ -248,7 +223,6 @@ export function CheckoutForm({ ? { payment_method_data: { billing_details: { - name: fullName, email: sessionEmail || undefined, }, }, @@ -291,7 +265,6 @@ export function CheckoutForm({ confirmationToken.id, { locale, - displayName: fullName, }, getAttributionParams(searchParams), sessionUid @@ -329,55 +302,6 @@ export function CheckoutForm({ } onClick={() => setShowConsentError(true)} > - {showFullNameInput && ( - <> - -

- Enter your card information -

- - - - - Name as it appears on your card - - - - { - setFullName(e.target.value); - setHasFullNameError(!e.target.value); - }} - aria-required - /> - - {hasFullNameError && ( - - -

- Please enter your name -

- - - )} - - - )} {cart?.paymentInfo?.type === 'external_paypal' ? (

Saved

@@ -470,8 +394,7 @@ export function CheckoutForm({ variant={ButtonVariant.Primary} aria-disabled={ !formEnabled || - (isStripe && - !(stripeFieldsComplete && nonStripeFieldsComplete)) || + (isStripe && !stripeFieldsComplete) || loading } > diff --git a/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx index d428f3d406..2c74a4bf81 100644 --- a/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx +++ b/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx @@ -42,8 +42,6 @@ export function PaymentMethodManagement({ const [isReady, setIsReady] = useState(false); const [error, setError] = useState(null); const [isInputNewCardDetails, setIsInputNewCardDetails] = useState(false); - const [fullName, setFullName] = useState(''); - const [hasFullNameError, setHasFullNameError] = useState(false); const [isNonDefaultCardSelected, setIsNonDefaultCardSelected] = useState(false); const [isNonCardSelected, setIsNonCardSelected] = useState(false); @@ -68,7 +66,6 @@ export function PaymentMethodManagement({ if (event.value.type !== 'card') { setIsNonCardSelected(true); setIsInputNewCardDetails(false); - setHasFullNameError(false); if (!!event.value.payment_method) { if (event.value.payment_method.id !== defaultPaymentMethodId) { setIsNonDefaultCardSelected(true); @@ -82,10 +79,6 @@ export function PaymentMethodManagement({ if (event.value.type === 'card' && !event.value.payment_method) { setIsInputNewCardDetails(true); - - if (event.complete) { - setHasFullNameError(fullName.length === 0); - } } else if (event.value.type === 'card' && !!event.value.payment_method) { setIsInputNewCardDetails(false); @@ -117,8 +110,7 @@ export function PaymentMethodManagement({ uid ?? '', typeof response.setupIntent.payment_method === 'string' ? response.setupIntent.payment_method - : (response.setupIntent.payment_method?.id ?? ''), - fullName + : (response.setupIntent.payment_method?.id ?? '') ); } else { throw new Error('We could not confirm your payment method'); @@ -132,11 +124,6 @@ export function PaymentMethodManagement({ return; } - if (isInputNewCardDetails && !fullName) { - setHasFullNameError(true); - return; - } - setIsLoading(true); setError(null); @@ -154,7 +141,6 @@ export function PaymentMethodManagement({ params: { payment_method_data: { billing_details: { - name: fullName, email: sessionEmail || undefined, }, }, @@ -206,56 +192,6 @@ export function PaymentMethodManagement({ onSubmit={handleSubmit} className="px-4 tablet:px-0" > - {isInputNewCardDetails && ( - <> - -

- Enter your card information -

- - - - - Name as it appears on your card - - - - { - setFullName(e.target.value); - setHasFullNameError(!e.target.value); - }} - aria-required - /> - - {hasFullNameError && ( - - -

- Please enter your full name -

- - - )} - - - )}
{isLoading ? ( diff --git a/libs/payments/ui/src/lib/client/components/PaymentSection/en.ftl b/libs/payments/ui/src/lib/client/components/PaymentSection/en.ftl deleted file mode 100644 index 7bc485f37b..0000000000 --- a/libs/payments/ui/src/lib/client/components/PaymentSection/en.ftl +++ /dev/null @@ -1,3 +0,0 @@ -## Payment Section - -next-new-user-card-title = Enter your card information diff --git a/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts b/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts index 2d6003b81e..4f53857aa9 100644 --- a/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts +++ b/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts @@ -480,7 +480,7 @@ export class NextJSActionsService { cartId: string; version: number; confirmationTokenId: string; - customerData: { locale: string; displayName: string }; + customerData: { locale: string;}; attribution: SubscriptionAttributionParams; sessionUid?: string; }) { @@ -878,12 +878,10 @@ export class NextJSActionsService { async setDefaultStripePaymentDetails(args: { uid: string; paymentMethodId: string; - fullName: string; }) { return await this.subscriptionManagementService.setDefaultStripePaymentDetails( args.uid, args.paymentMethodId, - args.fullName ); } diff --git a/libs/payments/ui/src/lib/nestapp/validators/CheckoutCartWithStripeActionArgs.ts b/libs/payments/ui/src/lib/nestapp/validators/CheckoutCartWithStripeActionArgs.ts index 7bbdeada55..ec3c26fdef 100644 --- a/libs/payments/ui/src/lib/nestapp/validators/CheckoutCartWithStripeActionArgs.ts +++ b/libs/payments/ui/src/lib/nestapp/validators/CheckoutCartWithStripeActionArgs.ts @@ -49,9 +49,6 @@ export class CheckoutCartWithStripeActionAttributionData { export class CheckoutCartWithStripeActionCustomerData { @IsString() locale!: string; - - @IsString() - displayName!: string; } export class CheckoutCartWithStripeActionArgs { diff --git a/libs/payments/ui/src/lib/nestapp/validators/SetDefaultStripePaymentDetailsActionArgs.ts b/libs/payments/ui/src/lib/nestapp/validators/SetDefaultStripePaymentDetailsActionArgs.ts index e37ec0ce38..844a3494a6 100644 --- a/libs/payments/ui/src/lib/nestapp/validators/SetDefaultStripePaymentDetailsActionArgs.ts +++ b/libs/payments/ui/src/lib/nestapp/validators/SetDefaultStripePaymentDetailsActionArgs.ts @@ -10,7 +10,4 @@ export class SetDefaultStripePaymentDetailsActionArgs { @IsString() paymentMethodId!: string; - - @IsString() - fullName!: string; }