feat(billing): Use Stripe PaymentElement (#99384)

# updating credit card
<img width="613" height="448" alt="Screenshot 2025-09-12 at 12 26 46 PM"
src="https://github.com/user-attachments/assets/59b1ab1a-5fc2-4461-a48d-b6789afe1e1d"
/>

# manually making a payment
<img width="606" height="416" alt="Screenshot 2025-09-12 at 4 15 32 PM"
src="https://github.com/user-attachments/assets/948663aa-e383-4b3b-9cc9-b9c0406233cb"
/>

Author: isabellaenriquez

static/gsApp/components/billingDetailsForm.tsx

@@ -1,9 +1,7 @@
 import {useEffect, useMemo, useState} from 'react';
-import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {AddressElement, Elements} from '@stripe/react-stripe-js';
+import {AddressElement} from '@stripe/react-stripe-js';
 
-import {debossedBackground} from 'sentry/components/core/chonk';
 import {Flex} from 'sentry/components/core/layout';
 import {Heading, Text} from 'sentry/components/core/text';
 import type {FieldGroupProps} from 'sentry/components/forms/fieldGroup/types';
@@ -13,12 +11,11 @@ import FormModel from 'sentry/components/forms/model';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 
 import LegacyBillingDetailsForm from 'getsentry/components/legacyBillingDetailsForm';
-import {useStripeInstance} from 'getsentry/hooks/useStripeInstance';
+import StripeWrapper from 'getsentry/components/stripeWrapper';
 import type {BillingDetails} from 'getsentry/types';
 import {hasStripeComponentsFeature} from 'getsentry/utils/billing';
 import {countryCodes} from 'getsentry/utils/ISO3166codes';
@@ -130,10 +127,6 @@ function BillingDetailsForm({
   wrapper = DefaultWrapper,
   fieldProps,
 }: Props) {
-  const theme = useTheme();
-  const prefersDarkMode = useLegacyStore(ConfigStore).theme === 'dark';
-  const stripe = useStripeInstance();
-
   const transformData = (data: Record<string, any>) => {
     // Clear tax number if not applicable to country code.
     // This is done on save instead of on change to retain the field value
@@ -266,43 +259,7 @@ function BillingDetailsForm({
                 fieldProps={fieldProps}
               />
             )}
-            <Elements
-              stripe={stripe}
-              options={{
-                fonts: [
-                  {
-                    family: 'Rubik',
-                    cssSrc:
-                      'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap',
-                  },
-                ],
-                appearance: {
-                  theme: prefersDarkMode ? 'night' : 'stripe',
-                  variables: {
-                    fontFamily: theme.text.family,
-                    borderRadius: theme.borderRadius,
-                    colorBackground: theme.background,
-                    colorText: theme.textColor,
-                    colorDanger: theme.danger,
-                    colorSuccess: theme.success,
-                    colorWarning: theme.warning,
-                    iconColor: theme.textColor,
-                  },
-                  rules: {
-                    '.Input': {
-                      fontSize: theme.fontSize.md,
-                      boxShadow: `0px 2px 0px 0px ${theme.tokens.border.primary} inset`,
-                      backgroundColor: debossedBackground(theme as any).backgroundColor,
-                      padding: `${theme.space.lg} ${theme.space.xl}`,
-                    },
-                    '.Label': {
-                      fontSize: theme.fontSize.sm,
-                      color: theme.subText,
-                    },
-                  },
-                },
-              }}
-            >
+            <StripeWrapper>
               <AddressElement
                 options={{
                   mode: 'billing',
@@ -333,7 +290,7 @@ function BillingDetailsForm({
                 }}
                 onChange={handleStripeFormChange}
               />
-            </Elements>
+            </StripeWrapper>
             {!!(state.showTaxNumber && taxFieldInfo) && (
               // TODO: use Stripe's TaxIdElement when it's generally available
               <CustomBillingDetailsFormField

static/gsApp/components/creditCardEditModal.tsx

@@ -7,8 +7,10 @@ import type {Organization} from 'sentry/types/organization';
 import {decodeScalar} from 'sentry/utils/queryString';
 
 import CreditCardSetup from 'getsentry/components/creditCardSetup';
+import StripeCreditCardSetup from 'getsentry/components/stripeCreditCardSetup';
 import type {Subscription} from 'getsentry/types';
 import {FTCConsentLocation} from 'getsentry/types';
+import {hasStripeComponentsFeature} from 'getsentry/utils/billing';
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
 type Props = ModalRenderProps & {
@@ -29,27 +31,49 @@ function CreditCardEditModal({
 }: Props) {
   const referrer = decodeScalar(location?.query?.referrer);
   const budgetModeText = subscription.planDetails.budgetTerm;
+  const shouldUseStripe = hasStripeComponentsFeature(organization);
+
+  const commonProps = {
+    organization,
+    location: FTCConsentLocation.BILLING_DETAILS,
+    referrer,
+    budgetModeText,
+    buttonText: t('Save Changes'),
+  };
+
   return (
     <Fragment>
       <Header>{t('Update Credit Card')}</Header>
       <Body>
-        <CreditCardSetup
-          isModal
-          organization={organization}
-          onCancel={closeModal}
-          onSuccess={data => {
-            onSuccess(data);
-            closeModal();
-            trackGetsentryAnalytics('billing_details.updated_cc', {
-              organization,
-              referrer: decodeScalar(referrer),
-            });
-          }}
-          buttonText={t('Save Changes')}
-          referrer={referrer}
-          location={FTCConsentLocation.BILLING_DETAILS}
-          budgetModeText={budgetModeText}
-        />
+        {shouldUseStripe ? (
+          <StripeCreditCardSetup
+            onCancel={closeModal}
+            onSuccessWithSubscription={onSuccess}
+            onSuccess={() => {
+              closeModal();
+              trackGetsentryAnalytics('billing_details.updated_cc', {
+                organization,
+                referrer: decodeScalar(referrer),
+                isStripeComponent: true,
+              });
+            }}
+            {...commonProps}
+          />
+        ) : (
+          <CreditCardSetup
+            isModal
+            onCancel={closeModal}
+            onSuccess={data => {
+              onSuccess(data);
+              closeModal();
+              trackGetsentryAnalytics('billing_details.updated_cc', {
+                organization,
+                referrer: decodeScalar(referrer),
+              });
+            }}
+            {...commonProps}
+          />
+        )}
       </Body>
     </Fragment>
   );

static/gsApp/components/creditCardForm.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {CardElement, Elements, useElements, useStripe} from '@stripe/react-stripe-js';
+import {CardElement, useElements, useStripe} from '@stripe/react-stripe-js';
 import {type Stripe, type StripeCardElement} from '@stripe/stripe-js';
 
 import {Alert} from 'sentry/components/core/alert';
@@ -15,8 +15,8 @@ import {NODE_ENV} from 'sentry/constants';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
-import {useStripeInstance} from 'getsentry/hooks/useStripeInstance';
-import type {FTCConsentLocation} from 'getsentry/types';
+import StripeWrapper from 'getsentry/components/stripeWrapper';
+import {FTCConsentLocation} from 'getsentry/types';
 
 export type SubmitData = {
   /**
@@ -93,12 +93,10 @@ type Props = {
  * and classic card flows.
  */
 function CreditCardForm(props: Props) {
-  const stripe = useStripeInstance();
-
   return (
-    <Elements stripe={stripe}>
+    <StripeWrapper>
       <CreditCardFormInner {...props} />
-    </Elements>
+    </StripeWrapper>
   );
 }
 

static/gsApp/components/stripeCreditCardSetup.tsx

@@ -0,0 +1,53 @@
+import type {Organization} from 'sentry/types/organization';
+
+import StripeCreditCardForm from 'getsentry/components/stripeForms/stripeCreditCardForm';
+import type {FTCConsentLocation, Subscription} from 'getsentry/types';
+
+export interface StripeCreditCardSetupProps {
+  /**
+   * Handler for cancellation.
+   */
+  onCancel: () => void;
+  /**
+   * Handler for success.
+   */
+  onSuccess: () => void;
+  /**
+   * The organization associated with the form
+   */
+  organization: Organization;
+  /**
+   * budget mode text for fine print, if any.
+   */
+  budgetModeText?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  buttonText?: string;
+
+  /**
+   * Location of form, if any.
+   */
+  location?: FTCConsentLocation;
+  /**
+   * Handler for success called with new subscription state.
+   */
+  onSuccessWithSubscription?: (subscription: Subscription) => void;
+  /**
+   * The URL referrer, if any.
+   */
+  referrer?: string;
+}
+
+function StripeCreditCardSetup(props: StripeCreditCardSetupProps) {
+  return (
+    <StripeCreditCardForm
+      cardMode="setup"
+      intentDataEndpoint={`/organizations/${props.organization.slug}/payments/setup/`}
+      {...props}
+    />
+  );
+}
+
+export default StripeCreditCardSetup;

static/gsApp/components/stripeForms/innerIntentForm.tsx

@@ -0,0 +1,84 @@
+import {useState} from 'react';
+import {PaymentElement, useElements, useStripe} from '@stripe/react-stripe-js';
+import type {StripePaymentElementChangeEvent} from '@stripe/stripe-js';
+
+import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
+import {ExternalLink} from 'sentry/components/core/link';
+import {Text} from 'sentry/components/core/text';
+import Form from 'sentry/components/forms/form';
+import {t, tct} from 'sentry/locale';
+
+import type {InnerIntentFormProps} from 'getsentry/components/stripeForms/types';
+
+function InnerIntentForm({
+  onCancel,
+  budgetModeText,
+  buttonText,
+  location,
+  handleSubmit,
+}: InnerIntentFormProps) {
+  const elements = useElements();
+  const stripe = useStripe();
+  const [submitDisabled, setSubmitDisabled] = useState(true);
+
+  const handleFormChange = (formData: StripePaymentElementChangeEvent) => {
+    if (formData.complete) {
+      setSubmitDisabled(false);
+    } else {
+      setSubmitDisabled(true);
+    }
+  };
+
+  return (
+    <Form
+      onSubmit={() => handleSubmit({stripe, elements})}
+      submitDisabled={submitDisabled}
+      submitLabel={buttonText}
+      extraButton={
+        <Button aria-label={t('Cancel')} onClick={onCancel}>
+          {t('Cancel')}
+        </Button>
+      }
+      footerStyle={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginLeft: 0,
+      }}
+    >
+      <Flex direction="column" gap="xl">
+        <PaymentElement
+          onChange={handleFormChange}
+          options={{
+            terms: {card: 'never'}, // we display the terms ourselves
+            wallets: {applePay: 'never', googlePay: 'never'},
+          }}
+        />
+        <Flex direction="column" gap="sm">
+          <small>
+            {tct('Payments are processed securely through [stripe:Stripe].', {
+              stripe: <ExternalLink href="https://stripe.com/" />,
+            })}
+          </small>
+          {/* location is 0 on the checkout page which is why this isn't location && */}
+          {location !== null && location !== undefined && (
+            <Text size="xs" variant="muted">
+              {tct(
+                'By clicking [buttonText], you authorize Sentry to automatically charge you recurring subscription fees and applicable [budgetModeText] fees. Recurring charges occur at the start of your selected billing cycle for subscription fees and monthly for [budgetModeText] fees. You may cancel your subscription at any time [here:here].',
+                {
+                  buttonText: <b>{buttonText}</b>,
+                  budgetModeText,
+                  here: (
+                    <ExternalLink href="https://sentry.io/settings/billing/cancel/" />
+                  ),
+                }
+              )}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </Form>
+  );
+}
+
+export default InnerIntentForm;