@blocklet/payment-react 1.14.24 → 1.14.25

package/es/libs/util.d.ts

@@ -19,7 +19,10 @@ export declare function getStatementDescriptor(items: any[]): any;
 export declare function formatRecurring(recurring: PriceRecurring, translate?: boolean, separator?: string, locale?: string): string;
 export declare function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency): string;
 export declare function getPriceCurrencyOptions(price: TPrice): PriceCurrency[];
-export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, trial: number, locale?: string): {
+export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, { trialEnd, trialInDays }: {
+    trialEnd: number;
+    trialInDays: number;
+}, locale?: string): {
     primary: string;
     secondary?: string;
     quantity: string;
@@ -47,7 +50,17 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
-export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
+export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
+    count: number;
+    interval: string;
+};
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, { trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
     action: string;
     amount: string;
     then?: string;

package/es/libs/util.js

@@ -202,7 +202,7 @@ export function getPriceCurrencyOptions(price) {
     }
   ];
 }
-export function formatLineItemPricing(item, currency, trial, locale = "en") {
+export function formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale = "en") {
   const price = item.upsell_price || item.price;
   let quantity = t("common.qty", locale, { count: item.quantity });
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
@@ -211,6 +211,7 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
   const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
   const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
   const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -221,9 +222,9 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
     return quantity ? t("common.each", locale, { unit }) : "";
   };
   if (price.type === "recurring" && price.recurring) {
-    if (trial > 0) {
+    if (trialResult.count > 0) {
       return {
-        primary: t("common.trial", locale, { count: trial }),
+        primary: t("common.trial", locale, { count: trialResult.count, interval: trialResult.interval }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
         quantity
       };
@@ -415,11 +416,43 @@ export function formatPriceDisplay({ amount, then, actualAmount, showThen }, rec
   }
   return [amount, then].filter(Boolean).join(" ");
 }
-export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+export function getFreeTrialTime({ trialInDays, trialEnd }, locale = "en") {
+  const now = dayjs().unix();
+  if (trialEnd > 0 && trialEnd > now) {
+    if (trialEnd - now < 3600) {
+      return {
+        count: Math.ceil((trialEnd - now) / 60),
+        interval: t("common.minute", locale)
+      };
+    }
+    if (trialEnd - now < 86400) {
+      return {
+        count: Math.ceil((trialEnd - now) / 3600),
+        interval: t("common.hour", locale)
+      };
+    }
+    return {
+      count: Math.ceil((trialEnd - now) / 86400),
+      interval: t("common.day", locale)
+    };
+  }
+  if (trialInDays > 0) {
+    return {
+      count: trialInDays,
+      interval: t("common.day", locale)
+    };
+  }
+  return {
+    count: 0,
+    interval: t("common.day", locale)
+  };
+}
+export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd }, locale = "en") {
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
   const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
   if (items.length === 0) {
     return {
       action: t("payment.checkout.empty", locale),
@@ -453,17 +486,19 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
           if (x.price.recurring?.usage_type === "metered") {
             return acc;
           }
-          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+          return acc.add(
+            new BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new BN(x.quantity))
+          );
         }, new BN(0)),
         currency.decimal
       ),
       currency.symbol
     ].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result4 = {
           action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
-          amount: t("payment.checkout.free", locale, { count: trialInDays }),
+          amount: t("payment.checkout.free", locale, { count: trialResult.count, interval: trialResult.interval }),
           then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
           showThen: true,
           actualAmount: "0"
@@ -485,10 +520,10 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
         priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result3 = {
         action: t("payment.checkout.try1", locale, { name }),
-        amount: t("payment.checkout.free", locale, { count: trialInDays }),
+        amount: t("payment.checkout.free", locale, { count: trialResult.count, interval: trialResult.interval }),
         then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
         showThen: true,
         actualAmount: "0"

package/es/locales/en.js

@@ -60,9 +60,10 @@ export default flat({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} day{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
     billed: "billed {rule}",
     metered: "based on usage",
+    minute: "minute",
     hour: "hour",
     day: "day",
     week: "week",
@@ -133,7 +134,7 @@ export default flat({
       then: "Then {subscription} {recurring}",
       meteredThen: "Then {recurring} based on usage",
       metered: "{recurring} based on usage",
-      free: "{count} day{count > 1 ? 's' : ''} free",
+      free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
         payment: "Thanks for your purchase",

package/es/locales/zh.js

@@ -60,9 +60,10 @@ export default flat({
     continue: "\u7EE7\u7EED",
     qty: "{count} \u4EF6",
     each: "\u6BCF\u4EF6 {unit}",
-    trial: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+    trial: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
     billed: "{rule}\u6536\u8D39",
     metered: "\u6309\u7528\u91CF",
+    minute: "\u5206\u949F",
     hour: "\u5C0F\u65F6",
     day: "\u5929",
     week: "\u5468",
@@ -133,7 +134,7 @@ export default flat({
       then: "\u7136\u540E {subscription} {recurring}",
       meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
       metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
-      free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+      free: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
       least: "\u81F3\u5C11",
       completed: {
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",

package/es/payment/form/currency.js

@@ -61,16 +61,6 @@ const Root = styled("section")`
     background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  // .cko-payment-card::before {
-  //   content: '';
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
-  //   border-top-color: transparent;
-  //   border-left-color: transparent;
-  // }
-
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;

package/es/payment/index.js

@@ -133,6 +133,7 @@ function PaymentInner({
         {
           items: state.checkoutSession.line_items,
           trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+          trialEnd: state.checkoutSession.subscription_data?.trial_end || 0,
           billingThreshold: Math.max(
             state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
@@ -321,23 +322,18 @@ export const Root = styled(Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  // justify-content: center;
   align-items: center;
   overflow: hidden;
-  // min-height: ${(props) => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
   .cko-container {
     overflow: hidden;
     width: 100%;
-    // max-width: ${(props) => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
     justify-content: center;
-    // gap: 4px;
     position: relative;
     flex: 1;
     padding: 1px;
-    // padding: ${(props) => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
   .base-card {
@@ -350,14 +346,11 @@ export const Root = styled(Box)`
   }
 
   .cko-overview {
-    // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // min-height: ${(props) => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
     flex-direction: column;
     display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "flex"};
     background: var(--backgrounds-bg-base);
     min-height: 'auto';
-    // width: 502px;
   }
   .cko-header {
     left: 0;
@@ -385,8 +378,6 @@ export const Root = styled(Box)`
 
   .cko-payment {
     width: 502px;
-    // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     padding-left: ${(props) => props.mode === "standalone" ? "40px" : "20px"};
     position: relative;
     &:before {
@@ -411,10 +402,6 @@ export const Root = styled(Box)`
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/es/payment/product-item.d.ts

@@ -4,17 +4,19 @@ type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
     trialInDays: number;
+    trialEnd?: number;
     currency: TPaymentCurrency;
     onUpsell: Function;
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+declare function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;
         children: null;
+        trialEnd: number;
     };
 }
 export default ProductItem;

package/es/payment/product-item.js

@@ -12,14 +12,17 @@ import {
   formatUpsellSaving
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
+import dayjs from "../libs/dayjs.js";
 ProductItem.defaultProps = {
   mode: "normal",
-  children: null
+  children: null,
+  trialEnd: 0
 };
 export default function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -27,18 +30,19 @@ export default function ProductItem({
   onDownsell
 }) {
   const { t, locale } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, trialInDays, locale);
+  const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
-    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== "metered") {
+    const trial = trialInDays > 0 || trialEnd > dayjs().unix();
+    if (isRecurring && !trial && price?.recurring?.usage_type !== "metered") {
       return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, "slash", locale) : ""}`;
     }
     return pricing.primary;
-  }, [trialInDays, pricing, item, locale]);
+  }, [trialInDays, trialEnd, pricing, item, locale]);
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, className: "product-item", children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", sx: { width: "100%" }, className: "product-item-content", children: [
       /* @__PURE__ */ jsxs(

package/es/payment/summary.d.ts

@@ -4,6 +4,7 @@ type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
     trialInDays: number;
+    trialEnd?: number;
     billingThreshold: number;
     showStaking?: boolean;
     onUpsell?: Function;
@@ -16,7 +17,7 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
@@ -29,6 +30,7 @@ declare namespace PaymentSummary {
         showStaking: boolean;
         donationSettings: null;
         action: string;
+        trialEnd: number;
     };
 }
 export default PaymentSummary;

package/es/payment/summary.js

@@ -83,7 +83,8 @@ PaymentSummary.defaultProps = {
   crossSellBehavior: "",
   showStaking: false,
   donationSettings: null,
-  action: ""
+  action: "",
+  trialEnd: 0
 };
 export default function PaymentSummary({
   items,
@@ -100,6 +101,7 @@ export default function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -109,7 +111,7 @@ export default function PaymentSummary({
   const { data, runAsync } = useRequest(
     () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
-  const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
+  const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
   const totalAmount = fromUnitToToken(
     new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
@@ -180,6 +182,7 @@ export default function PaymentSummary({
               item: x,
               items,
               trialInDays,
+              trialEnd,
               currency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
@@ -209,6 +212,7 @@ export default function PaymentSummary({
             items,
             trialInDays,
             currency,
+            trialEnd,
             onUpsell: noop,
             onDownsell: noop,
             children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [

package/lib/libs/util.d.ts

@@ -19,7 +19,10 @@ export declare function getStatementDescriptor(items: any[]): any;
 export declare function formatRecurring(recurring: PriceRecurring, translate?: boolean, separator?: string, locale?: string): string;
 export declare function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency): string;
 export declare function getPriceCurrencyOptions(price: TPrice): PriceCurrency[];
-export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, trial: number, locale?: string): {
+export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, { trialEnd, trialInDays }: {
+    trialEnd: number;
+    trialInDays: number;
+}, locale?: string): {
     primary: string;
     secondary?: string;
     quantity: string;
@@ -47,7 +50,17 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
-export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
+export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
+    count: number;
+    interval: string;
+};
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, { trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
     action: string;
     amount: string;
     then?: string;

package/lib/libs/util.js

@@ -28,6 +28,7 @@ exports.formatToDatetime = formatToDatetime;
 exports.formatTotalPrice = formatTotalPrice;
 exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
+exports.getFreeTrialTime = getFreeTrialTime;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPayoutStatusColor = getPayoutStatusColor;
@@ -266,7 +267,10 @@ function getPriceCurrencyOptions(price) {
     tiers: null
   }];
 }
-function formatLineItemPricing(item, currency, trial, locale = "en") {
+function formatLineItemPricing(item, currency, {
+  trialEnd,
+  trialInDays
+}, locale = "en") {
   const price = item.upsell_price || item.price;
   let quantity = (0, _locales.t)("common.qty", locale, {
     count: item.quantity
@@ -277,6 +281,10 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
   const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
   const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
   const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({
+    trialInDays,
+    trialEnd
+  }, locale);
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -289,10 +297,11 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
     }) : "";
   };
   if (price.type === "recurring" && price.recurring) {
-    if (trial > 0) {
+    if (trialResult.count > 0) {
       return {
         primary: (0, _locales.t)("common.trial", locale, {
-          count: trial
+          count: trialResult.count,
+          interval: trialResult.interval
         }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
         quantity
@@ -502,13 +511,54 @@ function formatPriceDisplay({
   }
   return [amount, then].filter(Boolean).join(" ");
 }
-function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+function getFreeTrialTime({
+  trialInDays,
+  trialEnd
+}, locale = "en") {
+  const now = (0, _dayjs.default)().unix();
+  if (trialEnd > 0 && trialEnd > now) {
+    if (trialEnd - now < 3600) {
+      return {
+        count: Math.ceil((trialEnd - now) / 60),
+        interval: (0, _locales.t)("common.minute", locale)
+      };
+    }
+    if (trialEnd - now < 86400) {
+      return {
+        count: Math.ceil((trialEnd - now) / 3600),
+        interval: (0, _locales.t)("common.hour", locale)
+      };
+    }
+    return {
+      count: Math.ceil((trialEnd - now) / 86400),
+      interval: (0, _locales.t)("common.day", locale)
+    };
+  }
+  if (trialInDays > 0) {
+    return {
+      count: trialInDays,
+      interval: (0, _locales.t)("common.day", locale)
+    };
+  }
+  return {
+    count: 0,
+    interval: (0, _locales.t)("common.day", locale)
+  };
+}
+function formatCheckoutHeadlines(items, currency, {
+  trialInDays,
+  trialEnd
+}, locale = "en") {
   const brand = getStatementDescriptor(items);
   const {
     total
   } = getCheckoutAmount(items, currency, trialInDays > 0);
   const actualAmount = (0, _util.fromUnitToToken)(total, currency.decimal);
   const amount = `${(0, _util.fromUnitToToken)(total, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({
+    trialInDays,
+    trialEnd
+  }, locale);
   if (items.length === 0) {
     return {
       action: (0, _locales.t)("payment.checkout.empty", locale),
@@ -551,17 +601,18 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
       if (x.price.recurring?.usage_type === "metered") {
         return acc;
       }
-      return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new _util.BN(x.quantity)));
+      return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new _util.BN(x.quantity)));
     }, new _util.BN(0)), currency.decimal), currency.symbol].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result4 = {
           action: (0, _locales.t)("payment.checkout.try2", locale, {
             name,
             count: items.length - 1
           }),
           amount: (0, _locales.t)("payment.checkout.free", locale, {
-            count: trialInDays
+            count: trialResult.count,
+            interval: trialResult.interval
           }),
           then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
           showThen: true,
@@ -589,13 +640,14 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
         priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result3 = {
         action: (0, _locales.t)("payment.checkout.try1", locale, {
           name
         }),
         amount: (0, _locales.t)("payment.checkout.free", locale, {
-          count: trialInDays
+          count: trialResult.count,
+          interval: trialResult.interval
         }),
         then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
         showThen: true,

package/lib/locales/en.js

@@ -67,9 +67,10 @@ module.exports = (0, _flat.default)({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} day{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
     billed: "billed {rule}",
     metered: "based on usage",
+    minute: "minute",
     hour: "hour",
     day: "day",
     week: "week",
@@ -140,7 +141,7 @@ module.exports = (0, _flat.default)({
       then: "Then {subscription} {recurring}",
       meteredThen: "Then {recurring} based on usage",
       metered: "{recurring} based on usage",
-      free: "{count} day{count > 1 ? 's' : ''} free",
+      free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
         payment: "Thanks for your purchase",

package/lib/locales/zh.js

@@ -67,9 +67,10 @@ module.exports = (0, _flat.default)({
     continue: "\u7EE7\u7EED",
     qty: "{count} \u4EF6",
     each: "\u6BCF\u4EF6 {unit}",
-    trial: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+    trial: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
     billed: "{rule}\u6536\u8D39",
     metered: "\u6309\u7528\u91CF",
+    minute: "\u5206\u949F",
     hour: "\u5C0F\u65F6",
     day: "\u5929",
     week: "\u5468",
@@ -140,7 +141,7 @@ module.exports = (0, _flat.default)({
       then: "\u7136\u540E {subscription} {recurring}",
       meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
       metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
-      free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+      free: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
       least: "\u81F3\u5C11",
       completed: {
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",

package/lib/payment/form/currency.js

@@ -79,16 +79,6 @@ const Root = (0, _system.styled)("section")`
     background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  // .cko-payment-card::before {
-  //   content: '';
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   border: 12px solid ${props => props.theme.palette.primary.main};
-  //   border-top-color: transparent;
-  //   border-left-color: transparent;
-  // }
-
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;

package/lib/payment/index.js

@@ -194,6 +194,7 @@ function PaymentInner({
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
             items: state.checkoutSession.line_items,
             trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+            trialEnd: state.checkoutSession.subscription_data?.trial_end || 0,
             billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
@@ -395,23 +396,18 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  // justify-content: center;
   align-items: center;
   overflow: hidden;
-  // min-height: ${props => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
   .cko-container {
     overflow: hidden;
     width: 100%;
-    // max-width: ${props => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
     justify-content: center;
-    // gap: 4px;
     position: relative;
     flex: 1;
     padding: 1px;
-    // padding: ${props => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
   .base-card {
@@ -424,14 +420,11 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-overview {
-    // width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // min-height: ${props => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
     flex-direction: column;
     display: ${props => props.mode.endsWith("-minimal") ? "none" : "flex"};
     background: var(--backgrounds-bg-base);
     min-height: 'auto';
-    // width: 502px;
   }
   .cko-header {
     left: 0;
@@ -459,8 +452,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 
   .cko-payment {
     width: 502px;
-    // width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     padding-left: ${props => props.mode === "standalone" ? "40px" : "20px"};
     position: relative;
     &:before {
@@ -485,10 +476,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/lib/payment/product-item.d.ts

@@ -4,17 +4,19 @@ type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
     trialInDays: number;
+    trialEnd?: number;
     currency: TPaymentCurrency;
     onUpsell: Function;
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+declare function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;
         children: null;
+        trialEnd: number;
     };
 }
 export default ProductItem;

package/lib/payment/product-item.js

@@ -12,15 +12,18 @@ var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
+var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 ProductItem.defaultProps = {
   mode: "normal",
-  children: null
+  children: null,
+  trialEnd: 0
 };
 function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -31,18 +34,22 @@ function ProductItem({
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const pricing = (0, _util.formatLineItemPricing)(item, currency, trialInDays, locale);
+  const pricing = (0, _util.formatLineItemPricing)(item, currency, {
+    trialEnd,
+    trialInDays
+  }, locale);
   const saving = (0, _util.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
-    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== "metered") {
+    const trial = trialInDays > 0 || trialEnd > (0, _dayjs.default)().unix();
+    if (isRecurring && !trial && price?.recurring?.usage_type !== "metered") {
       return `${pricing.primary} ${price.recurring ? (0, _util.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
     }
     return pricing.primary;
-  }, [trialInDays, pricing, item, locale]);
+  }, [trialInDays, trialEnd, pricing, item, locale]);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     alignItems: "flex-start",

package/lib/payment/summary.d.ts

@@ -4,6 +4,7 @@ type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
     trialInDays: number;
+    trialEnd?: number;
     billingThreshold: number;
     showStaking?: boolean;
     onUpsell?: Function;
@@ -16,7 +17,7 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
@@ -29,6 +30,7 @@ declare namespace PaymentSummary {
         showStaking: boolean;
         donationSettings: null;
         action: string;
+        trialEnd: number;
     };
 }
 export default PaymentSummary;

package/lib/payment/summary.js

@@ -90,7 +90,8 @@ PaymentSummary.defaultProps = {
   crossSellBehavior: "",
   showStaking: false,
   donationSettings: null,
-  action: ""
+  action: "",
+  trialEnd: 0
 };
 function PaymentSummary({
   items,
@@ -107,6 +108,7 @@ function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }) {
   const {
@@ -126,7 +128,10 @@ function PaymentSummary({
     data,
     runAsync
   } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
-  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
+  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, {
+    trialEnd,
+    trialInDays
+  }, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
   const totalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, currency?.decimal)).add(new _util.BN(staking)).toString(), currency?.decimal);
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
@@ -197,6 +202,7 @@ function PaymentSummary({
         item: x,
         items,
         trialInDays,
+        trialEnd,
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
@@ -232,6 +238,7 @@ function PaymentSummary({
           items,
           trialInDays,
           currency,
+          trialEnd,
           onUpsell: _noop.default,
           onDownsell: _noop.default,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.24",
+  "version": "1.14.25",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.24",
+    "@blocklet/payment-types": "1.14.25",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "34ddc3ea5d4e166304a4966a926bfc35796193b1"
+  "gitHead": "d326f7f50aeb5a0b727b1eb1f5b042f82e2e4059"
 }

package/src/libs/util.ts

@@ -294,7 +294,7 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
-  trial: number,
+  { trialEnd, trialInDays }: { trialEnd: number; trialInDays: number },
   locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
   const price = item.upsell_price || item.price;
@@ -303,13 +303,14 @@ export function formatLineItemPricing(
   if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
     quantity = '';
   }
-
   const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
 
   const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
 
   const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
 
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
+
   const appendUnit = (v: string, alt: string) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -322,9 +323,9 @@ export function formatLineItemPricing(
   };
 
   if (price.type === 'recurring' && price.recurring) {
-    if (trial > 0) {
+    if (trialResult.count > 0) {
       return {
-        primary: t('common.trial', locale, { count: trial }),
+        primary: t('common.trial', locale, { count: trialResult.count, interval: trialResult.interval }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, 'slash', locale)}`,
         quantity,
       };
@@ -559,10 +560,48 @@ export function formatPriceDisplay(
   }
   return [amount, then].filter(Boolean).join(' ');
 }
+
+export function getFreeTrialTime(
+  { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
+  locale: string = 'en'
+): {
+  count: number;
+  interval: string;
+} {
+  const now = dayjs().unix();
+  if (trialEnd > 0 && trialEnd > now) {
+    if (trialEnd - now < 3600) {
+      return {
+        count: Math.ceil((trialEnd - now) / 60),
+        interval: t('common.minute', locale),
+      };
+    }
+    if (trialEnd - now < 86400) {
+      return {
+        count: Math.ceil((trialEnd - now) / 3600),
+        interval: t('common.hour', locale),
+      };
+    }
+    return {
+      count: Math.ceil((trialEnd - now) / 86400),
+      interval: t('common.day', locale),
+    };
+  }
+  if (trialInDays > 0) {
+    return {
+      count: trialInDays,
+      interval: t('common.day', locale),
+    };
+  }
+  return {
+    count: 0,
+    interval: t('common.day', locale),
+  };
+}
 export function formatCheckoutHeadlines(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
-  trialInDays: number,
+  { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
   locale: string = 'en'
 ): {
   action: string;
@@ -577,6 +616,7 @@ export function formatCheckoutHeadlines(
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
   const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
 
   // empty
   if (items.length === 0) {
@@ -618,7 +658,10 @@ export function formatCheckoutHeadlines(
           if (x.price.recurring?.usage_type === 'metered') {
             return acc;
           }
-          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+
+          return acc.add(
+            new BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new BN(x.quantity))
+          );
         }, new BN(0)),
         currency.decimal
       ),
@@ -627,10 +670,10 @@ export function formatCheckoutHeadlines(
       .filter(Boolean)
       .join(' ');
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result = {
           action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
-          amount: t('payment.checkout.free', locale, { count: trialInDays }),
+          amount: t('payment.checkout.free', locale, { count: trialResult.count, interval: trialResult.interval }),
           then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
           showThen: true,
           actualAmount: '0',
@@ -653,10 +696,10 @@ export function formatCheckoutHeadlines(
       };
     }
 
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result = {
         action: t('payment.checkout.try1', locale, { name }),
-        amount: t('payment.checkout.free', locale, { count: trialInDays }),
+        amount: t('payment.checkout.free', locale, { count: trialResult.count, interval: trialResult.interval }),
         then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
         showThen: true,
         actualAmount: '0',

package/src/locales/en.tsx

@@ -62,9 +62,10 @@ export default flat({
     continue: 'Continue',
     qty: 'Qty {count}',
     each: '{unit} each',
-    trial: "Free for {count} day{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
     billed: 'billed {rule}',
     metered: 'based on usage',
+    minute: 'minute',
     hour: 'hour',
     day: 'day',
     week: 'week',
@@ -136,7 +137,7 @@ export default flat({
       then: 'Then {subscription} {recurring}',
       meteredThen: 'Then {recurring} based on usage',
       metered: '{recurring} based on usage',
-      free: "{count} day{count > 1 ? 's' : ''} free",
+      free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: 'continue with at least',
       completed: {
         payment: 'Thanks for your purchase',

package/src/locales/zh.tsx

@@ -62,9 +62,10 @@ export default flat({
     continue: '继续',
     qty: '{count} 件',
     each: '每件 {unit}',
-    trial: '免费试用 {count} 天',
+    trial: '免费试用 {count} {interval}',
     billed: '{rule}收费',
     metered: '按用量',
+    minute: '分钟',
     hour: '小时',
     day: '天',
     week: '周',
@@ -135,7 +136,7 @@ export default flat({
       then: '然后 {subscription} {recurring}',
       meteredThen: '然后{recurring}按用量计费',
       metered: '{recurring}按用量计费',
-      free: '免费试用 {count} 天',
+      free: '免费试用 {count} {interval}',
       least: '至少',
       completed: {
         payment: '感谢您的购买',

package/src/payment/form/currency.tsx

@@ -63,16 +63,6 @@ const Root = styled<any>('section')`
     background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  // .cko-payment-card::before {
-  //   content: '';
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
-  //   border-top-color: transparent;
-  //   border-left-color: transparent;
-  // }
-
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;

package/src/payment/index.tsx

@@ -155,6 +155,7 @@ function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
   };
+
   return (
     <FormProvider {...methods}>
       <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
@@ -164,6 +165,7 @@ function PaymentInner({
               <PaymentSummary
                 items={state.checkoutSession.line_items}
                 trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
+                trialEnd={state.checkoutSession.subscription_data?.trial_end || 0}
                 billingThreshold={Math.max(
                   state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
                   // @ts-ignore
@@ -376,23 +378,18 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  // justify-content: center;
   align-items: center;
   overflow: hidden;
-  // min-height: ${(props) => (props.mode === 'standalone' ? '100vh' : 'auto')};
   position: relative;
   .cko-container {
     overflow: hidden;
     width: 100%;
-    // max-width: ${(props) => (props.mode.endsWith('-minimal') ? '400px' : '1000px')};
     display: flex;
     flex-direction: row;
     justify-content: center;
-    // gap: 4px;
     position: relative;
     flex: 1;
     padding: 1px;
-    // padding: ${(props) => (props.mode === 'standalone' ? '0 16px' : '0')};
   }
 
   .base-card {
@@ -405,14 +402,11 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-overview {
-    // width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
-    // min-height: ${(props) => (props.mode === 'standalone' ? '540px' : 'auto')};
     position: relative;
     flex-direction: column;
     display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'flex')};
     background: var(--backgrounds-bg-base);
     min-height: 'auto';
-    // width: 502px;
   }
   .cko-header {
     left: 0;
@@ -440,8 +434,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
 
   .cko-payment {
     width: 502px;
-    // width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
-    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     padding-left: ${(props) => (props.mode === 'standalone' ? '40px' : '20px')};
     position: relative;
     &:before {
@@ -466,10 +458,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/src/payment/product-item.tsx

@@ -13,11 +13,13 @@ import {
   formatUpsellSaving,
 } from '../libs/util';
 import ProductCard from './product-card';
+import dayjs from '../libs/dayjs';
 
 type Props = {
   item: TLineItemExpanded;
   items: TLineItemExpanded[];
   trialInDays: number;
+  trialEnd?: number;
   currency: TPaymentCurrency;
   onUpsell: Function;
   onDownsell: Function;
@@ -28,12 +30,14 @@ type Props = {
 ProductItem.defaultProps = {
   mode: 'normal',
   children: null,
+  trialEnd: 0,
 };
 
 export default function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -41,18 +45,19 @@ export default function ProductItem({
   onDownsell,
 }: Props) {
   const { t, locale } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, trialInDays, locale);
+  const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && items.length === 1;
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === 'recurring' && price?.recurring;
-    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== 'metered') {
+    const trial = trialInDays > 0 || trialEnd > dayjs().unix();
+    if (isRecurring && !trial && price?.recurring?.usage_type !== 'metered') {
       return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, 'slash', locale) : ''}`;
     }
     return pricing.primary;
-  }, [trialInDays, pricing, item, locale]);
+  }, [trialInDays, trialEnd, pricing, item, locale]);
 
   return (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }} className="product-item">

package/src/payment/summary.tsx

@@ -67,6 +67,7 @@ type Props = {
   items: TLineItemExpanded[];
   currency: TPaymentCurrency;
   trialInDays: number;
+  trialEnd?: number;
   billingThreshold: number;
   showStaking?: boolean;
   onUpsell?: Function;
@@ -131,6 +132,7 @@ PaymentSummary.defaultProps = {
   showStaking: false,
   donationSettings: null,
   action: '',
+  trialEnd: 0,
 };
 
 export default function PaymentSummary({
@@ -148,6 +150,7 @@ export default function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -157,7 +160,7 @@ export default function PaymentSummary({
   const { data, runAsync } = useRequest(() =>
     checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
-  const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
+  const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : '0';
   const totalAmount = fromUnitToToken(
     new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
@@ -231,6 +234,7 @@ export default function PaymentSummary({
               item={x}
               items={items}
               trialInDays={trialInDays}
+              trialEnd={trialEnd}
               currency={currency}
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}>
@@ -260,6 +264,7 @@ export default function PaymentSummary({
               items={items}
               trialInDays={trialInDays}
               currency={currency}
+              trialEnd={trialEnd}
               onUpsell={noop}
               onDownsell={noop}>
               <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>