fix(billing): redirect to Stripe payment method setup when subscribing without payment method (#16827)

## Summary

When users click 'Subscribe Now' during a trial period without a payment
method configured, they previously saw an unhelpful error message: "No
payment method found. Please update your billing details."

This PR improves the UX by redirecting users directly to Stripe's
billing portal payment method update flow, where they can add their
payment information. After adding a payment method, users are redirected
back to the billing settings page and can click 'Subscribe Now' again to
successfully activate their subscription.

## Changes

### Backend
- **stripe-billing-portal.service.ts**: Added
`createBillingPortalSessionForPaymentMethodUpdate` method that creates a
Stripe billing portal session with `flow_data.type:
'payment_method_update'`
- **billing-portal.workspace-service.ts**: Added
`computeBillingPortalSessionURLForPaymentMethodUpdate` method to build
the portal URL
- **billing-end-trial-period.output.ts**: Added optional
`billingPortalUrl` field to the GraphQL output DTO
- **billing-subscription.service.ts**: Modified `endTrialPeriod` to
return `stripeCustomerId` when no payment method exists
- **billing.resolver.ts**: Updated resolver to orchestrate billing
portal URL generation when no payment method

### Frontend
- **useEndSubscriptionTrialPeriod.ts**: Redirect to billing portal URL
instead of showing error snackbar
- **endSubscriptionTrialPeriod.ts**: Added `billingPortalUrl` to
mutation response fields

## User Flow

1. User clicks "Subscribe Now" during trial
2. Backend checks for payment method
3. If no payment method → redirect to Stripe billing portal payment
method update page
4. User adds payment method in Stripe
5. User is redirected back to `/settings/billing`
6. User clicks "Subscribe Now" again to activate subscription
This commit is contained in:
Félix Malfait
2025-12-29 05:39:53 +01:00
committed by GitHub
parent 6bd14dc847
commit 1b6a0cd05a
9 changed files with 116 additions and 7 deletions
@@ -5,6 +5,7 @@ export const END_SUBSCRIPTION_TRIAL_PERIOD = gql`
endSubscriptionTrialPeriod {
status
hasPaymentMethod
billingPortalUrl
}
}
`;
@@ -1,4 +1,5 @@
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useRedirect } from '@/domain-manager/hooks/useRedirect';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { t } from '@lingui/core/macro';
import { useState } from 'react';
@@ -13,6 +14,7 @@ export const useEndSubscriptionTrialPeriod = () => {
currentWorkspaceState,
);
const [isLoading, setIsLoading] = useState(false);
const { redirect } = useRedirect();
const endTrialPeriod = async () => {
try {
@@ -24,6 +26,14 @@ export const useEndSubscriptionTrialPeriod = () => {
const hasPaymentMethod = endTrialPeriodOutput?.hasPaymentMethod;
if (isDefined(hasPaymentMethod) && hasPaymentMethod === false) {
const billingPortalUrl = endTrialPeriodOutput?.billingPortalUrl;
if (isDefined(billingPortalUrl)) {
redirect(billingPortalUrl);
return { success: false };
}
enqueueErrorSnackBar({
message: t`No payment method found. Please update your billing details.`,
});