From bfeffa352dddee7f5222346edf16a36f319292b1 Mon Sep 17 00:00:00 2001
From: elizabeth-ilina <eilina@mozilla.com>
Date: Thu, 26 Mar 2026 12:53:59 -0400
Subject: [PATCH] feat(payments-next): Add Free Trial section to Subscription
 Management page Because:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* We need to add a Free Trials section to the Sub Manage page so that a customer can see what free trials they have.

This commit:

* Adds a new Free Trial section and component, to be rendered on the Subscription Management page, akin to “Payment details” and “Active subscriptions”, that is only rendered if a user has an active trialing subscription.
* If the free trial is active, includes details about their upcoming billing cycle, and the option to cancel their free trial
* If the free trial could not be converted due to a failed payment method, includes invoice details, and the option to update their payment info
* Implements UI for both Desktop and Mobile views

Closes #[PAY-3547](https://mozilla-hub.atlassian.net/browse/PAY-3547)
---
 .../app/[locale]/subscriptions/manage/en.ftl  |   4 +
 .../[locale]/subscriptions/manage/page.tsx    | 113 +++-
 .../factories/subscriptionContent.factory.ts  |  24 +
 .../subscriptionManagement.service.spec.ts    | 493 ++++++++++++++++++
 .../src/lib/subscriptionManagement.service.ts | 167 +++++-
 libs/payments/management/src/lib/types.ts     |  20 +
 libs/payments/ui/src/index.ts                 |   1 +
 .../client/components/FreeTrialContent/en.ftl |  46 ++
 .../components/FreeTrialContent/index.tsx     | 465 +++++++++++++++++
 .../GetSubManPageContentActionResult.ts       |  66 +++
 libs/shared/assets/src/images/infoBlack.svg   |   3 +
 11 files changed, 1387 insertions(+), 15 deletions(-)
 create mode 100644 libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl
 create mode 100644 libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx
 create mode 100644 libs/shared/assets/src/images/infoBlack.svg

diff --git a/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl b/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
index 1d61eb9ef90..b80ce35e9c2 100644
--- a/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
+++ b/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
@@ -3,8 +3,12 @@
 subscription-management-page-banner-warning-title-no-payment-method = No payment method added
 subscription-management-page-banner-warning-link-no-payment-method = Add a payment method
 subscription-management-subscriptions-heading = Subscriptions
+subscription-management-free-trial-heading = Free trials
+subscription-management-your-free-trials-aria = Your free trials
+
 # Heading for mobile only quick links menu
 subscription-management-jump-to-heading = Jump to
+subscription-management-nav-free-trials = Free trials
 subscription-management-nav-payment-details = Payment details
 subscription-management-nav-active-subscriptions = Active subscriptions
 subscription-management-payment-details-heading = Payment details
