diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx
index b39cef2d5..dda8834ba 100644
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -265,16 +265,38 @@ export function PlanPicker(
'flex flex-col justify-center space-y-2'
}
>
-
-
-
+
@@ -285,23 +307,6 @@ export function PlanPicker(
'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
}
>
-
-
-
-
-
-
-
-
@@ -416,7 +421,7 @@ function PlanDetails({
{' '}
@@ -428,7 +433,7 @@ function PlanDetails({
@@ -464,7 +469,7 @@ function PlanDetails({
-
+
);
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 57a0ab342..00d737067 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -4,7 +4,8 @@ import { useState } from 'react';
import Link from 'next/link';
-import { ArrowRight, CheckCircle, Circle, Sparkles } from 'lucide-react';
+import { ArrowRight, CheckCircle, Circle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import {
@@ -167,7 +168,7 @@ function PricingItem(
>
-
+
+
{formatCurrency(props.product.currency, props.primaryLineItem.cost)}
@@ -311,10 +310,7 @@ function FeaturesList(
{props.features.map((feature) => {
return (
-
+
);
})}
@@ -426,6 +422,8 @@ function DefaultCheckoutButton(
? '?redirectToCheckout=true'
: '';
+ const { t } = useTranslation('billing');
+
const planId = props.plan.id;
const signUpPath = props.paths.signUp;
const subscriptionPath = props.paths.subscription;
@@ -449,7 +447,9 @@ function DefaultCheckoutButton(
i18nKey={label}
defaults={label}
values={{
- plan: props.product.name,
+ plan: t(props.product.name, {
+ defaultValue: props.product.name,
+ }),
}}
/>