ref: Remove Postal Code complexity on payment form (#87224)

This PR aims to reduce some complexity on the Credit Card Form by
deleting the postal code field and tapping into the postal code field on
the stripe form directly.

Looking back, the change was made 7+ years ago to add that separate
functionality due to some weird validation errors on Stripe's end; but I
think since then we can reasonably assume that Stripe has probably made
some updates and fixed those updates. And if not, this will be easy
enough to revert 😅


Had to go digging but here's the original commit:

![Screenshot 2025-03-17 at 11 56
56 AM](https://github.com/user-attachments/assets/e1b24c8e-15d2-45a7-b1e4-bd8d556de79c)


**LOCAL Testing**


https://github.com/user-attachments/assets/1f1e7285-9c26-484c-b637-53ea36dcbf1c

**Checkout Flow**



https://github.com/user-attachments/assets/894cd805-46dd-4c0f-983b-101b7259eb59

**Postal Code Validation**

![Screenshot 2025-03-17 at 2 00
56 PM](https://github.com/user-attachments/assets/c213ecf6-feff-4db2-b7ea-93d2f9a0fe15)



Closes #85040

<!--

  Sentry employees and contractors can delete or ignore the following.

-->

### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

Author: ajay-sentry

static/gsApp/components/creditCardForm.tsx

@@ -8,7 +8,6 @@ import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import {Input} from 'sentry/components/core/input';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
-import TextField from 'sentry/components/forms/fields/textField';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {NODE_ENV} from 'sentry/constants';
@@ -96,7 +95,6 @@ function CreditCardForm({
   referrer,
 }: Props) {
   const theme = useTheme();
-  const [postalCode, setPostalCode] = useState('');
   const [busy, setBusy] = useState(false);
   const [stripe, setStripe] = useState<stripe.Stripe>();
   const [cardElement, setCardElement] = useState<stripe.elements.Element>();
@@ -141,7 +139,6 @@ function CreditCardForm({
       fonts: [{family: 'Rubik', src: `url(${rubikFontPath})`, weight: '400'}],
     });
     const stripeCardElement = stripeElements.create('card', {
-      hidePostalCode: true,
       style: stripeElementStyles,
     });
 
@@ -164,9 +161,6 @@ function CreditCardForm({
     setBusy(true);
 
     const validationErrors: string[] = [];
-    if (postalCode === '') {
-      validationErrors.push(t('Postal code is required.'));
-    }
 
     if (!stripe || !cardElement) {
       return;
@@ -182,19 +176,6 @@ function CreditCardForm({
     onCancel?.();
   }
 
-  function handlePostalCodeChange(value: string) {
-    setPostalCode(value);
-    if (cardElement) {
-      cardElement.update({value: {postalCode: value}});
-    }
-  }
-  function handlePostalCodeBlur(value: string) {
-    setPostalCode(value);
-    if (cardElement) {
-      cardElement.update({value: {postalCode: value}});
-    }
-  }
-
   function handleErrorRetry(event: React.MouseEvent) {
     event.preventDefault();
     errorRetry?.();
@@ -243,18 +224,6 @@ function CreditCardForm({
             <div ref={stripeMount} />
           </FormControl>
         </StyledField>
-        <StyledTextField
-          required
-          stacked
-          flexibleControlStateSize
-          inline={false}
-          maxLength={12}
-          name="postal"
-          label={t('Postal Code')}
-          value={postalCode}
-          onChange={handlePostalCodeChange}
-          onBlur={handlePostalCodeBlur}
-        />
 
         <Info>
           <small>
@@ -304,10 +273,6 @@ const StyledField = styled(FieldGroup)`
   padding-top: 0;
 `;
 
-const StyledTextField = styled(TextField)`
-  ${fieldCss};
-`;
-
 const Info = styled('p')`
   ${fieldCss};
   margin-bottom: ${space(3)};

static/gsApp/views/amCheckout/steps/addPaymentMethod.spec.tsx

@@ -148,7 +148,6 @@ describe('AddPaymentMethod', function () {
     await waitFor(() => expect(setupIntent).toHaveBeenCalled());
 
     expect(screen.getByLabelText('Card Details')).toBeInTheDocument();
-    expect(screen.getByRole('textbox', {name: 'Postal Code'})).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Continue'})).toBeInTheDocument();
   });
 

static/gsApp/views/invoiceDetails/paymentForm.spec.tsx

@@ -3,11 +3,10 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {InvoiceFixture} from 'getsentry-test/fixtures/invoice';
 import {
-  act,
   cleanup,
-  fireEvent,
   render,
   screen,
+  userEvent,
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
 
@@ -126,14 +125,8 @@ describe('InvoiceDetails > Payment Form', function () {
     expect(error).toBeInTheDocument();
 
     // Submit the form anyways
-    const postalCode = screen.getByRole('textbox', {name: 'Postal Code'});
-    act(() => {
-      fireEvent.change(postalCode, {target: {value: '90210'}});
-    });
     const button = screen.getByRole('button', {name: 'Pay Now'});
-    act(() => {
-      fireEvent.click(button);
-    });
+    await userEvent.click(button);
 
     // Should show an error as our intent never loaded.
     error = screen.getByText(/Cannot complete your payment/);
@@ -162,14 +155,8 @@ describe('InvoiceDetails > Payment Form', function () {
 
     expect(screen.getByText('Pay Invoice')).toBeInTheDocument();
 
-    const postalCode = screen.getByRole('textbox', {name: 'Postal Code'});
-    act(() => {
-      fireEvent.change(postalCode, {target: {value: '90210'}});
-    });
     const button = screen.getByRole('button', {name: 'Pay Now'});
-    act(() => {
-      fireEvent.click(button);
-    });
+    await userEvent.click(button);
     await waitFor(() => expect(reloadInvoice).toHaveBeenCalled());
     expect(reloadInvoice).toHaveBeenCalled();
   });

static/gsApp/views/subscriptionPage/billingDetails.spec.tsx

@@ -216,10 +216,6 @@ describe('Subscription > BillingDetails', function () {
     const modal = await screen.findByRole('dialog');
     const inModal = within(modal);
 
-    // Postal code input is not handled by Stripe elements. We need to fill it
-    // before submit will pass to Stripe
-    await userEvent.type(inModal.getByRole('textbox', {name: 'Postal Code'}), '94107');
-
     // Save the updated credit card details
     await userEvent.click(inModal.getByRole('button', {name: 'Save Changes'}));
     await waitForModalToHide();
@@ -243,41 +239,6 @@ describe('Subscription > BillingDetails', function () {
     });
   });
 
-  it('rejects update credit card if zip code is not included with setupintent', async function () {
-    const mock = MockApiClient.addMockResponse({
-      url: `/customers/${organization.slug}/`,
-      method: 'PUT',
-    });
-    MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/payments/setup/`,
-      method: 'POST',
-      body: {
-        id: '123',
-        clientSecret: 'seti_abc123',
-        status: 'require_payment_method',
-        lastError: null,
-      },
-    });
-
-    render(
-      <BillingDetailsView
-        organization={organization}
-        subscription={subscription}
-        location={router.location}
-      />
-    );
-
-    await screen.findByRole('textbox', {name: /street address 1/i});
-    await userEvent.click(screen.getByRole('button', {name: 'Update card'}));
-
-    renderGlobalModal();
-    const modal = await screen.findByRole('dialog');
-    await userEvent.click(within(modal).getByRole('button', {name: 'Save Changes'}));
-
-    expect(modal).toHaveTextContent('Postal code is required');
-    expect(mock).not.toHaveBeenCalledWith();
-  });
-
   it('shows an error if the setupintent creation fails', async function () {
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/payments/setup/`,
@@ -330,10 +291,6 @@ describe('Subscription > BillingDetails', function () {
     const modal = await screen.findByRole('dialog');
     const inModal = within(modal);
 
-    // Postal code input is not handled by Stripe elements. We need to fill it
-    // before submit will pass to Stripe
-    await userEvent.type(inModal.getByRole('textbox', {name: 'Postal Code'}), '94107');
-
     // Save the updated credit card details
     await userEvent.click(inModal.getByRole('button', {name: 'Save Changes'}));