diff --git a/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx b/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
index a8a787d66a1..1fabda07df4 100644
--- a/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
+++ b/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
@@ -15,6 +15,7 @@ import {
   Banner,
   BannerVariant,
   formatPlanInterval,
+  FreeTrialContent,
   getCardIcon,
   GleanPageView,
   ManageParams,
@@ -76,6 +77,7 @@ export default async function Manage({
     subscriptions,
     appleIapSubscriptions,
     googleIapSubscriptions,
+    trialSubscriptions,
   } = await getSubManPageContentAction(
     session.user?.id,
     { ...resolvedParams },
@@ -192,7 +194,8 @@ export default async function Manage({
 
       {(subscriptions.length > 0 ||
         appleIapSubscriptions.length > 0 ||
-        googleIapSubscriptions.length > 0) && (
+        googleIapSubscriptions.length > 0 ||
+        trialSubscriptions.length > 0) && (
         <nav
           className="px-4 tablet:hidden"
           aria-labelledby="mobile-quick-links-menu"
@@ -204,6 +207,26 @@ export default async function Manage({
             )}
           </h2>
           <ul className="flex flex-col gap-6">
+            {trialSubscriptions.length > 0 && (
+              <li>
+                <Link
+                  className="flex items-center justify-between text-blue-500 hover:text-blue-600 cursor-pointer underline"
+                  href="#free-trial"
+                >
+                  {l10n.getString(
+                    'subscription-management-nav-free-trials',
+                    'Free trials'
+                  )}
+                  <Image
+                    src={arrowDownIcon}
+                    alt=""
+                    width={12}
+                    height={12}
+                    aria-hidden="true"
+                  />
+                </Link>
+              </li>
+            )}
             <li>
               <Link
                 className="flex items-center justify-between text-blue-500 hover:text-blue-600 cursor-pointer underline"
@@ -248,6 +271,94 @@ export default async function Manage({
         </nav>
       )}
 
+      {trialSubscriptions.length > 0 && (
+        <section
+          id="free-trial"
+          className="scroll-mt-16"
+          aria-labelledby="free-trial-heading"
+        >
+          <h2
+            id="free-trial-heading"
+            className="font-bold px-4 pt-8 pb-4 text-lg tablet:px-6"
+          >
+            {l10n.getString(
+              'subscription-management-free-trial-heading',
+              'Free trials'
+            )}
+          </h2>
+          <ul
+            aria-label={l10n.getString(
+              'subscription-management-your-free-trials-aria',
+              'Your free trials'
+            )}
+          >
+            {trialSubscriptions.map((trial, index: number) => (
+              <li
+                key={`${trial.productName}-${index}`}
+                aria-labelledby={`${trial.productName}-trial-information`}
+                className="leading-6 pb-4 last:pb-0"
+              >
+                <div className="w-full py-6 text-grey-600 bg-white rounded-xl border border-grey-200 opacity-100 shadow-[0_0_16px_0_rgba(0,0,0,0.08)] tablet:px-6 tablet:py-8">
+                  <div className="flex flex-col px-4 tablet:px-0 tablet:flex-row tablet:items-start">
+                    <div className="tablet:min-w-[160px]">
+                      <Image
+                        src={trial.webIcon}
+                        alt={trial.productName}
+                        height={64}
+                        width={64}
+                      />
+                    </div>
+                    <div className="flex flex-col gap-4 w-full">
+                      <div className="flex items-start justify-between mt-4 tablet:mt-0">
+                        <div>
+                          <h3
+                            id={`${trial.productName}-trial-information`}
+                            className="font-bold text-lg"
+                          >
+                            {trial.productName}
+                          </h3>
+                          <p className="text-grey-500">
+                            {trial.interval &&
+                              formatPlanInterval(trial.interval)}
+                          </p>
+                        </div>
+                        <LinkExternal
+                          href={trial.supportUrl}
+                          className="text-blue-500 hover:text-blue-600 cursor-pointer overflow-hidden text-ellipsis underline whitespace-nowrap"
+                          aria-label={l10n.getString(
+                            'subscription-management-button-support-aria',
+                            { productName: trial.productName },
+                            `Get help for ${trial.productName}`
+                          )}
+                          data-testid={`link-external-support-${trial.productName}`}
+                        >
+                          <span>
+                            {l10n.getString(
+                              'subscription-management-button-support',
+                              'Get help'
+                            )}
+                          </span>
+                        </LinkExternal>
+                      </div>
+                      <FreeTrialContent
+                        trial={trial}
+                        locale={locale}
+                        userId={userId}
+                        updatePaymentUrl={
+                          type === SubPlatPaymentMethodType.PayPal
+                            ? `${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`
+                            : `${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
       <section
         id="payment-details"
         className="scroll-mt-16"
diff --git a/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts b/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
index 56c5e638844..127062482c8 100644
--- a/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
+++ b/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
@@ -12,6 +12,7 @@ import {
   GoogleIapPurchaseResult,
   GoogleIapSubscriptionContent,
   SubscriptionContent,
+  TrialSubscriptionContent,
 } from '../types';
 
 export const AppleIapPurchaseFactory = (
@@ -95,3 +96,26 @@ export const SubscriptionContentFactory = (
   churnStaySubscribedCtaMessage: faker.string.sample(),
   ...override,
 });
+
+export const TrialSubscriptionContentFactory = (
+  override?: Partial<TrialSubscriptionContent>
+): TrialSubscriptionContent => ({
+  id: `sub_${faker.string.alphanumeric({ length: 24 })}`,
+  productName: faker.string.sample(),
+  offeringApiIdentifier: faker.string.sample(),
+  supportUrl: faker.internet.url(),
+  webIcon: faker.internet.url(),
+  currency: faker.finance.currencyCode().toLowerCase(),
+  interval: faker.helpers.enumValue(SubplatInterval),
+  cancelAtPeriodEnd: false,
+  trialEnd: Math.floor(faker.date.future().getTime() / 1000),
+  trialStart: Math.floor(faker.date.past().getTime() / 1000),
+  nextInvoiceTotal: faker.number.int({ min: 1, max: 1000 }),
+  nextInvoiceTax: faker.number.int({ min: 1, max: 1000 }),
+  conversionStatus: 'active',
+  failedInvoiceDate: undefined,
+  failedInvoiceTotal: undefined,
+  failedInvoiceTax: undefined,
+  failedInvoiceUrl: undefined,
+  ...override,
+});
diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
index 59872623f44..95aa58483ef 100644
--- a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
+++ b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
@@ -48,6 +48,7 @@ import {
   GoogleIapPurchaseResultFactory,
   SubscriptionContentFactory,
   SubscriptionManagementService,
+  TrialSubscriptionContentFactory,
 } from '@fxa/payments/management';
 import {
   BillingAgreementFactory,
@@ -427,6 +428,7 @@ describe('SubscriptionManagementService', () => {
         defaultPaymentMethod: mockPaymentMethodInformation,
         isStripeCustomer: mockAccountCustomer.stripeCustomerId !== null,
         subscriptions: [mockSubscriptionContent],
+        trialSubscriptions: [],
         appleIapSubscriptions: [mockAppleIapSubscriptionContent],
         googleIapSubscriptions: [mockGoogleIapSubscriptionContent],
       });
@@ -467,6 +469,7 @@ describe('SubscriptionManagementService', () => {
         defaultPaymentMethod: undefined,
         isStripeCustomer: mockAccountCustomer.stripeCustomerId !== null,
         subscriptions: [],
+        trialSubscriptions: [],
         appleIapSubscriptions: [],
         googleIapSubscriptions: [],
       });
@@ -517,6 +520,7 @@ describe('SubscriptionManagementService', () => {
         defaultPaymentMethod: undefined,
         isStripeCustomer: mockAccountCustomer.stripeCustomerId !== null,
         subscriptions: [],
+        trialSubscriptions: [],
         appleIapSubscriptions: [],
         googleIapSubscriptions: [],
       });
@@ -609,6 +613,7 @@ describe('SubscriptionManagementService', () => {
         defaultPaymentMethod: undefined,
         isStripeCustomer: Boolean(mockAccountCustomer.stripeCustomerId),
         subscriptions: [],
+        trialSubscriptions: [],
         appleIapSubscriptions: [mockAppleIapSubscriptionContent],
         googleIapSubscriptions: [mockGoogleIapSubscriptionContent],
       });
@@ -966,6 +971,494 @@ describe('SubscriptionManagementService', () => {
         SubscriptionManagementCouldNotRetrieveIapContentFromCMSError
       );
     });
+
+    it('routes trialing subscription to trialSubscriptions', async () => {
+      const mockUid = faker.string.uuid();
+      const mockStripeCustomer = StripeResponseFactory(
+        StripeCustomerFactory({ currency: 'usd' })
+      );
+      const mockAccountCustomer = ResultAccountCustomerFactory({
+        stripeCustomerId: mockStripeCustomer.id,
+      });
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockTrialingSubscription = StripeSubscriptionFactory({
+        status: 'trialing',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+      });
+      const mockTrialContent = TrialSubscriptionContentFactory();
+      const mockEmptyIapResult = AppleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+      const mockEmptyGoogleIapResult = GoogleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+
+      jest
+        .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
+        .mockResolvedValue(mockAccountCustomer);
+      jest
+        .spyOn(customerManager, 'retrieve')
+        .mockResolvedValue(mockStripeCustomer);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue([mockTrialingSubscription]);
+      jest
+        .spyOn(paymentMethodManager, 'getDefaultPaymentMethod')
+        .mockResolvedValue(undefined);
+      jest
+        .spyOn(
+          subscriptionManagementService as any,
+          'getTrialSubscriptionContent'
+        )
+        .mockResolvedValue(mockTrialContent);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getAppleIapPurchases')
+        .mockResolvedValue(mockEmptyIapResult);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getGoogleIapPurchases')
+        .mockResolvedValue(mockEmptyGoogleIapResult);
+
+      const result =
+        await subscriptionManagementService.getPageContent(mockUid);
+
+      expect(result.subscriptions).toEqual([]);
+      expect(result.trialSubscriptions).toEqual([mockTrialContent]);
+    });
+
+    it('routes past_due subscription with trial_end to trialSubscriptions', async () => {
+      const mockUid = faker.string.uuid();
+      const mockStripeCustomer = StripeResponseFactory(
+        StripeCustomerFactory({ currency: 'usd' })
+      );
+      const mockAccountCustomer = ResultAccountCustomerFactory({
+        stripeCustomerId: mockStripeCustomer.id,
+      });
+      const trialEnd = Math.floor(Date.now() / 1000) - 3600;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockPastDueTrialSubscription = StripeSubscriptionFactory({
+        status: 'past_due',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+        current_period_start: trialEnd,
+      });
+      const mockTrialContent = TrialSubscriptionContentFactory({
+        conversionStatus: 'past_due',
+      });
+      const mockEmptyIapResult = AppleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+      const mockEmptyGoogleIapResult = GoogleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+
+      jest
+        .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
+        .mockResolvedValue(mockAccountCustomer);
+      jest
+        .spyOn(customerManager, 'retrieve')
+        .mockResolvedValue(mockStripeCustomer);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue([mockPastDueTrialSubscription]);
+      jest
+        .spyOn(paymentMethodManager, 'getDefaultPaymentMethod')
+        .mockResolvedValue(undefined);
+      jest
+        .spyOn(
+          subscriptionManagementService as any,
+          'getTrialSubscriptionContent'
+        )
+        .mockResolvedValue(mockTrialContent);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getAppleIapPurchases')
+        .mockResolvedValue(mockEmptyIapResult);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getGoogleIapPurchases')
+        .mockResolvedValue(mockEmptyGoogleIapResult);
+
+      const result =
+        await subscriptionManagementService.getPageContent(mockUid);
+
+      expect(result.subscriptions).toEqual([]);
+      expect(result.trialSubscriptions).toEqual([mockTrialContent]);
+    });
+
+    it('routes past_due subscription without trial_end to regular subscriptions', async () => {
+      const mockUid = faker.string.uuid();
+      const mockStripeCustomer = StripeResponseFactory(
+        StripeCustomerFactory({ currency: 'usd' })
+      );
+      const mockAccountCustomer = ResultAccountCustomerFactory({
+        stripeCustomerId: mockStripeCustomer.id,
+      });
+      const mockPastDueSubscription = StripeSubscriptionFactory({
+        status: 'past_due',
+        trial_end: null,
+        trial_start: null,
+      });
+      const mockSubscriptionContent = SubscriptionContentFactory();
+      const mockEmptyIapResult = AppleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+      const mockEmptyGoogleIapResult = GoogleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+
+      jest
+        .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
+        .mockResolvedValue(mockAccountCustomer);
+      jest
+        .spyOn(customerManager, 'retrieve')
+        .mockResolvedValue(mockStripeCustomer);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue([mockPastDueSubscription]);
+      jest
+        .spyOn(paymentMethodManager, 'getDefaultPaymentMethod')
+        .mockResolvedValue(undefined);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getSubscriptionContent')
+        .mockResolvedValue(mockSubscriptionContent);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getAppleIapPurchases')
+        .mockResolvedValue(mockEmptyIapResult);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getGoogleIapPurchases')
+        .mockResolvedValue(mockEmptyGoogleIapResult);
+
+      const result =
+        await subscriptionManagementService.getPageContent(mockUid);
+
+      expect(result.subscriptions).toEqual([mockSubscriptionContent]);
+      expect(result.trialSubscriptions).toEqual([]);
+    });
+
+    it('routes active subscription to regular subscriptions', async () => {
+      const mockUid = faker.string.uuid();
+      const mockStripeCustomer = StripeResponseFactory(
+        StripeCustomerFactory({ currency: 'usd' })
+      );
+      const mockAccountCustomer = ResultAccountCustomerFactory({
+        stripeCustomerId: mockStripeCustomer.id,
+      });
+      const mockActiveSubscription = StripeSubscriptionFactory({
+        status: 'active',
+      });
+      const mockSubscriptionContent = SubscriptionContentFactory();
+      const mockEmptyIapResult = AppleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+      const mockEmptyGoogleIapResult = GoogleIapPurchaseResultFactory({
+        storeIds: [],
+        purchaseDetails: [],
+      });
+
+      jest
+        .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
+        .mockResolvedValue(mockAccountCustomer);
+      jest
+        .spyOn(customerManager, 'retrieve')
+        .mockResolvedValue(mockStripeCustomer);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue([mockActiveSubscription]);
+      jest
+        .spyOn(paymentMethodManager, 'getDefaultPaymentMethod')
+        .mockResolvedValue(undefined);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getSubscriptionContent')
+        .mockResolvedValue(mockSubscriptionContent);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getAppleIapPurchases')
+        .mockResolvedValue(mockEmptyIapResult);
+      jest
+        .spyOn(subscriptionManagementService as any, 'getGoogleIapPurchases')
+        .mockResolvedValue(mockEmptyGoogleIapResult);
+
+      const result =
+        await subscriptionManagementService.getPageContent(mockUid);
+
+      expect(result.subscriptions).toEqual([mockSubscriptionContent]);
+      expect(result.trialSubscriptions).toEqual([]);
+    });
+  });
+
+  describe('getTrialSubscriptionContent', () => {
+    const mockProductName = faker.string.sample();
+    const mockWebIcon = faker.internet.url();
+    const mockSupportUrl = faker.internet.url();
+    const mockApiIdentifier = faker.string.sample();
+
+    it('returns null when trial_end and trial_start are both null', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const mockSubscription = StripeSubscriptionFactory({
+        trial_end: null,
+        trial_start: null,
+      });
+      const mockPrice = StripePriceFactory();
+
+      const result = await (
+        subscriptionManagementService as any
+      ).getTrialSubscriptionContent(
+        mockSubscription,
+        mockCustomer,
+        mockPrice,
+        mockProductName,
+        mockWebIcon,
+        mockSupportUrl,
+        mockApiIdentifier
+      );
+
+      expect(result).toBeNull();
+    });
+
+    it('throws when price is missing interval information', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockSubscription = StripeSubscriptionFactory({
+        trial_end: trialEnd,
+        trial_start: trialStart,
+      });
+      const mockPrice = StripePriceFactory({ recurring: null });
+
+      await expect(
+        (
+          subscriptionManagementService as any
+        ).getTrialSubscriptionContent(
+          mockSubscription,
+          mockCustomer,
+          mockPrice,
+          mockProductName,
+          mockWebIcon,
+          mockSupportUrl,
+          mockApiIdentifier
+        )
+      ).rejects.toThrow(SubscriptionContentMissingIntervalInformationError);
+    });
+
+    it('throws when upcoming invoice is missing', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockSubscription = StripeSubscriptionFactory({
+        status: 'trialing',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+      });
+      const mockPrice = StripePriceFactory();
+
+      jest
+        .spyOn(invoiceManager, 'previewUpcomingSubscription')
+        .mockResolvedValue(undefined as unknown as InvoicePreview);
+
+      await expect(
+        (
+          subscriptionManagementService as any
+        ).getTrialSubscriptionContent(
+          mockSubscription,
+          mockCustomer,
+          mockPrice,
+          mockProductName,
+          mockWebIcon,
+          mockSupportUrl,
+          mockApiIdentifier
+        )
+      ).rejects.toThrow(SubscriptionContentMissingUpcomingInvoicePreviewError);
+    });
+
+    it('returns trial content with active conversion status for trialing subscription', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockSubscription = StripeSubscriptionFactory({
+        status: 'trialing',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+        cancel_at_period_end: false,
+        currency: 'usd',
+      });
+      const mockPrice = StripePriceFactory();
+      const mockUpcomingInvoice = InvoicePreviewFactory({
+        subsequentAmount: 999,
+        subsequentAmountExcludingTax: 900,
+        subsequentTax: [{ amount: 99, inclusive: false, title: 'Tax' }],
+      });
+
+      jest
+        .spyOn(invoiceManager, 'previewUpcomingSubscription')
+        .mockResolvedValue(mockUpcomingInvoice);
+
+      const result = await (
+        subscriptionManagementService as any
+      ).getTrialSubscriptionContent(
+        mockSubscription,
+        mockCustomer,
+        mockPrice,
+        mockProductName,
+        mockWebIcon,
+        mockSupportUrl,
+        mockApiIdentifier
+      );
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          id: mockSubscription.id,
+          productName: mockProductName,
+          offeringApiIdentifier: mockApiIdentifier,
+          supportUrl: mockSupportUrl,
+          webIcon: mockWebIcon,
+          currency: mockSubscription.currency,
+          cancelAtPeriodEnd: false,
+          trialEnd,
+          trialStart,
+          conversionStatus: 'active',
+          nextInvoiceTax: 99,
+          nextInvoiceTotal: 900,
+          failedInvoiceDate: undefined,
+          failedInvoiceTotal: undefined,
+          failedInvoiceTax: undefined,
+          failedInvoiceUrl: undefined,
+        })
+      );
+    });
+
+    it('returns trial content with past_due conversion status and failed invoice details', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) - 3600;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const latestInvoiceId = `in_${faker.string.alphanumeric({ length: 24 })}`;
+      const mockSubscription = StripeSubscriptionFactory({
+        status: 'past_due',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+        current_period_start: trialEnd,
+        latest_invoice: latestInvoiceId,
+        currency: 'usd',
+      });
+      const mockPrice = StripePriceFactory();
+      const mockUpcomingInvoice = InvoicePreviewFactory({
+        subsequentAmount: 999,
+        subsequentAmountExcludingTax: 900,
+        subsequentTax: [{ amount: 99, inclusive: false, title: 'Tax' }],
+      });
+      const mockLatestInvoice = InvoicePreviewFactory({
+        invoiceDate: trialEnd,
+        invoiceUrl: 'https://invoice.stripe.com/failed',
+        totalAmount: 999,
+        totalExcludingTax: 900,
+        taxAmounts: [{ amount: 99, inclusive: false, title: 'Tax' }],
+      });
+
+      jest
+        .spyOn(invoiceManager, 'previewUpcomingSubscription')
+        .mockResolvedValue(mockUpcomingInvoice);
+      jest
+        .spyOn(invoiceManager, 'preview')
+        .mockResolvedValue(mockLatestInvoice);
+
+      const result = await (
+        subscriptionManagementService as any
+      ).getTrialSubscriptionContent(
+        mockSubscription,
+        mockCustomer,
+        mockPrice,
+        mockProductName,
+        mockWebIcon,
+        mockSupportUrl,
+        mockApiIdentifier
+      );
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          conversionStatus: 'past_due',
+          failedInvoiceDate: trialEnd,
+          failedInvoiceTax: 99,
+          failedInvoiceTotal: 900,
+          failedInvoiceUrl: 'https://invoice.stripe.com/failed',
+        })
+      );
+      expect(invoiceManager.preview).toHaveBeenCalledWith(latestInvoiceId);
+    });
+
+    it('uses subsequentAmount when no exclusive tax', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockSubscription = StripeSubscriptionFactory({
+        status: 'trialing',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+      });
+      const mockPrice = StripePriceFactory();
+      const mockUpcomingInvoice = InvoicePreviewFactory({
+        subsequentAmount: 999,
+        subsequentTax: [],
+      });
+
+      jest
+        .spyOn(invoiceManager, 'previewUpcomingSubscription')
+        .mockResolvedValue(mockUpcomingInvoice);
+
+      const result = await (
+        subscriptionManagementService as any
+      ).getTrialSubscriptionContent(
+        mockSubscription,
+        mockCustomer,
+        mockPrice,
+        mockProductName,
+        mockWebIcon,
+        mockSupportUrl,
+        mockApiIdentifier
+      );
+
+      expect(result.nextInvoiceTax).toEqual(0);
+      expect(result.nextInvoiceTotal).toEqual(999);
+    });
+
+    it('does not fetch latest invoice for trialing status', async () => {
+      const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
+      const trialEnd = Math.floor(Date.now() / 1000) + 86400;
+      const trialStart = Math.floor(Date.now() / 1000) - 86400;
+      const mockSubscription = StripeSubscriptionFactory({
+        status: 'trialing',
+        trial_end: trialEnd,
+        trial_start: trialStart,
+      });
+      const mockPrice = StripePriceFactory();
+      const mockUpcomingInvoice = InvoicePreviewFactory({
+        subsequentAmount: 999,
+        subsequentTax: [],
+      });
+
+      jest
+        .spyOn(invoiceManager, 'previewUpcomingSubscription')
+        .mockResolvedValue(mockUpcomingInvoice);
+      const previewSpy = jest.spyOn(invoiceManager, 'preview');
+
+      await (
+        subscriptionManagementService as any
+      ).getTrialSubscriptionContent(
+        mockSubscription,
+        mockCustomer,
+        mockPrice,
+        mockProductName,
+        mockWebIcon,
+        mockSupportUrl,
+        mockApiIdentifier
+      );
+
+      expect(previewSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe('getStripePaymentManagementDetails', () => {
diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.ts b/libs/payments/management/src/lib/subscriptionManagement.service.ts
index d5ec3872cb0..d29c34f31e4 100644
--- a/libs/payments/management/src/lib/subscriptionManagement.service.ts
+++ b/libs/payments/management/src/lib/subscriptionManagement.service.ts
@@ -78,6 +78,7 @@ import {
   GoogleIapSubscriptionContent,
   StaySubscribedFlowResult,
   SubscriptionContent,
+  TrialSubscriptionContent,
 } from './types';
 import {
   PaypalBillingAgreementManager,
@@ -172,6 +173,7 @@ export class SubscriptionManagementService {
     const subscriptions: SubscriptionContent[] = [];
     const appleIapSubscriptions: AppleIapSubscriptionContent[] = [];
     const googleIapSubscriptions: GoogleIapSubscriptionContent[] = [];
+    const trialSubscriptions: TrialSubscriptionContent[] = [];
     let defaultPaymentMethod: DefaultPaymentMethod | undefined;
     let accountCreditBalance: AccountCreditBalance = {
       balance: 0,
@@ -232,6 +234,7 @@ export class SubscriptionManagementService {
         defaultPaymentMethod,
         isStripeCustomer: stripeCustomer ? true : false,
         subscriptions: [],
+        trialSubscriptions: [],
         appleIapSubscriptions: [],
         googleIapSubscriptions: [],
       };
@@ -265,21 +268,44 @@ export class SubscriptionManagementService {
         const apiIdentifier = cmsPurchase.offering.apiIdentifier;
         const webIcon = cmsPurchase.purchaseDetails.webIcon;
         const supportUrl = cmsPurchase.offering.commonContent.supportUrl;
-        const content = await this.getSubscriptionContent(
-          sub,
-          stripeCustomer,
-          price,
-          productName,
-          webIcon,
-          supportUrl,
-          apiIdentifier,
-          uid,
-          acceptLanguage,
-          selectedLanguage
-        );
 
-        if (content) {
-          subscriptions.push(content);
+        const isFailedTrialConversion =
+          sub.status === 'past_due' &&
+          sub.trial_end !== null &&
+          sub.current_period_start === sub.trial_end;
+
+        const isTrial = sub.status === 'trialing' || isFailedTrialConversion;
+        if (isTrial) {
+          const trialContent = await this.getTrialSubscriptionContent(
+            sub,
+            stripeCustomer,
+            price,
+            productName,
+            webIcon,
+            supportUrl,
+            apiIdentifier
+          );
+
+          if (trialContent) {
+            trialSubscriptions.push(trialContent);
+          }
+        } else {
+          const content = await this.getSubscriptionContent(
+            sub,
+            stripeCustomer,
+            price,
+            productName,
+            webIcon,
+            supportUrl,
+            apiIdentifier,
+            uid,
+            acceptLanguage,
+            selectedLanguage
+          );
+
+          if (content) {
+            subscriptions.push(content);
+          }
         }
       }
     }
@@ -346,6 +372,7 @@ export class SubscriptionManagementService {
       defaultPaymentMethod,
       isStripeCustomer: stripeCustomer ? true : false,
       subscriptions,
+      trialSubscriptions,
       appleIapSubscriptions,
       googleIapSubscriptions,
     };
@@ -535,6 +562,118 @@ export class SubscriptionManagementService {
     };
   }
 
+  private async getTrialSubscriptionContent(
+    subscription: StripeSubscription,
+    customer: StripeCustomer,
+    price: StripePrice,
+    productName: string,
+    webIcon: string,
+    supportUrl: string,
+    offeringApiIdentifier: string
+  ): Promise<TrialSubscriptionContent | null> {
+    if (
+      subscription.trial_end === null &&
+      subscription.trial_start === null
+    ) {
+      return null;
+    }
+
+    const interval = price.recurring?.interval;
+    const intervalCount = price.recurring?.interval_count;
+
+    if (!interval || !intervalCount) {
+      throw new SubscriptionContentMissingIntervalInformationError(
+        subscription.id,
+        price.id
+      );
+    }
+
+    const subplatInterval = getSubplatInterval(interval, intervalCount);
+
+    //const isPastDue = true;
+    const isPastDue = subscription.status === 'past_due';
+    const latestInvoiceId = subscription.latest_invoice;
+
+    const upcomingInvoice =
+      await this.invoiceManager.previewUpcomingSubscription({
+        customer,
+        subscription,
+      });
+
+    const latestInvoice =
+      isPastDue && latestInvoiceId
+        ? await this.invoiceManager.preview(latestInvoiceId)
+        : undefined;
+
+    if (!upcomingInvoice) {
+      throw new SubscriptionContentMissingUpcomingInvoicePreviewError(
+        subscription.id,
+        customer
+      );
+    }
+
+    const {
+      subsequentAmount,
+      subsequentAmountExcludingTax,
+      subsequentTax,
+    } = upcomingInvoice;
+
+    const nextInvoiceTotalExclusiveTax =
+      subsequentTax &&
+      subsequentTax
+        .filter((tax) => !tax.inclusive)
+        .reduce((sum, tax) => sum + tax.amount, 0);
+
+    let failedInvoiceDate: number | undefined;
+    let failedInvoiceTotal: number | undefined;
+    let failedInvoiceTax: number | undefined;
+    let failedInvoiceUrl: string | null | undefined;
+
+    if (isPastDue && latestInvoice) {
+      const {
+        invoiceDate,
+        invoiceUrl,
+        taxAmounts,
+        totalAmount,
+        totalExcludingTax,
+      } = latestInvoice;
+
+      const totalExclusiveTax = taxAmounts
+      .filter((tax) => !tax.inclusive)
+      .reduce((sum, tax) => sum + tax.amount, 0);
+
+      failedInvoiceDate = invoiceDate;
+      failedInvoiceTax = Math.max(0, totalExclusiveTax);
+      failedInvoiceTotal = totalExclusiveTax
+        ? (totalExcludingTax ?? totalAmount)
+        : totalAmount;
+      failedInvoiceUrl = invoiceUrl;
+    }
+
+    return {
+      id: subscription.id,
+      productName,
+      offeringApiIdentifier,
+      supportUrl,
+      webIcon,
+      currency: subscription.currency,
+      interval: subplatInterval,
+      cancelAtPeriodEnd: subscription.cancel_at_period_end,
+      trialEnd: subscription.trial_end ?? null,
+      trialStart: subscription.trial_start ?? null,
+      nextInvoiceTax: nextInvoiceTotalExclusiveTax,
+      nextInvoiceTotal:
+        nextInvoiceTotalExclusiveTax && nextInvoiceTotalExclusiveTax > 0
+          ? (subsequentAmountExcludingTax ?? subsequentAmount)
+          : subsequentAmount,
+      conversionStatus: isPastDue ? 'past_due' : 'active',
+      failedInvoiceDate,
+      failedInvoiceTotal,
+      failedInvoiceTax,
+      failedInvoiceUrl,
+    };
+  }
+
   @SanitizeExceptions({
     allowlist: [AccountCustomerNotFoundError],
   })
diff --git a/libs/payments/management/src/lib/types.ts b/libs/payments/management/src/lib/types.ts
index c1e894d7fbc..4665dfb5b45 100644
--- a/libs/payments/management/src/lib/types.ts
+++ b/libs/payments/management/src/lib/types.ts
@@ -102,6 +102,26 @@ export interface SubscriptionContent {
   isEligibleForOffer: boolean;
 }
 
+export interface TrialSubscriptionContent {
+  id: string;
+  productName: string;
+  offeringApiIdentifier: string;
+  supportUrl: string;
+  webIcon: string;
+  currency: string;
+  interval?: SubplatInterval;
+  cancelAtPeriodEnd: boolean;
+  trialEnd: number | null;
+  trialStart: number | null;
+  nextInvoiceTotal?: number;
+  nextInvoiceTax?: number;
+  conversionStatus: 'active' | 'past_due';
+  failedInvoiceDate?: number;
+  failedInvoiceTotal?: number;
+  failedInvoiceTax?: number;
+  failedInvoiceUrl?: string | null;
+}
+
 export enum ChurnErrorReason {
   OfferExpired = 'no_churn_intervention_found',
   DiscountAlreadyApplied = 'discount_already_applied',
diff --git a/libs/payments/ui/src/index.ts b/libs/payments/ui/src/index.ts
index cc08093a781..15db75cb583 100644
--- a/libs/payments/ui/src/index.ts
+++ b/libs/payments/ui/src/index.ts
@@ -16,6 +16,7 @@ export * from './lib/client/components/CheckoutCheckbox';
 export * from './lib/client/components/ChurnCancel';
 export * from './lib/client/components/ChurnStaySubscribed';
 export * from './lib/client/components/CouponForm';
+export * from './lib/client/components/FreeTrialContent';
 export * from './lib/client/components/GleanPageView';
 export * from './lib/client/components/GleanRetentionResult';
 export * from './lib/client/components/Header';
diff --git a/libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl b/libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl
new file mode 100644
index 00000000000..2728bccb00a
--- /dev/null
+++ b/libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl
@@ -0,0 +1,46 @@
+## FreeTrialContent
+
+## $amount (Number) - The charge amount excluding tax. It will be formatted as currency.
+## $date (Date) - The date the free trial ends or expires (e.g., September 8, 2026)
+## $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
+## $tax (Number) - The tax amount. It will be formatted as currency.
+
+free-trial-content-trial-expires = Your free trial expires on { $date }.
+
+# Charge info strings - with tax, per interval
+free-trial-content-charge-info-with-tax-day = You will be charged { $amount } + { $tax } tax per day after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-week = You will be charged { $amount } + { $tax } tax per week after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-month = You will be charged { $amount } + { $tax } tax per month after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-halfyear = You will be charged { $amount } + { $tax } tax every six months after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-year = You will be charged { $amount } + { $tax } tax per year after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-default = You will be charged { $amount } + { $tax } tax after the free trial ends on { $date }.
+
+# Charge info strings - no tax, per interval
+free-trial-content-charge-info-no-tax-day = You will be charged { $amount } per day after the free trial ends on { $date }.
+free-trial-content-charge-info-no-tax-week = You will be charged { $amount } per week after the free trial ends on { $date }.
+free-trial-content-charge-info-no-tax-month = You will be charged { $amount } per month after the free trial ends on { $date }.
+free-trial-content-charge-info-no-tax-halfyear = You will be charged { $amount } every six months after the free trial ends on { $date }.
+free-trial-content-charge-info-no-tax-year = You will be charged { $amount } per year after the free trial ends on { $date }.
+free-trial-content-charge-info-no-tax-default = You will be charged { $amount } after the free trial ends on { $date }.
+
+free-trial-content-trial-ends = Your free trial ends on { $date }.
+free-trial-content-trial-active = Your free trial is active.
+free-trial-content-action-error = An unexpected error occurred. Please try again.
+
+free-trial-content-button-resume-trial = Resume trial
+free-trial-content-button-resume-trial-aria = Resume trial for { $productName }
+free-trial-content-button-cancel-trial = Cancel trial
+free-trial-content-button-cancel-trial-aria = Cancel trial for { $productName }
+
+## $billedOnDate (Date) - The date of the last bill (e.g., July 20, 2025)
+## $invoiceTotal (Number) - The invoice total amount excluding tax. It will be formatted as currency.
+## $taxDue (Number) - The tax amount. It will be formatted as currency.
+free-trial-content-last-bill = Last bill • { $billedOnDate }
+free-trial-content-last-bill-with-tax = { $invoiceTotal } + { $taxDue } tax
+free-trial-content-last-bill-no-tax = { $invoiceTotal }
+free-trial-content-link-view-invoice = View invoice
+free-trial-content-link-view-invoice-aria = View invoice for { $productName }
+## $date (Date) - The date the free trial ended (e.g., January 16, 2026)
+free-trial-content-payment-failed = Your free trial ended on <bold>{ $date }</bold>. We were unable to process your payment to start your subscription. Please update your payment method to activate your subscription and restore access to your services.
+free-trial-content-button-update-payment = Update payment method
+free-trial-content-button-update-payment-aria = Update payment method for { $productName }
diff --git a/libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx b/libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx
new file mode 100644
index 00000000000..1f7184747dd
--- /dev/null
+++ b/libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx
@@ -0,0 +1,465 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use client';
+
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { Localized, useLocalization } from '@fluent/react';
+
+import {
+  cancelSubscriptionAtPeriodEndAction,
+  resubscribeSubscriptionAction
+} from '@fxa/payments/ui/actions';
+import alertIcon from '@fxa/shared/assets/images/alert-yellow.svg';
+import infoIcon from '@fxa/shared/assets/images/infoBlack.svg';
+import newWindowIcon from '@fxa/shared/assets/images/new-window.svg';
+import spinner from '@fxa/shared/assets/images/spinner.svg';
+import {
+  getLocalizedCurrencyString,
+  getLocalizedDateString,
+} from '@fxa/shared/l10n';
+import { LinkExternal } from '@fxa/shared/react';
+
+interface TrialSubscription {
+  id: string;
+  productName: string;
+  offeringApiIdentifier: string;
+  supportUrl: string;
+  webIcon: string;
+  currency: string;
+  interval?: string;
+  cancelAtPeriodEnd: boolean;
+  trialEnd: number | null;
+  nextInvoiceTotal?: number;
+  nextInvoiceTax?: number;
+  conversionStatus: 'active' | 'past_due';
+  failedInvoiceDate?: number;
+  failedInvoiceTotal?: number;
+  failedInvoiceTax?: number;
+  failedInvoiceUrl?: string | null;
+}
+
+interface FreeTrialContentProps {
+  trial: TrialSubscription;
+  locale: string;
+  userId: string;
+  updatePaymentUrl?: string;
+}
+
+export const FreeTrialContent = ({
+  trial,
+  locale,
+  userId,
+  updatePaymentUrl,
+}: FreeTrialContentProps) => {
+  const {
+    cancelAtPeriodEnd,
+    conversionStatus,
+    currency,
+    failedInvoiceDate,
+    failedInvoiceTax,
+    failedInvoiceTotal,
+    failedInvoiceUrl,
+    interval,
+    nextInvoiceTax,
+    nextInvoiceTotal,
+    productName,
+    trialEnd,
+  } = trial;
+
+  const isPastDue = conversionStatus === 'past_due';
+
+  const [isClient, setIsClient] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [showActionError, setShowActionError] = useState(false);
+  const [isCancelled, setIsCancelled] = useState(cancelAtPeriodEnd);
+
+  useEffect(() => setIsClient(true), []);
+
+  const { l10n } = useLocalization();
+
+  const getCurrencyFallbackText = (amount: number) => {
+    return getLocalizedCurrencyString(amount, currency, locale);
+  };
+
+  const trialEndDateFallback = trialEnd
+    ? getLocalizedDateString(trialEnd, false, locale)
+    : undefined;
+
+  const failedInvoiceDateFallback = failedInvoiceDate
+    ? getLocalizedDateString(failedInvoiceDate, false, locale)
+    : undefined;
+
+  const getChargeInfoIds = (
+    interval?: string,
+    hasTax?: boolean,
+    amount?: string,
+    tax?: string,
+    date?: string,
+  ): { ftlId: string; fallbackText: string } => {
+    if (hasTax) {
+      switch (interval) {
+        case 'daily':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-day',
+            fallbackText: `You will be charged ${amount} + ${tax} tax per day after the free trial ends on ${date}.`,
+          };
+        case 'weekly':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-week',
+            fallbackText: `You will be charged ${amount} + ${tax} tax per week after the free trial ends on ${date}.`,
+          };
+        case 'monthly':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-month',
+            fallbackText: `You will be charged ${amount} + ${tax} tax per month after the free trial ends on ${date}.`,
+          };
+        case 'halfyearly':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-halfyear',
+            fallbackText: `You will be charged ${amount} + ${tax} tax every six months after the free trial ends on ${date}.`,
+          };
+        case 'yearly':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-year',
+            fallbackText: `You will be charged ${amount} + ${tax} tax per year after the free trial ends on ${date}.`,
+          };
+        default:
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-default',
+            fallbackText: `You will be charged ${amount} + ${tax} tax after the free trial ends on ${date}.`,
+          };
+      }
+    } else {
+      switch (interval) {
+        case 'daily':
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-day',
+            fallbackText: `You will be charged ${amount} per day after the free trial ends on ${date}.`,
+          };
+        case 'weekly':
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-week',
+            fallbackText: `You will be charged ${amount} per week after the free trial ends on ${date}.`,
+          };
+        case 'monthly':
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-month',
+            fallbackText: `You will be charged ${amount} per month after the free trial ends on ${date}.`,
+          };
+        case 'halfyearly':
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-halfyear',
+            fallbackText: `You will be charged ${amount} every six months after the free trial ends on ${date}.`,
+          };
+        case 'yearly':
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-year',
+            fallbackText: `You will be charged ${amount} per year after the free trial ends on ${date}.`,
+          };
+        default:
+          return {
+            ftlId: 'free-trial-content-charge-info-no-tax-default',
+            fallbackText: `You will be charged ${amount} after the free trial ends on ${date}.`,
+          };
+      }
+    }
+  };
+
+  async function cancelTrial() {
+    if (loading) return;
+
+    setLoading(true);
+    setShowActionError(false);
+
+    const result = await cancelSubscriptionAtPeriodEndAction(
+      userId,
+      trial.id
+    );
+    if (result.ok) {
+      setIsCancelled(true);
+    } else {
+      setShowActionError(true);
+    }
+    setLoading(false);
+  }
+
+  async function resumeTrial() {
+    if (loading) return;
+
+    setLoading(true);
+    setShowActionError(false);
+
+    const result = await resubscribeSubscriptionAction(
+      userId,
+      trial.id
+    );
+    if (result.ok) {
+      setIsCancelled(false);
+    } else {
+      setShowActionError(true);
+    }
+    setLoading(false);
+  }
+
+  if (isPastDue) {
+    return (
+      <>
+        {isClient && (
+          <div className="bg-grey-10 leading-6 p-4 rounded-lg">
+            {failedInvoiceDateFallback && (
+              <div className="text-grey-500">
+                <Localized
+                  id="free-trial-content-last-bill"
+                  vars={{ billedOnDate: failedInvoiceDateFallback }}
+                >
+                  <p>Last bill • {failedInvoiceDateFallback}</p>
+                </Localized>
+              </div>
+            )}
+            <div className="flex items-center justify-between">
+              {failedInvoiceTotal !== undefined && failedInvoiceTax ? (
+                <Localized
+                  id="free-trial-content-last-bill-with-tax"
+                  vars={{
+                    invoiceTotal: getCurrencyFallbackText(failedInvoiceTotal),
+                    taxDue: getCurrencyFallbackText(failedInvoiceTax),
+                  }}
+                >
+                  <p>
+                    {getCurrencyFallbackText(failedInvoiceTotal)} +{' '}
+                    {getCurrencyFallbackText(failedInvoiceTax)} tax
+                  </p>
+                </Localized>
+              ) : failedInvoiceTotal !== undefined ? (
+                <Localized
+                  id="free-trial-content-last-bill-no-tax"
+                  vars={{
+                    invoiceTotal: getCurrencyFallbackText(failedInvoiceTotal),
+                  }}
+                >
+                  <p>{getCurrencyFallbackText(failedInvoiceTotal)}</p>
+                </Localized>
+              ) : null}
+              {failedInvoiceUrl && (
+                <LinkExternal
+                  href={failedInvoiceUrl}
+                  className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                  data-testid="free-trial-link-view-invoice"
+                  aria-label={l10n.getString(
+                    'free-trial-content-link-view-invoice-aria',
+                    { productName },
+                    `View invoice for ${productName}`
+                  )}
+                >
+                  <Localized id="free-trial-content-link-view-invoice">
+                    <span className="underline">View invoice</span>
+                  </Localized>
+                  <Image src={newWindowIcon} alt="" />
+                </LinkExternal>
+              )}
+            </div>
+
+            <div
+              className="border-none h-px bg-grey-100 my-2"
+              role="separator"
+              aria-hidden="true"
+            ></div>
+
+            <div className="flex items-start gap-1">
+              <Image
+                src={infoIcon}
+                alt=""
+                width={20}
+                height={20}
+                aria-hidden="true"
+              />
+              <Localized
+                id="free-trial-content-payment-failed"
+                vars={{
+                  ...(trialEndDateFallback && { date: trialEndDateFallback }),
+                }}
+                elems={{ bold: <span className="font-bold" /> }}
+              >
+                <p className="text-sm text-black">
+                  {trialEndDateFallback ? (
+                    <>
+                      Your free trial ended on{' '}
+                      <span className="font-bold">{trialEndDateFallback}</span>.
+                      We were unable to process your payment to start your
+                      subscription. Please update your payment method to
+                      activate your subscription and restore access to your
+                      services.
+                    </>
+                  ) : (
+                    'We were unable to process your payment to start your subscription. Please update your payment method to activate your subscription and restore access to your services.'
+                  )}
+                </p>
+              </Localized>
+            </div>
+          </div>
+        )}
+
+        {updatePaymentUrl && (
+          <div className="flex justify-end items-start gap-2 self-stretch">
+            <div className="ms-auto tablet:w-auto">
+              <LinkExternal
+                href={updatePaymentUrl}
+                className="border box-border flex font-bold font-header h-10 items-center justify-center rounded-md py-2 px-5 bg-blue-500 hover:bg-blue-700 text-white min-w-[212px] tablet:w-auto"
+                aria-label={l10n.getString(
+                  'free-trial-content-button-update-payment-aria',
+                  { productName },
+                  `Update payment method for ${productName}`
+                )}
+              >
+                <Localized id="free-trial-content-button-update-payment">
+                  Update payment method
+                </Localized>
+              </LinkExternal>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  } else {
+    return (
+    <>
+      {isClient && (
+        <div className="bg-grey-10 leading-6 p-4 rounded-lg">
+          {isCancelled ? (
+            <div className="flex items-center gap-1">
+              <Image
+                src={alertIcon}
+                alt=""
+                width={20}
+                height={20}
+                aria-hidden="true"
+              />
+              <Localized
+                id="free-trial-content-trial-expires"
+                vars={{
+                  ...(trialEndDateFallback && { date: trialEndDateFallback }),
+                }}
+              >
+                <p className="text-sm text-yellow-800">
+                  {trialEndDateFallback
+                    ? `Your free trial expires on ${trialEndDateFallback}.`
+                    : 'Your free trial has been cancelled.'}
+                </p>
+              </Localized>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1">
+              <Image
+                src={infoIcon}
+                alt=""
+                width={20}
+                height={20}
+                aria-hidden="true"
+              />
+              {nextInvoiceTotal !== undefined && trialEndDateFallback ? (
+                (() => {
+                  const hasTax = !!nextInvoiceTax;
+                  const amountText = getCurrencyFallbackText(nextInvoiceTotal);
+                  const taxText = nextInvoiceTax ? getCurrencyFallbackText(nextInvoiceTax) : undefined;
+                  const { ftlId, fallbackText } = getChargeInfoIds(interval, hasTax, amountText, taxText, trialEndDateFallback);
+                  return (
+                    <Localized
+                      id={ftlId}
+                      vars={{
+                        amount: amountText,
+                        ...(hasTax && taxText && { tax: taxText }),
+                        date: trialEndDateFallback,
+                      }}
+                    >
+                      <p className="text-sm text-black">{fallbackText}</p>
+                    </Localized>
+                  );
+                })()
+              ) : trialEndDateFallback ? (
+                <Localized
+                  id="free-trial-content-trial-ends"
+                  vars={{ date: trialEndDateFallback }}
+                >
+                  <p className="text-sm">{`Your free trial ends on ${trialEndDateFallback}.`}</p>
+                </Localized>
+              ) : (
+                <Localized id="free-trial-content-trial-active">
+                  <p className="text-sm">Your free trial is active.</p>
+                </Localized>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {showActionError && (
+        <Localized id="free-trial-content-action-error">
+          <p
+            className="mt-1 text-alert-red font-normal text-start"
+            role="alert"
+          >
+            An unexpected error occurred. Please try again.
+          </p>
+        </Localized>
+      )}
+
+      <div className="mt-3 tablet:mt-0 flex w-full flex-col tablet:flex-row tablet:justify-end gap-3">
+        <div className="ms-auto tablet:w-auto">
+          {isCancelled ? (
+            <button
+              onClick={resumeTrial}
+              disabled={loading}
+              className="relative border box-border flex font-bold font-header h-10 items-center justify-center rounded-md py-2 px-5 bg-blue-500 hover:bg-blue-700 text-white min-w-[212px] tablet:w-auto"
+              aria-label={l10n.getString(
+                'free-trial-content-button-resume-trial-aria',
+                { productName },
+                `Resume trial for ${productName}`
+              )}
+            >
+              {loading && (
+                <Image
+                  src={spinner}
+                  alt=""
+                  className="absolute animate-spin h-5 w-5"
+                />
+              )}
+              <span className={loading ? 'text-transparent' : ''}>
+                <Localized id="free-trial-content-button-resume-trial">
+                  Resume trial
+                </Localized>
+              </span>
+            </button>
+          ) : (
+            <button
+              onClick={cancelTrial}
+              disabled={loading}
+              className="relative border border-grey-200 box-border flex font-bold font-header h-10 items-center justify-center rounded-md py-2 px-5 bg-grey-10 hover:bg-grey-50 min-w-[212px] tablet:w-auto"
+              aria-label={l10n.getString(
+                'free-trial-content-button-cancel-trial-aria',
+                { productName },
+                `Cancel trial for ${productName}`
+              )}
+            >
+              {loading && (
+                <Image
+                  src={spinner}
+                  alt=""
+                  className="absolute animate-spin h-5 w-5"
+                />
+              )}
+              <span className={loading ? 'text-transparent' : ''}>
+                <Localized id="free-trial-content-button-cancel-trial">
+                  Cancel trial
+                </Localized>
+              </span>
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+    );
+  }
+};
diff --git a/libs/payments/ui/src/lib/nestapp/validators/GetSubManPageContentActionResult.ts b/libs/payments/ui/src/lib/nestapp/validators/GetSubManPageContentActionResult.ts
index ef25e490ddb..54e6825b7a9 100644
--- a/libs/payments/ui/src/lib/nestapp/validators/GetSubManPageContentActionResult.ts
+++ b/libs/payments/ui/src/lib/nestapp/validators/GetSubManPageContentActionResult.ts
@@ -96,6 +96,68 @@ class SubscriptionContent {
   churnStaySubscribedCtaMessage?: string | null;
 }
 
+class TrialSubscriptionContent {
+  @IsString()
+  id!: string;
+
+  @IsString()
+  productName!: string;
+
+  @IsString()
+  offeringApiIdentifier!: string;
+
+  @IsString()
+  supportUrl!: string;
+
+  @IsString()
+  webIcon!: string;
+
+  @IsString()
+  currency!: string;
+
+  @IsOptional()
+  @IsEnum(SubplatInterval)
+  interval?: SubplatInterval;
+
+  @IsBoolean()
+  cancelAtPeriodEnd!: boolean;
+
+  @IsOptional()
+  @IsNumber()
+  trialEnd!: number | null;
+
+  @IsOptional()
+  @IsNumber()
+  trialStart!: number | null;
+
+  @IsOptional()
+  @IsNumber()
+  nextInvoiceTotal?: number;
+
+  @IsOptional()
+  @IsNumber()
+  nextInvoiceTax?: number;
+
+  @IsString()
+  conversionStatus!: string;
+
+  @IsOptional()
+  @IsNumber()
+  failedInvoiceDate?: number;
+
+  @IsOptional()
+  @IsNumber()
+  failedInvoiceTotal?: number;
+
+  @IsOptional()
+  @IsNumber()
+  failedInvoiceTax?: number;
+
+  @IsOptional()
+  @IsString()
+  failedInvoiceUrl?: string | null;
+}
+
 class AppleIapSubscriptionContent {
   @IsOptional()
   @IsNumber()
@@ -145,6 +207,10 @@ export class GetSubManPageContentActionResult {
   @Type(() => SubscriptionContent)
   subscriptions!: SubscriptionContent[];
 
+  @ValidateNested()
+  @Type(() => TrialSubscriptionContent)
+  trialSubscriptions!: TrialSubscriptionContent[];
+
   @ValidateNested()
   @Type(() => AppleIapSubscriptionContent)
   appleIapSubscriptions!: AppleIapSubscriptionContent[];
diff --git a/libs/shared/assets/src/images/infoBlack.svg b/libs/shared/assets/src/images/infoBlack.svg
new file mode 100644
index 00000000000..cd4d7849358
--- /dev/null
+++ b/libs/shared/assets/src/images/infoBlack.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 23.75C19.9846 23.75 24.0257 19.8325 24.0257 15C24.0257 10.1675 19.9846 6.25 15 6.25C10.0153 6.25 5.97424 10.1675 5.97424 15C5.97424 19.8325 10.0153 23.75 15 23.75ZM15 26.25C21.409 26.25 26.6045 21.2132 26.6045 15C26.6045 8.7868 21.409 3.75 15 3.75C8.59098 3.75 3.39546 8.7868 3.39546 15C3.39546 21.2132 8.59098 26.25 15 26.25ZM15 13.75C14.658 13.75 14.33 13.8817 14.0882 14.1161C13.8464 14.3505 13.7106 14.6685 13.7106 15V18.75C13.7106 19.0815 13.8464 19.3995 14.0882 19.6339C14.33 19.8683 14.658 20 15 20C15.3419 20 15.6699 19.8683 15.9117 19.6339C16.1535 19.3995 16.2894 19.0815 16.2894 18.75V15C16.2894 14.6685 16.1535 14.3505 15.9117 14.1161C15.6699 13.8817 15.3419 13.75 15 13.75ZM16.5311 11.25C16.5311 12.0702 15.8453 12.735 14.9994 12.735C14.1534 12.735 13.4676 12.0702 13.4676 11.25C13.4676 10.4299 14.1534 9.76501 14.9994 9.76501C15.8453 9.76501 16.5311 10.4299 16.5311 11.25Z" fill="#000000"/>
+</svg>