+
+
+
+
+
+
diff --git a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
index 7c08bdf9e..8aa18f3e1 100644
--- a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
@@ -1,9 +1,9 @@
-
+
+
+
+
+
+
+
+
+
+
+ Modpack
+
+ Update available
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Something went wrong while loading your modpack.
++ {{ versionsError || currentVersionError }} +
+
+
+
+
+
+ or
+
+
+
+
+
+
+
+
+ Platform
+Your server's platform is the software that runs mods and plugins.
+
+
+
+
+
- Out of stock!
- Only {{ capacity }} left in stock!
-
+
-
- (path: string, options: PyroFetchOptions =
const fullUrl = override?.url
? `https://${override.url}/${path.replace(/^\//, "")}`
- : `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`;
+ : version === 0
+ ? `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`
+ : `${base}/v${version}/${path.replace(/^\//, "")}`;
type HeadersRecord = Record;
diff --git a/apps/frontend/src/composables/pyroServers.ts b/apps/frontend/src/composables/pyroServers.ts
index 9c758e110..ac55ac47d 100644
--- a/apps/frontend/src/composables/pyroServers.ts
+++ b/apps/frontend/src/composables/pyroServers.ts
@@ -330,6 +330,9 @@ interface General {
token: string;
instance: string;
};
+ flows?: {
+ intro?: boolean;
+ };
}
interface Allocation {
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 5e1ecbe68..6c261632c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -159,7 +159,7 @@
"message": "Subscribe to updates about Modrinth"
},
"auth.welcome.description": {
- "message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
+ "message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with awazing mods."
},
"auth.welcome.label.tos": {
"message": "By creating an account, you have agreed to Modrinth's Terms and Privacy Policy ."
@@ -350,11 +350,14 @@
"layout.banner.add-email.button": {
"message": "Visit account settings"
},
+ "layout.banner.add-email.description": {
+ "message": "For security reasons, Modrinth needs you to register an email address to your account."
+ },
"layout.banner.build-fail.description": {
"message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
},
"layout.banner.build-fail.title": {
- "message": "Error generating state from API when building"
+ "message": "Error generating state from API when building."
},
"layout.banner.staging.description": {
"message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
@@ -365,12 +368,12 @@
"layout.banner.subscription-payment-failed.button": {
"message": "Update billing info"
},
- "layout.banner.subscription-payment-failed.title": {
- "message": "Billing action required"
- },
"layout.banner.subscription-payment-failed.description": {
"message": "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!"
},
+ "layout.banner.subscription-payment-failed.title": {
+ "message": "Billing action required."
+ },
"layout.banner.verify-email.action": {
"message": "Re-send verification email"
},
@@ -1047,32 +1050,23 @@
"message": "No notices"
},
"servers.plan.large.description": {
- "message": "Ideal for larger communities, modpacks, and heavy modding."
+ "message": "Ideal for 15-25 players, modpacks, or heavy modding."
},
"servers.plan.large.name": {
"message": "Large"
},
- "servers.plan.large.symbol": {
- "message": "L"
- },
"servers.plan.medium.description": {
- "message": "Great for modded multiplayer and small communities."
+ "message": "Great for 6–15 players and multiple mods."
},
"servers.plan.medium.name": {
"message": "Medium"
},
- "servers.plan.medium.symbol": {
- "message": "M"
- },
"servers.plan.small.description": {
- "message": "Perfect for vanilla multiplayer, small friend groups, SMPs, and light modding."
+ "message": "Perfect for 1–5 friends with a few light mods."
},
"servers.plan.small.name": {
"message": "Small"
},
- "servers.plan.small.symbol": {
- "message": "S"
- },
"settings.billing.modal.cancel.action": {
"message": "Cancel subscription"
},
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index e96a8c8f4..9030c0e01 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -4,27 +4,28 @@
data-pyro
class="servers-hero relative isolate -mt-44 h-full min-h-screen pt-8"
>
-
await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
"
- :fetch-payment-data="fetchPaymentData"
+ :available-products="pyroProducts"
:on-error="handleError"
:customer="customer"
:payment-methods="paymentMethods"
+ :currency="selectedCurrency"
:return-url="`${config.public.siteUrl}/servers/manage`"
:server-name="`${auth?.user?.username}'s server`"
- :fetch-capacity-statuses="fetchCapacityStatuses"
:out-of-stock-url="outOfStockUrl"
- @hidden="handleModalHidden"
+ :fetch-capacity-statuses="fetchCapacityStatuses"
+ :pings="regionPings"
+ :regions="regions"
+ :refresh-payment-methods="fetchPaymentData"
+ :fetch-stock="fetchStock"
/>
-
-
-
-
+
-
+
+
diff --git a/apps/frontend/src/composables/country.ts b/apps/frontend/src/composables/country.ts
index 0d3dd6a81..cde074ff0 100644
--- a/apps/frontend/src/composables/country.ts
+++ b/apps/frontend/src/composables/country.ts
@@ -24,6 +24,7 @@ export const useUserCountry = () => {
if (import.meta.client) {
onMounted(() => {
if (fromServer.value) return;
+ // @ts-expect-error - ignore TS not knowing about navigator.userLanguage
const lang = navigator.language || navigator.userLanguage || "";
const region = lang.split("-")[1];
if (region) {
diff --git a/apps/frontend/src/composables/pyroFetch.ts b/apps/frontend/src/composables/pyroFetch.ts
index 1c2e45a98..210135bec 100644
--- a/apps/frontend/src/composables/pyroFetch.ts
+++ b/apps/frontend/src/composables/pyroFetch.ts
@@ -49,7 +49,9 @@ export async function usePyroFetch
+
-
{{ formatMessage(plans[plan].name) }}
- {{ formatMessage(plans[plan].symbol) }}
+ Most popular
{{ formatMessage(plans[plan].description) }}
-
-
- {{ formattedRam }} GB RAM
- -{{ formattedStorage }} GB SSD
- -{{ sharedCpus }} Shared CPUs
-
-
-
-
- ${{ price / 100 }}/month
+ {{ formatPrice(locale, price / billingMonths, currency, true) }}
+ {{ isUsa ? "" : currency }}
+
+ / month, billed {{ interval }}
+
+ {{ formatMessage(plans[plan].description) }}
-
-
-
-
-
-
-
-
-
- Server Locations
-
- - Coast-to-Coast Coverage -
-
-
-
-
-
-
-
-
-
-
- - US Coverage -
-- With strategically placed servers in New York, California, Texas, Florida, and - Washington, we ensure low latency connections for players across North America. - Each location is equipped with high-performance hardware and DDoS protection. -
-
-
-
-
-
-
-
- - Global Expansion -
-- We're expanding to Europe and Asia-Pacific regions soon, bringing Modrinth's - seamless hosting experience worldwide. Join our Discord to stay updated on new - region launches. -
-- Start your server on Modrinth + There's a server for everyone
-- {{ - isAtCapacity && !loggedOut - ? "We are currently at capacity. Please try again later." - : "There's a plan for everyone! Choose the one that fits your needs." - }} -
++ Available in North America and Europe for wide coverage. +
--
+
-
+
{{ formattedRam }} GB RAM +
+ -
+
{{ formattedStorage }} GB Storage +
+ -
+
{{ sharedCpus }} Shared CPUs +
+ -
+
Bursts up to {{ cpus }} CPUs + + ++
+
+
+
+ Pay monthly
+ Pay quarterly
+ Pay yearly
+
+
+
+
+ Saving 16% with quarterly billing!
+
+
+
+
+
+ Saving 16% with yearly billing!
+
+
+
+
+
+
-
@@ -666,7 +611,7 @@
>
Build your own
+Know exactly what you need?
- If you're a more technical server administrator, you can pick your own RAM and storage - options. + Pick a customized plan with just the specs you need.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ formatMessage(messages.paymentMethodTitle) }}
@@ -590,9 +564,8 @@ + + +
+
+
diff --git a/packages/ui/src/components/billing/AddPaymentMethodModal.vue b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
new file mode 100644
index 000000000..8175501e9
--- /dev/null
+++ b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+ Loading...
+ Error loading Stripe payment UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+ {{ formatMessage(title) }}
+
+
+
+
+
+ Something went wrong
+
+
+
+
+
+
+
+
+
+ + {{ formatMessage(messages.prompt) }} +
+
+
+
+
+
+
+
+
+
+ + {{ formatMessage(messages.customPrompt) }} +
+
+
+
+
+
diff --git a/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue b/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
new file mode 100644
index 000000000..f13a31ca9
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ formatMessage(messages.prompt) }} +
++ {{ formatMessage(messages.description) }} +
+
+
+
+
+
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
new file mode 100644
index 000000000..40f7d712e
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -0,0 +1,264 @@
+
+
+
+
+
+ Loading...
+ Error loading Stripe payment UI.
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ planName }}
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+ {{ locationSubtitle }}
+
+ •
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ By clicking "Subscribe", you are purchasing a recurring subscription.
+
+ You'll be charged
+
+
+
diff --git a/packages/ui/src/components/billing/ServersRegionButton.vue b/packages/ui/src/components/billing/ServersRegionButton.vue
new file mode 100644
index 000000000..bf364f85a
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersRegionButton.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
diff --git a/packages/ui/src/components/billing/ServersSpecs.vue b/packages/ui/src/components/billing/ServersSpecs.vue
new file mode 100644
index 000000000..f9a581242
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersSpecs.vue
@@ -0,0 +1,60 @@
+
+
+ -
+
+
+
+
diff --git a/packages/ui/src/composables/stripe.ts b/packages/ui/src/composables/stripe.ts
new file mode 100644
index 000000000..12144bb4a
--- /dev/null
+++ b/packages/ui/src/composables/stripe.ts
@@ -0,0 +1,376 @@
+import type Stripe from 'stripe'
+import type { StripeElementsOptionsMode } from '@stripe/stripe-js/dist/stripe-js/elements-group'
+import {
+ type Stripe as StripeJs,
+ loadStripe,
+ type StripeAddressElement,
+ type StripeElements,
+ type StripePaymentElement,
+} from '@stripe/stripe-js'
+import { computed, ref, type Ref } from 'vue'
+import type { ContactOption } from '@stripe/stripe-js/dist/stripe-js/elements/address'
+import type {
+ ServerPlan,
+ BasePaymentIntentResponse,
+ ChargeRequestType,
+ CreatePaymentIntentRequest,
+ CreatePaymentIntentResponse,
+ PaymentRequestType,
+ ServerBillingInterval,
+ UpdatePaymentIntentRequest,
+ UpdatePaymentIntentResponse,
+} from '../../utils/billing'
+
+export type CreateElements = (
+ paymentMethods: Stripe.PaymentMethod[],
+ options: StripeElementsOptionsMode,
+) => {
+ elements: StripeElements
+ paymentElement: StripePaymentElement
+ addressElement: StripeAddressElement
+}
+
+export const useStripe = (
+ publishableKey: string,
+ customer: Stripe.Customer,
+ paymentMethods: Stripe.PaymentMethod[],
+ clientSecret: string,
+ currency: string,
+ product: Ref