-
Included
+
{t.form.included}
diff --git a/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx b/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx
index 5c22dc437a..822354cebe 100644
--- a/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx
+++ b/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx
@@ -5,6 +5,10 @@ import { usePostHog } from '@/hooks/posthog'
import { useCheckoutClientSSE } from '@/hooks/sse'
import { getServerURL } from '@/utils/api'
import { hasProductCheckout } from '@polar-sh/checkout/guards'
+import {
+ getTranslations,
+ type SupportedLocale,
+} from '@polar-sh/checkout/providers'
import { PolarCore } from '@polar-sh/sdk/core'
import { checkoutsClientGet } from '@polar-sh/sdk/funcs/checkoutsClientGet'
import type { CheckoutPublic } from '@polar-sh/sdk/models/components/checkoutpublic'
@@ -15,7 +19,6 @@ import { Elements, ElementsConsumer } from '@stripe/react-stripe-js'
import { Stripe, loadStripe } from '@stripe/stripe-js'
import { useRouter } from 'next/navigation'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import LogoType from '../Brand/LogoType'
import { SpinnerNoMargin } from '../Shared/Spinner'
import CheckoutBenefits from './CheckoutBenefits'
import CheckoutSeatInvitations from './CheckoutSeatInvitations'
@@ -30,9 +33,11 @@ const isIntegrationError = (
const StripeRequiresAction = ({
stripe,
checkout,
+ confirmPaymentLabel,
}: {
stripe: Stripe | null
checkout: CheckoutPublic
+ confirmPaymentLabel: string
}) => {
const [pendingHandling, setPendingHandling] = useState(false)
const [success, setSuccess] = useState(false)
@@ -84,7 +89,7 @@ const StripeRequiresAction = ({
onClick={() => handleNextAction(stripe)}
loading={pendingHandling}
>
- Confirm payment
+ {confirmPaymentLabel}
)
}
@@ -99,6 +104,7 @@ export interface CheckoutConfirmationProps {
customerSessionToken?: string
disabled?: boolean
maxWaitingTimeMs?: number
+ locale?: SupportedLocale
}
export const CheckoutConfirmation = ({
@@ -108,9 +114,11 @@ export const CheckoutConfirmation = ({
customerSessionToken,
disabled,
maxWaitingTimeMs = 15000,
+ locale = 'en',
}: CheckoutConfirmationProps) => {
const router = useRouter()
const posthog = usePostHog()
+ const t = useMemo(() => getTranslations(locale), [locale])
const client = useMemo(() => new PolarCore({ serverURL: getServerURL() }), [])
const [checkout, setCheckout] = useState(_checkout)
const { status, organization } = checkout
@@ -194,21 +202,22 @@ export const CheckoutConfirmation = ({
name={organization.name}
/>
- {status === 'confirmed' && 'We are processing your order'}
- {status === 'succeeded' && 'Your order was successful!'}
- {status === 'failed' &&
- 'A problem occurred while processing your order'}
+ {status === 'confirmed' && t.confirmation.processing}
+ {status === 'succeeded' && t.confirmation.success}
+ {status === 'failed' && t.confirmation.failed}
- {status === 'confirmed' &&
- 'Please wait while we are listening for those webhooks.'}
+ {status === 'confirmed' && t.confirmation.waitingWebhooks}
{status === 'succeeded' && (
<>
{hasProductCheckout(checkout) &&
- `You're now eligible for the benefits of ${checkout.product.name}.`}
+ t.confirmation.eligible.replace(
+ '{productName}',
+ checkout.product.name,
+ )}
)}
- {status === 'failed' && 'Please try again or contact support.'}
+ {status === 'failed' && t.confirmation.tryAgain}
{status === 'confirmed' && (
@@ -216,7 +225,11 @@ export const CheckoutConfirmation = ({
{({ stripe }) => (
-
@@ -233,20 +246,12 @@ export const CheckoutConfirmation = ({
checkout={checkout}
customerSessionToken={customerSessionToken}
maxWaitingTimeMs={maxWaitingTimeMs}
+ locale={locale}
/>
)}
-
- This order was processed by our online reseller & Merchant of
- Record, Polar, who also handles order-related inquiries and
- returns.
-
)}
-
- Powered by
-
)
}
diff --git a/clients/apps/web/src/i18n/utils.ts b/clients/apps/web/src/i18n/utils.ts
new file mode 100644
index 0000000000..115a35e6ba
--- /dev/null
+++ b/clients/apps/web/src/i18n/utils.ts
@@ -0,0 +1,53 @@
+import {
+ DEFAULT_LOCALE,
+ isSupportedLocale,
+ SUPPORTED_LOCALES,
+ type SupportedLocale,
+} from '@polar-sh/i18n'
+import { headers } from 'next/headers'
+
+function getLocaleFromAcceptLanguage(
+ acceptLanguage: string | null,
+): SupportedLocale {
+ if (!acceptLanguage) return DEFAULT_LOCALE
+
+ const languages = acceptLanguage
+ .split(',')
+ .map((lang) => {
+ const [code, qValue] = lang.trim().split(';q=')
+ return {
+ code: code.split('-')[0].toLowerCase(),
+ q: qValue ? parseFloat(qValue) : 1,
+ }
+ })
+ .sort((a, b) => b.q - a.q)
+
+ for (const { code } of languages) {
+ if (SUPPORTED_LOCALES.includes(code as SupportedLocale)) {
+ return code as SupportedLocale
+ }
+ }
+
+ return DEFAULT_LOCALE
+}
+
+export async function resolveCheckoutLocale(
+ searchParamLocale?: string,
+ checkoutLocale?: string | null,
+): Promise
{
+ // 1. Query param takes priority
+ if (searchParamLocale && isSupportedLocale(searchParamLocale)) {
+ return searchParamLocale
+ }
+
+ // 2. Checkout's locale (forced or inherited from customer)
+ if (checkoutLocale && isSupportedLocale(checkoutLocale)) {
+ return checkoutLocale
+ }
+
+ // 3. Accept-Language header
+ const headersList = await headers()
+ const acceptLanguage = headersList.get('accept-language')
+
+ return getLocaleFromAcceptLanguage(acceptLanguage)
+}
diff --git a/clients/packages/checkout/package.json b/clients/packages/checkout/package.json
index 4315dd8a4f..c31daa1152 100644
--- a/clients/packages/checkout/package.json
+++ b/clients/packages/checkout/package.json
@@ -50,6 +50,7 @@
"access": "public"
},
"dependencies": {
+ "@polar-sh/i18n": "workspace:^",
"@polar-sh/sdk": "^0.42.1",
"@polar-sh/ui": "workspace:^",
"event-source-plus": "^0.1.15",
diff --git a/clients/packages/checkout/src/components/AmountLabel.tsx b/clients/packages/checkout/src/components/AmountLabel.tsx
index d1fc83e0a2..af3162f9d7 100644
--- a/clients/packages/checkout/src/components/AmountLabel.tsx
+++ b/clients/packages/checkout/src/components/AmountLabel.tsx
@@ -1,3 +1,4 @@
+import { getTranslations, type SupportedLocale } from '@polar-sh/i18n'
import type { SubscriptionRecurringInterval } from '@polar-sh/sdk/models/components/subscriptionrecurringinterval'
import { useMemo } from 'react'
@@ -9,6 +10,7 @@ interface AmountLabelProps {
currency: string
interval?: SubscriptionRecurringInterval | null
intervalCount?: number | null
+ locale?: SupportedLocale
}
const AmountLabel: React.FC = ({
@@ -16,14 +18,23 @@ const AmountLabel: React.FC = ({
currency,
interval,
intervalCount,
+ locale = 'en',
}) => {
+ const t = useMemo(() => getTranslations(locale), [locale])
+
const intervalDisplay = useMemo(() => {
if (!interval) {
return ''
}
- const formatted = formatRecurringInterval(interval, intervalCount, 'short')
+ const formatted = formatRecurringInterval(
+ interval,
+ intervalCount,
+ 'short',
+ t.pricing.interval,
+ locale,
+ )
return formatted ? ` / ${formatted}` : ''
- }, [interval, intervalCount])
+ }, [interval, intervalCount, t.pricing.interval, locale])
const minimumFractionDigits = useMemo(
// Show 0 decimals if a round number, show default decimals (2 for USD) otherwise
diff --git a/clients/packages/checkout/src/components/CheckoutForm.tsx b/clients/packages/checkout/src/components/CheckoutForm.tsx
index 7226a07a71..d863509c56 100644
--- a/clients/packages/checkout/src/components/CheckoutForm.tsx
+++ b/clients/packages/checkout/src/components/CheckoutForm.tsx
@@ -1,5 +1,10 @@
'use client'
+import {
+ DEFAULT_LOCALE,
+ getTranslations,
+ type SupportedLocale,
+} from '@polar-sh/i18n'
import { CountryAlpha2Input } from '@polar-sh/sdk/models/components/addressinput'
import type { CheckoutConfirmStripe } from '@polar-sh/sdk/models/components/checkoutconfirmstripe'
import type { CheckoutPublic } from '@polar-sh/sdk/models/components/checkoutpublic'
@@ -94,6 +99,7 @@ interface BaseCheckoutFormProps {
disabled?: boolean
isUpdatePending?: boolean
themePreset: ThemingPresetProps
+ locale?: SupportedLocale
}
const BaseCheckoutForm = ({
@@ -107,7 +113,9 @@ const BaseCheckoutForm = ({
isUpdatePending,
children,
themePreset: themePresetProps,
+ locale = DEFAULT_LOCALE,
}: React.PropsWithChildren) => {
+ const t = useMemo(() => getTranslations(locale), [locale])
const interval = hasProductCheckout(checkout)
? hasLegacyRecurringPrices(checkout.prices[checkout.product.id])
? checkout.productPrice.recurringInterval
@@ -271,6 +279,19 @@ const BaseCheckoutForm = ({
}
}, [checkout, resetField])
+ // Sync locale to checkout if it differs from the resolved locale (e.g., from querystring)
+ // Type casts needed until @polar-sh/sdk is updated with locale field
+ useEffect(() => {
+ if (
+ locale &&
+ locale !== (checkout as CheckoutPublic & { locale?: string }).locale
+ ) {
+ update({ locale } as CheckoutUpdatePublic).catch(() => {})
+ }
+ // Only run on mount - we don't want to re-sync if checkout updates
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
const formattedDiscountDuration = useMemo(() => {
if (!checkout.discount) {
return ''
@@ -321,23 +342,23 @@ const BaseCheckoutForm = ({
const totalLabel = useMemo(() => {
if (interval) {
const formatted = formatRecurringInterval(interval, intervalCount, 'long')
- return `Every ${formatted}`
+ return `${t.pricing.every} ${formatted}`
}
- return 'Total'
- }, [interval, intervalCount])
+ return t.pricing.total
+ }, [interval, intervalCount, t])
const checkoutLabel = useMemo(() => {
if (checkout.activeTrialInterval) {
- return `Start Trial`
+ return t.buttons.startTrial
}
if (checkout.isPaymentFormRequired) {
- return interval ? 'Subscribe' : 'Pay'
+ return interval ? t.buttons.subscribe : t.buttons.pay
}
- return 'Submit'
- }, [checkout, interval])
+ return t.buttons.submit
+ }, [checkout, interval, t])
return (
@@ -352,11 +373,11 @@ const BaseCheckoutForm = ({
control={control}
name="customerEmail"
rules={{
- required: 'This field is required',
+ required: t.form.required,
}}
render={({ field }) => (
- Email
+ {t.form.email}
- Cardholder name
+ {t.form.cardholderName}
-
- I'm purchasing as a business
-
+ {t.form.businessPurchase}
- Business name
+ {t.form.businessName}
Billing address
+ {t.form.billingAddress}
{isDisplayedField(checkout.billingAddressFields.line1) && (
(
@@ -471,7 +490,7 @@ const BaseCheckoutForm = ({
- Tax ID
+ {t.form.taxId}
- Optional
+ {t.form.optional}
@@ -665,7 +690,7 @@ const BaseCheckoutForm = ({
size="sm"
onClick={addTaxID}
>
- Apply
+ {t.form.apply}
)}
{validTaxID && (
@@ -695,9 +720,9 @@ const BaseCheckoutForm = ({
render={({ field }) => (
- Discount code
+ {t.form.discountCode}
- Optional
+ {t.form.optional}
@@ -723,7 +748,7 @@ const BaseCheckoutForm = ({
size="sm"
onClick={addDiscountCode}
>
- Apply
+ {t.form.apply}
)}
{checkoutDiscounted && (
@@ -752,9 +777,7 @@ const BaseCheckoutForm = ({
control={control}
name={`customFieldData.${customField.slug}`}
rules={{
- required: required
- ? 'This field is required'
- : undefined,
+ required: required ? t.form.required : undefined,
}}
render={({ field }) => (
{checkout.currency ? (
<>
-
+
@@ -792,7 +816,7 @@ const BaseCheckoutForm = ({
checkout.discountAmount % 100 === 0 ? 0 : 2,
)}
-
+
{formatCurrencyNumber(
checkout.netAmount,
checkout.currency,
@@ -802,7 +826,7 @@ const BaseCheckoutForm = ({
)}
-
+
{checkout.taxAmount !== null
? formatCurrencyNumber(
checkout.taxAmount,
@@ -819,6 +843,7 @@ const BaseCheckoutForm = ({
currency={checkout.currency}
interval={interval}
intervalCount={intervalCount}
+ locale={locale}
/>
{formattedDiscountDuration && (
@@ -828,19 +853,25 @@ const BaseCheckoutForm = ({