web/satellite: optionally collect billing info during onboarding

VitaliiShpital · Storj Robot · commit 5d6335b97b96 · 2025-11-06T13:46:40.000Z
Added custom optional form to onboarding upgrade flow. Issue: #7629 Change-Id: Ie0fa61ba79d9d1b346e7c91e0e88195cfc30857a
diff --git a/web/satellite/src/api/payments.ts b/web/satellite/src/api/payments.ts
@@ -22,7 +22,7 @@ import {
     AddFundsResponse,
     ProductCharges,
     ChargeCardIntent,
-    PurchaseIntent,
+    PurchaseRequest,
 } from '@/types/payments';
 import { HttpClient } from '@/utils/httpClient';
 import { Time } from '@/utils/time';
@@ -803,14 +803,13 @@ export class PaymentsHttpApi implements PaymentsApi {
      * Purchases makes a purchase using a credit card action.
      * Used for pricing packages and upgrade account.
      *
-     * @param pmID - the Stripe payment method id or token of the credit card
-     * @param intent - the intent of the purchase, either to purchase a package plan or upgrade account
+     * @param request - purchase request
      * @param csrfProtectionToken - CSRF token
      * @throws Error
      */
-    public async purchase(pmID: string, intent: PurchaseIntent, csrfProtectionToken: string): Promise<void> {
+    public async purchase(request: PurchaseRequest, csrfProtectionToken: string): Promise<void> {
         const path = `${this.ROOT_PATH}/purchase`;
-        const response = await this.client.post(path, JSON.stringify({ token: pmID, intent }), { csrfProtectionToken });
+        const response = await this.client.post(path, JSON.stringify(request), { csrfProtectionToken });
 
         if (response.ok) {
             return;
diff --git a/web/satellite/src/components/StripeBillingInfo.vue b/web/satellite/src/components/StripeBillingInfo.vue
@@ -0,0 +1,219 @@
+// Copyright (C) 2025 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-expansion-panels class="mt-4">
+        <v-expansion-panel eager static @group:selected="({value}) => onPanelToggle(value)">
+            <v-expansion-panel-title>Billing info (optional)</v-expansion-panel-title>
+            <v-expansion-panel-text>
+                <v-progress-linear rounded indeterminate :active="isLoading" />
+                <v-row>
+                    <v-col>
+                        <div id="billing-address-element">
+                            <!-- A Stripe Address Element will be inserted here. -->
+                        </div>
+                    </v-col>
+                    <v-col>
+                        <template v-if="addressElementReady">
+                            <v-select
+                                v-model="selectedTax"
+                                label="Tax ID type"
+                                placeholder="Choose tax ID type"
+                                :disabled="!countryCode"
+                                :items="taxes"
+                                :item-title="(item: Tax) => item.name"
+                                :item-value="(item: Tax) => item"
+                                hide-details
+                                class="mb-3"
+                            />
+
+                            <v-text-field
+                                v-model="taxID"
+                                :disabled="!selectedTax"
+                                variant="outlined"
+                                label="Tax ID"
+                                placeholder="Enter your Tax ID"
+                                :hint="'e.g.: ' + selectedTax?.example"
+                                :hide-details="false"
+                                :maxlength="50"
+                                class="custom"
+                            />
+                        </template>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { loadStripe } from '@stripe/stripe-js/pure';
+import {
+    Stripe,
+    StripeAddressElement,
+    StripeElements,
+    StripeElementsOptionsMode,
+    StripeAddressElementChangeEvent,
+} from '@stripe/stripe-js';
+import { useTheme } from 'vuetify';
+import {
+    VRow,
+    VCol,
+    VProgressLinear,
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelTitle,
+    VExpansionPanelText,
+    VSelect,
+    VTextField,
+} from 'vuetify/components';
+
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify } from '@/composables/useNotify';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useLoading } from '@/composables/useLoading';
+import { PurchaseBillingInfo, Tax } from '@/types/payments';
+import { useBillingStore } from '@/store/modules/billingStore';
+
+const configStore = useConfigStore();
+const billingStore = useBillingStore();
+
+const notify = useNotify();
+const theme = useTheme();
+const { isLoading, withLoading } = useLoading();
+
+const addressElement = ref<StripeAddressElement>();
+const stripe = ref<Stripe | null>(null);
+const elements = ref<StripeElements | null>(null);
+const addressElementReady = ref(false);
+
+const countryCode = ref<string>();
+const selectedTax = ref<Tax>();
+const taxID = ref<string>();
+
+const taxes = computed<Tax[]>(() => billingStore.state.taxes);
+
+function initStripe(): void {
+    withLoading(async () => {
+        const stripePublicKey = configStore.state.config.stripePublicKey;
+
+        try {
+            stripe.value = await loadStripe(stripePublicKey);
+        } catch (error) {
+            notify.error(error.message, AnalyticsErrorEventSource.BILLING_STRIPE_INFO_FORM);
+            return;
+        }
+
+        if (!stripe.value) {
+            notify.error('Unable to initialize stripe', AnalyticsErrorEventSource.BILLING_STRIPE_INFO_FORM);
+            return;
+        }
+
+        const options: StripeElementsOptionsMode = {
+            appearance: {
+                theme: theme.global.current.value.dark ? 'night' : 'stripe',
+                labels: 'floating',
+            },
+        };
+        elements.value = stripe.value.elements(options);
+        if (!elements.value) {
+            notify.error('Unable to instantiate elements', AnalyticsErrorEventSource.BILLING_STRIPE_INFO_FORM);
+        }
+    });
+}
+
+function onPanelToggle(val: boolean): void {
+    if (!val) {
+        addressElement.value?.destroy();
+        addressElementReady.value = false;
+        taxID.value = undefined;
+        return;
+    }
+
+    if (!elements.value) {
+        notify.error('Unable to instantiate elements', AnalyticsErrorEventSource.BILLING_STRIPE_INFO_FORM);
+        return;
+    }
+
+    addressElement.value = elements.value.create('address', { mode: 'billing' });
+    addressElement.value.on('ready', () => {
+        addressElementReady.value = true;
+    });
+    addressElement.value.on('change', (event: StripeAddressElementChangeEvent) => {
+        if (countryCode.value !== event.value.address?.country) countryCode.value = event.value.address?.country;
+    });
+    addressElement.value.mount('#billing-address-element');
+}
+
+/**
+ * To be called by parent element to
+ * validate and get filled form data.
+ */
+async function onSubmit(): Promise<PurchaseBillingInfo> {
+    if (!(stripe.value && elements.value)) {
+        throw new Error('Stripe is not initialized');
+    }
+
+    if (!addressElement.value) {
+        return {
+            address: undefined,
+            tax: undefined,
+        };
+    }
+
+    const { complete, value } = await addressElement.value.getValue();
+
+    return {
+        address: complete ? {
+            name: value.name,
+            city: value.address.city,
+            country: value.address.country,
+            line1: value.address.line1,
+            line2: value.address.line2,
+            postalCode: value.address.postal_code,
+            state: value.address.state,
+        } : undefined,
+        tax: selectedTax.value && taxID.value ? {
+            type: selectedTax.value.code,
+            value: taxID.value,
+        } : undefined,
+    };
+}
+
+watch(countryCode, (code) => {
+    withLoading(async () => {
+        if (!code) {
+            return;
+        }
+        selectedTax.value = undefined;
+        try {
+            await billingStore.getCountryTaxes(code ?? '');
+            if (taxes.value.length === 1) {
+                selectedTax.value = taxes.value[0];
+            }
+        } catch (e) {
+            notify.notifyError(e);
+        }
+    });
+});
+
+onMounted(() => {
+    initStripe();
+});
+
+onBeforeUnmount(() => {
+    addressElement.value?.off('change');
+    addressElement.value?.off('ready');
+});
+
+defineExpose({
+    onSubmit,
+});
+</script>
+
+<style scoped lang="scss">
+:deep(.v-field__input) {
+    min-height: 64px;
+}
+</style>
diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanStep.vue
@@ -25,6 +25,10 @@
                 ref="stripeCardInput"
                 @ready="stripeReady = true"
             />
+            <StripeBillingInfo
+                v-if="collectBillingInfo"
+                ref="stripeInfoForm"
+            />
         </div>
 
         <template v-if="isAccountSetup">
@@ -139,13 +143,18 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { ROUTES } from '@/router';
 import { useProjectsStore } from '@/store/modules/projectsStore';
+import { PurchaseBillingInfo, PurchaseIntent, PurchaseRequest } from '@/types/payments';
 
 import StripeCardElement from '@/components/StripeCardElement.vue';
+import StripeBillingInfo from '@/components/StripeBillingInfo.vue';
 
 interface StripeForm {
     onSubmit(): Promise<string>;
     initStripe(): Promise<string>;
 }
+interface StripeBillingInfoForm {
+    onSubmit(): Promise<PurchaseBillingInfo>;
+}
 
 const analyticsStore = useAnalyticsStore();
 const billingStore = useBillingStore();
@@ -159,6 +168,7 @@ const route = useRoute();
 const isSuccess = ref<boolean>(false);
 
 const stripeCardInput = ref<StripeForm | null>(null);
+const stripeInfoForm = ref<StripeBillingInfoForm | null>(null);
 const stripeReady = ref<boolean>(false);
 
 const props = withDefaults(defineProps<{
@@ -184,6 +194,8 @@ const isFree = computed<boolean>(() => props.plan?.type === PricingPlanType.FREE
 
 const upgradePayUpfrontAmount = computed(() => configStore.state.config.upgradePayUpfrontAmount);
 
+const collectBillingInfo = computed(() => configStore.state.config.collectBillingInfoOnOnboarding && props.isAccountSetup);
+
 function onBack(): void {
     stripeReady.value = false;
     emit('back');
@@ -201,36 +213,61 @@ async function onActivateClick() {
     }
 
     if (!stripeCardInput.value) return;
+    if (collectBillingInfo.value && !stripeInfoForm.value) return;
+
+    const errorSource = props.isAccountSetup ? AnalyticsErrorEventSource.ACCOUNT_SETUP_DIALOG : AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL;
+
+    let info: PurchaseBillingInfo | undefined;
+    let token = '';
 
     loading.value = true;
+
+    try {
+        if (collectBillingInfo.value && stripeInfoForm.value) {
+            info = await stripeInfoForm.value.onSubmit();
+        }
+
+        token = await stripeCardInput.value.onSubmit();
+    } catch (error) {
+        notify.notifyError(error, errorSource);
+        loading.value = false;
+        return;
+    }
+
     try {
-        const response = await stripeCardInput.value.onSubmit();
-        await onCardAdded(response);
+        const request: PurchaseRequest = {
+            token,
+            intent: PurchaseIntent.PackagePlan,
+            address: info?.address,
+            tax: info?.tax,
+        };
+
+        await onCardAdded(request);
     } catch (error) {
-        const source = props.isAccountSetup ? AnalyticsErrorEventSource.ACCOUNT_SETUP_DIALOG : AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL;
-        notify.notifyError(error, source);
+        notify.notifyError(error, errorSource);
 
         // initStripe will get a new card setup secret if there's an error.
         stripeCardInput.value?.initStripe();
     }
+
     loading.value = false;
 }
 
 /**
  * Adds card after Stripe confirmation.
- * @param res - the response from stripe. Could be a token or a payment method id.
- * depending on the paymentElementEnabled flag.
+ * @param request - Purchase request info.
  */
-async function onCardAdded(res: string): Promise<void> {
+async function onCardAdded(request: PurchaseRequest): Promise<void> {
     if (!props.plan) return;
 
     if (props.plan.type === PricingPlanType.PARTNER) {
-        await billingStore.purchasePricingPackage(res);
+        await billingStore.purchasePricingPackage(request);
     } else {
         if (upgradePayUpfrontAmount.value > 0) {
-            await billingStore.purchaseUpgradedAccount(res);
+            request.intent = PurchaseIntent.UpgradeAccount;
+            await billingStore.purchaseUpgradedAccount(request);
         } else {
-            await billingStore.addCardByPaymentMethodID(res);
+            await billingStore.addCardByPaymentMethodID(request.token);
         }
     }
     onSuccess();
diff --git a/web/satellite/src/store/modules/billingStore.ts b/web/satellite/src/store/modules/billingStore.ts
@@ -21,7 +21,7 @@ import {
     PaymentWithConfirmations,
     PriceModelForPlacementRequest,
     ProductCharges,
-    PurchaseIntent,
+    PurchaseRequest,
     Tax,
     TaxCountry,
     UpdateCardParams,
@@ -328,12 +328,12 @@ export const useBillingStore = defineStore('billing', () => {
         return await api.pricingPackageAvailable();
     }
 
-    async function purchasePricingPackage(dataStr: string): Promise<void> {
-        await api.purchase(dataStr, PurchaseIntent.PackagePlan, csrfToken.value);
+    async function purchasePricingPackage(request: PurchaseRequest): Promise<void> {
+        await api.purchase(request, csrfToken.value);
     }
 
-    async function purchaseUpgradedAccount(dataStr: string): Promise<void> {
-        await api.purchase(dataStr, PurchaseIntent.UpgradeAccount, csrfToken.value);
+    async function purchaseUpgradedAccount(request: PurchaseRequest): Promise<void> {
+        await api.purchase(request, csrfToken.value);
     }
 
     function setPricingPlansAvailable(available: boolean, info: PricingPlanInfo | null = null): void {
diff --git a/web/satellite/src/types/payments.ts b/web/satellite/src/types/payments.ts
diff --git a/web/satellite/src/utils/constants/analyticsEventNames.ts b/web/satellite/src/utils/constants/analyticsEventNames.ts
