Servers new purchase flow (#3719)

* New purchase flow for servers, region selector, etc. * Lint * Lint * Fix expanding total
2025-06-03 09:20:53 -07:00
parent 7223c2b197
commit c0accb42fa
43 changed files with 3021 additions and 800 deletions
--- a/packages/assets/icons/cpu.svg
+++ b/packages/assets/icons/cpu.svg
@@ -1,14 +1 @@
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="absolute right-8 top-8 size-8"
->
-<path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
-/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu-icon lucide-cpu"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
--- a/packages/assets/icons/database.svg
+++ b/packages/assets/icons/database.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database-icon lucide-database"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
--- a/packages/assets/icons/memory-stick.svg
+++ b/packages/assets/icons/memory-stick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-memory-stick-icon lucide-memory-stick"><path d="M6 19v-3"/><path d="M10 19v-3"/><path d="M14 19v-3"/><path d="M18 19v-3"/><path d="M8 11V9"/><path d="M16 11V9"/><path d="M12 11V9"/><path d="M2 15h20"/><path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"/></svg>
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -77,6 +77,7 @@ import _CopyrightIcon from './icons/copyright.svg?component'
 import _CrownIcon from './icons/crown.svg?component'
 import _CurrencyIcon from './icons/currency.svg?component'
 import _DashboardIcon from './icons/dashboard.svg?component'
+import _DatabaseIcon from './icons/database.svg?component'
 import _DownloadIcon from './icons/download.svg?component'
 import _DropdownIcon from './icons/dropdown.svg?component'
 import _EditIcon from './icons/edit.svg?component'
@@ -125,6 +126,7 @@ import _LogOutIcon from './icons/log-out.svg?component'
 import _MailIcon from './icons/mail.svg?component'
 import _ManageIcon from './icons/manage.svg?component'
 import _MaximizeIcon from './icons/maximize.svg?component'
+import _MemoryStickIcon from './icons/memory-stick.svg?component'
 import _MessageIcon from './icons/message.svg?component'
 import _MicrophoneIcon from './icons/microphone.svg?component'
 import _MinimizeIcon from './icons/minimize.svg?component'
@@ -295,6 +297,7 @@ export const CopyrightIcon = _CopyrightIcon
 export const CrownIcon = _CrownIcon
 export const CurrencyIcon = _CurrencyIcon
 export const DashboardIcon = _DashboardIcon
+export const DatabaseIcon = _DatabaseIcon
 export const DownloadIcon = _DownloadIcon
 export const DropdownIcon = _DropdownIcon
 export const EditIcon = _EditIcon
@@ -344,6 +347,7 @@ export const LogOutIcon = _LogOutIcon
 export const MailIcon = _MailIcon
 export const ManageIcon = _ManageIcon
 export const MaximizeIcon = _MaximizeIcon
+export const MemoryStickIcon = _MemoryStickIcon
 export const MessageIcon = _MessageIcon
 export const MicrophoneIcon = _MicrophoneIcon
 export const MinimizeIcon = _MinimizeIcon
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -200,6 +200,8 @@ html {
  --color-platform-sponge: #f9e580;

  --hover-brightness: 1.25;
+
+  --experimental-color-button-bg: #33363d;
 }

 .oled-mode {
@@ -257,7 +259,7 @@ html {
 }

 .dark-experiments {
-  --color-button-bg: #33363d;
+  --color-button-bg: var(--experimental-color-button-bg);
 }

 .dark-mode:not(.oled-mode),
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -11,10 +11,12 @@
  },
  "devDependencies": {
    "@formatjs/cli": "^6.2.12",
+    "@stripe/stripe-js": "^7.3.1",
    "@vintl/unplugin": "^1.5.1",
    "@vintl/vintl": "^4.4.1",
    "eslint": "^8.57.0",
    "eslint-config-custom": "workspace:*",
+    "stripe": "^18.1.1",
    "tsconfig": "workspace:*",
    "typescript": "^5.4.5",
    "vue": "^3.5.13",
--- a/packages/ui/src/components/base/RadioButtons.vue
+++ b/packages/ui/src/components/base/RadioButtons.vue
@@ -3,9 +3,9 @@
    <button
      v-for="(item, index) in items"
      :key="`radio-button-${index}`"
-      class="p-0 py-2 px-2 border-0 flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+      class="p-0 py-2 px-2 border-0 font-medium flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
      :class="{
-        'text-contrast font-medium bg-button-bg': selected === item,
+        'text-contrast bg-button-bg': selected === item,
        'text-primary bg-transparent': selected !== item,
      }"
      @click="selected = item"
--- a/packages/ui/src/components/billing/AddPaymentMethod.vue
+++ b/packages/ui/src/components/billing/AddPaymentMethod.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createStripeElements } from '@modrinth/utils'
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
+import { loadStripe, type Stripe as StripsJs, type StripeElements } from '@stripe/stripe-js'
+
+const emit = defineEmits<{
+  (e: 'startLoading' | 'stopLoading'): void
+}>()
+
+export type SetupIntentResponse = {
+  client_secret: string
+}
+
+export type AddPaymentMethodProps = {
+  publishableKey: string
+  createSetupIntent: () => Promise<SetupIntentResponse>
+  returnUrl: string
+  onError: (error: Error) => void
+}
+
+const props = defineProps<AddPaymentMethodProps>()
+
+const elementsLoaded = ref<0 | 1 | 2>(0)
+const stripe = ref<StripsJs>()
+const elements = ref<StripeElements>()
+const error = ref(false)
+
+function handleError(error: Error) {
+  props.onError(error)
+  error.value = true
+}
+
+async function reload(paymentMethods: Stripe.PaymentMethod[]) {
+  try {
+    elementsLoaded.value = 0
+    error.value = false
+
+    const result = await props.createSetupIntent()
+
+    stripe.value = await loadStripe(props.publishableKey)
+    const {
+      elements: newElements,
+      addressElement,
+      paymentElement,
+    } = createStripeElements(stripe.value, paymentMethods, {
+      clientSecret: result.client_secret,
+    })
+
+    elements.value = newElements
+    paymentElement.on('ready', () => {
+      elementsLoaded.value += 1
+    })
+    addressElement.on('ready', () => {
+      elementsLoaded.value += 1
+    })
+  } catch (err) {
+    handleError(err)
+  }
+}
+
+async function submit(): Promise<boolean> {
+  emit('startLoading')
+
+  const result = await stripe.value.confirmSetup({
+    elements: elements.value,
+    confirmParams: {
+      return_url: props.returnUrl,
+    },
+  })
+
+  console.log(result)
+
+  const { error } = result
+
+  emit('stopLoading')
+  if (error && error.type !== 'validation_error') {
+    handleError(error.message)
+    return false
+  } else if (!error) {
+    return true
+  }
+}
+
+defineExpose({
+  reload,
+  submit,
+})
+</script>
+
+<template>
+  <div class="min-h-[16rem] flex flex-col gap-2 justify-center items-center">
+    <div v-show="elementsLoaded < 2">
+      <ModalLoadingIndicator :error="error">
+        Loading...
+        <template #error> Error loading Stripe payment UI. </template>
+      </ModalLoadingIndicator>
+    </div>
+    <div class="w-full">
+      <div id="address-element"></div>
+      <div id="payment-element" class="mt-4"></div>
+    </div>
+  </div>
+</template>
--- a/packages/ui/src/components/billing/AddPaymentMethodModal.vue
+++ b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from '../index'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import AddPaymentMethod from './AddPaymentMethod.vue'
+import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
+import { commonMessages } from '../../utils'
+import { PlusIcon, XIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const addPaymentMethod = useTemplateRef<InstanceType<typeof AddPaymentMethod>>('addPaymentMethod')
+
+const props = defineProps<AddPaymentMethodProps>()
+const loading = ref(false)
+
+async function open(paymentMethods: Stripe.PaymentMethod[]) {
+  modal.value?.show()
+  await nextTick()
+  await addPaymentMethod.value?.reload(paymentMethods)
+}
+
+const messages = defineMessages({
+  addingPaymentMethod: {
+    id: 'modal.add-payment-method.title',
+    defaultMessage: 'Adding a payment method',
+  },
+  paymentMethodAdd: {
+    id: 'modal.add-payment-method.action',
+    defaultMessage: 'Add payment method',
+  },
+})
+
+defineExpose({
+  show: open,
+})
+</script>
+
+<template>
+  <NewModal ref="modal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">
+        {{ formatMessage(messages.addingPaymentMethod) }}
+      </span>
+    </template>
+    <div class="w-[40rem] max-w-full">
+      <AddPaymentMethod
+        ref="addPaymentMethod"
+        :publishable-key="props.publishableKey"
+        :return-url="props.returnUrl"
+        :create-setup-intent="props.createSetupIntent"
+        :on-error="props.onError"
+        @start-loading="loading = true"
+        @stop-loading="loading = false"
+      />
+      <div class="input-group mt-auto pt-4">
+        <ButtonStyled color="brand">
+          <button :disabled="loading" @click="addPaymentMethod.submit()">
+            <PlusIcon />
+            {{ formatMessage(messages.paymentMethodAdd) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modal.hide()">
+            <XIcon />
+            {{ formatMessage(commonMessages.cancelButton) }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
--- a/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue
+++ b/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Accordion from '../base/Accordion.vue'
+import { formatPrice } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+import { SpinnerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const { locale } = useVIntl()
+
+export type BillingItem = {
+  title: string
+  amount: number
+}
+
+const props = defineProps<{
+  period?: string
+  currency: string
+  total: number
+  billingItems: BillingItem[]
+  loading?: boolean
+}>()
+
+const periodSuffix = computed(() => {
+  return props.period ? ` / ${props.period}` : ''
+})
+</script>
+<template>
+  <Accordion
+    class="rounded-2xl overflow-hidden bg-bg"
+    button-class="bg-transparent p-0 w-full p-4 active:scale-[0.98] transition-transform duration-100"
+  >
+    <template #title>
+      <div class="w-full flex items-center justify-between">
+        <div class="flex items-center gap-2 text-contrast font-bold">Total</div>
+        <div class="text-right mr-1">
+          <span class="text-primary font-bold">
+            <template v-if="loading">
+              <SpinnerIcon class="animate-spin size-4" />
+            </template>
+            <template v-else> {{ formatPrice(locale, total, currency) }} </template
+            ><span class="text-xs text-secondary">{{ periodSuffix }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <div class="p-4 flex flex-col gap-4 bg-table-alternateRow">
+      <div
+        v-for="{ title, amount } in billingItems"
+        :key="title"
+        class="flex items-center justify-between"
+      >
+        <div class="font-semibold">
+          {{ title }}
+        </div>
+        <div class="text-right">
+          <template v-if="loading">
+            <SpinnerIcon class="animate-spin size-4" />
+          </template>
+          <template v-else> {{ formatPrice(locale, amount, currency) }} </template
+          ><span class="text-xs text-secondary">{{ periodSuffix }}</span>
+        </div>
+      </div>
+    </div>
+  </Accordion>
+</template>
--- a/packages/ui/src/components/billing/FormattedPaymentMethod.vue
+++ b/packages/ui/src/components/billing/FormattedPaymentMethod.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
+import { commonMessages, paymentMethodMessages } from '../../utils'
+import type Stripe from 'stripe'
+import { useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+defineProps<{
+  method: Stripe.PaymentMethod
+}>()
+</script>
+
+<template>
+  <template v-if="'type' in method">
+    <CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
+    <CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
+    <PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
+    <UnknownIcon v-else class="size-[1.5em]" />
+    <span v-if="method.type === 'card' && 'card' in method && method.card">
+      {{
+        formatMessage(commonMessages.paymentMethodCardDisplay, {
+          card_brand:
+            formatMessage(paymentMethodMessages[method.card.brand]) ??
+            formatMessage(paymentMethodMessages.unknown),
+          last_four: method.card.last4,
+        })
+      }}
+    </span>
+    <template v-else>
+      {{
+        formatMessage(paymentMethodMessages[method.type]) ??
+        formatMessage(paymentMethodMessages.unknown)
+      }}
+    </template>
+
+    <span v-if="method.type === 'cashapp' && 'cashapp' in method && method.cashapp">
+      ({{ method.cashapp.cashtag }})
+    </span>
+    <span v-else-if="method.type === 'paypal' && 'paypal' in method && method.paypal">
+      ({{ method.paypal.payer_email }})
+    </span>
+  </template>
+</template>
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, computed, useTemplateRef, nextTick } from 'vue'
+import NewModal from '../modal/NewModal.vue'
+import { type MessageDescriptor, useVIntl, defineMessage } from '@vintl/vintl'
+import {
+  ChevronRightIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  XIcon,
+  CheckCircleIcon,
+} from '@modrinth/assets'
+import type {
+  CreatePaymentIntentRequest,
+  CreatePaymentIntentResponse,
+  ServerBillingInterval,
+  ServerPlan,
+  ServerRegion,
+  ServerStockRequest,
+  UpdatePaymentIntentRequest,
+  UpdatePaymentIntentResponse,
+} from '../../utils/billing'
+import { ButtonStyled } from '../index'
+import type Stripe from 'stripe'
+
+import { commonMessages } from '../../utils'
+import RegionSelector from './ServersPurchase1Region.vue'
+import PaymentMethodSelector from './ServersPurchase2PaymentMethod.vue'
+import ConfirmPurchase from './ServersPurchase3Review.vue'
+import { useStripe } from '../../composables/stripe'
+
+const { formatMessage } = useVIntl()
+
+export type RegionPing = {
+  region: string
+  ping: number
+}
+
+const props = defineProps<{
+  publishableKey: string
+  returnUrl: string
+  paymentMethods: Stripe.PaymentMethod[]
+  customer: Stripe.Customer
+  currency: string
+  pings: RegionPing[]
+  regions: ServerRegion[]
+  availableProducts: ServerPlan[]
+  refreshPaymentMethods: () => Promise<void>
+  fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
+  initiatePayment: (
+    body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
+  ) => Promise<UpdatePaymentIntentResponse | CreatePaymentIntentResponse>
+}>()
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const selectedPlan = ref<ServerPlan>()
+const selectedInterval = ref<ServerBillingInterval>()
+const loading = ref(false)
+
+const {
+  initializeStripe,
+  selectPaymentMethod,
+  primaryPaymentMethodId,
+  loadStripeElements,
+  selectedPaymentMethod,
+  inputtedPaymentMethod,
+  createNewPaymentMethod,
+  loadingElements,
+  loadingElementsFailed,
+  tax,
+  total,
+  paymentMethodLoading,
+  reloadPaymentIntent,
+  hasPaymentMethod,
+  submitPayment,
+} = useStripe(
+  props.publishableKey,
+  props.customer,
+  props.paymentMethods,
+  props.clientSecret,
+  props.currency,
+  selectedPlan,
+  selectedInterval,
+  props.initiatePayment,
+  console.error,
+)
+
+const selectedRegion = ref<string>()
+const customServer = ref<boolean>(false)
+const acceptedEula = ref<boolean>(false)
+
+type Step = 'region' | 'payment' | 'review'
+
+const steps: Step[] = ['region', 'payment', 'review']
+
+const titles: Record<Step, MessageDescriptor> = {
+  region: defineMessage({ id: 'servers.purchase.step.region.title', defaultMessage: 'Region' }),
+  payment: defineMessage({
+    id: 'servers.purchase.step.payment.title',
+    defaultMessage: 'Payment method',
+  }),
+  review: defineMessage({ id: 'servers.purchase.step.review.title', defaultMessage: 'Review' }),
+}
+
+const currentRegion = computed(() => {
+  return props.regions.find((region) => region.shortcode === selectedRegion.value)
+})
+
+const currentPing = computed(() => {
+  return props.pings.find((ping) => ping.region === currentRegion.value?.shortcode)?.ping
+})
+
+const currentStep = ref<Step>()
+
+const currentStepIndex = computed(() => steps.indexOf(currentStep.value))
+const previousStep = computed(() => steps[steps.indexOf(currentStep.value) - 1])
+const nextStep = computed(() => steps[steps.indexOf(currentStep.value) + 1])
+
+const canProceed = computed(() => {
+  switch (currentStep.value) {
+    case 'region':
+      return selectedRegion.value && selectedPlan.value && selectedInterval.value
+    case 'payment':
+      return selectedPaymentMethod.value || !loadingElements.value
+    case 'review':
+      return acceptedEula.value && hasPaymentMethod.value
+    default:
+      return false
+  }
+})
+
+async function beforeProceed(step: string) {
+  switch (step) {
+    case 'region':
+      return true
+    case 'payment':
+      await initializeStripe()
+
+      if (primaryPaymentMethodId.value) {
+        const paymentMethod = await props.paymentMethods.find(
+          (x) => x.id === primaryPaymentMethodId.value,
+        )
+        await selectPaymentMethod(paymentMethod)
+        await setStep('review', true)
+        return true
+      }
+      return true
+    case 'review':
+      if (selectedPaymentMethod.value) {
+        return true
+      } else {
+        const token = await createNewPaymentMethod()
+        return !!token
+      }
+  }
+}
+
+async function afterProceed(step: string) {
+  switch (step) {
+    case 'region':
+      break
+    case 'payment':
+      await loadStripeElements()
+      break
+    case 'review':
+      break
+  }
+}
+
+async function setStep(step: Step, skipValidation = false) {
+  if (!step) {
+    await submitPayment(props.returnUrl)
+    return
+  }
+
+  if (!canProceed.value || skipValidation) {
+    return
+  }
+
+  if (await beforeProceed(step)) {
+    currentStep.value = step
+    await nextTick()
+
+    await afterProceed(step)
+  }
+}
+
+function begin(interval: ServerBillingInterval, plan?: ServerPlan) {
+  loading.value = false
+  selectedPlan.value = plan
+  selectedInterval.value = interval
+  customServer.value = !selectedPlan.value
+  selectedPaymentMethod.value = undefined
+  currentStep.value = steps[0]
+  modal.value?.show()
+}
+
+defineExpose({
+  show: begin,
+})
+</script>
+<template>
+  <NewModal ref="modal">
+    <template #title>
+      <div class="flex items-center gap-1 font-bold text-secondary">
+        <template v-for="(title, id, index) in titles" :key="id">
+          <button
+            v-if="index < currentStepIndex"
+            class="bg-transparent active:scale-95 font-bold text-secondary p-0"
+            @click="setStep(id)"
+          >
+            {{ formatMessage(title) }}
+          </button>
+          <span
+            v-else
+            :class="{
+              'text-contrast': index === currentStepIndex,
+            }"
+          >
+            {{ formatMessage(title) }}
+          </span>
+          <ChevronRightIcon
+            v-if="index < steps.length - 1"
+            class="h-5 w-5 text-secondary"
+            stroke-width="3"
+          />
+        </template>
+      </div>
+    </template>
+    <div class="w-[40rem] max-w-full">
+      <RegionSelector
+        v-if="currentStep === 'region'"
+        v-model:region="selectedRegion"
+        v-model:plan="selectedPlan"
+        :regions="regions"
+        :pings="pings"
+        :custom="customServer"
+        :available-products="availableProducts"
+        :fetch-stock="fetchStock"
+      />
+      <PaymentMethodSelector
+        v-else-if="currentStep === 'payment' && selectedPlan && selectedInterval"
+        :payment-methods="paymentMethods"
+        :selected="selectedPaymentMethod"
+        :loading-elements="loadingElements"
+        :loading-elements-failed="loadingElementsFailed"
+        @select="selectPaymentMethod"
+      />
+      <ConfirmPurchase
+        v-else-if="
+          currentStep === 'review' &&
+          hasPaymentMethod &&
+          selectedRegion &&
+          selectedInterval &&
+          selectedPlan
+        "
+        ref="currentStepRef"
+        v-model:interval="selectedInterval"
+        v-model:accepted-eula="acceptedEula"
+        :currency="currency"
+        :plan="selectedPlan"
+        :region="regions.find((x) => x.shortcode === selectedRegion)"
+        :ping="currentPing"
+        :loading="paymentMethodLoading"
+        :selected-payment-method="selectedPaymentMethod || inputtedPaymentMethod"
+        :tax="tax"
+        :total="total"
+        :on-error="console.error"
+        @change-payment-method="setStep('payment')"
+        @reload-payment-intent="reloadPaymentIntent"
+        @error="console.error"
+      />
+      <div v-else>Something went wrong</div>
+    </div>
+    <div class="flex gap-2 justify-between mt-4">
+      <ButtonStyled>
+        <button v-if="previousStep" @click="previousStep && setStep(previousStep)">
+          <LeftArrowIcon /> {{ formatMessage(commonMessages.backButton) }}
+        </button>
+        <button v-else @click="modal?.hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled color="brand">
+        <button :disabled="!canProceed" @click="setStep(nextStep)">
+          <template v-if="currentStep === 'review'">
+            <CheckCircleIcon />
+            Subscribe
+          </template>
+          <template v-else>
+            {{ formatMessage(commonMessages.nextButton) }} <RightArrowIcon />
+          </template>
+        </button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
--- a/packages/ui/src/components/billing/PaymentMethodOption.vue
+++ b/packages/ui/src/components/billing/PaymentMethodOption.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { RadioButtonIcon, RadioButtonCheckedIcon, SpinnerIcon } from '@modrinth/assets'
+import type Stripe from 'stripe'
+import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
+
+const emit = defineEmits<{
+  (e: 'select'): void
+}>()
+
+withDefaults(
+  defineProps<{
+    item: Stripe.PaymentMethod | undefined
+    selected: boolean
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  },
+)
+</script>
+
+<template>
+  <button
+    class="flex items-center w-full gap-2 border-none p-3 text-primary rounded-xl transition-all duration-200 hover:bg-button-bg hover:brightness-[--hover-brightness] active:scale-[0.98] hover:cursor-pointer"
+    :class="selected ? 'bg-button-bg' : 'bg-transparent'"
+    @click="emit('select')"
+  >
+    <RadioButtonCheckedIcon v-if="selected" class="size-6 text-brand" />
+    <RadioButtonIcon v-else class="size-6 text-secondary" />
+
+    <template v-if="item === undefined">
+      <span>New payment method</span>
+    </template>
+    <FormattedPaymentMethod v-else-if="item" :method="item" />
+    <SpinnerIcon v-if="loading" class="ml-auto size-4 text-secondary animate-spin" />
+  </button>
+</template>
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import ServersRegionButton from './ServersRegionButton.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
+import { onMounted, ref, computed, watch } from 'vue'
+import type { RegionPing } from './ModrinthServersPurchaseModal.vue'
+import type { ServerPlan, ServerRegion, ServerStockRequest } from '../../utils/billing'
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
+import Slider from '../base/Slider.vue'
+import { SpinnerIcon, XIcon, InfoIcon } from '@modrinth/assets'
+import ServersSpecs from './ServersSpecs.vue'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  regions: ServerRegion[]
+  pings: RegionPing[]
+  fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
+  custom: boolean
+  availableProducts: ServerPlan[]
+}>()
+
+const loading = ref(true)
+const checkingCustomStock = ref(false)
+const selectedPlan = defineModel<ServerPlan>('plan')
+const selectedRegion = defineModel<string>('region')
+
+const selectedRam = ref<number>(-1)
+
+const ramOptions = computed(() => {
+  return props.availableProducts
+    .map((product) => (product.metadata.ram ?? 0) / 1024)
+    .filter((x) => x > 0)
+})
+
+const minRam = computed(() => {
+  return Math.min(...ramOptions.value)
+})
+const maxRam = computed(() => {
+  return Math.max(...ramOptions.value)
+})
+
+const lowestProduct = computed(() => {
+  return (
+    props.availableProducts.find(
+      (product) => (product.metadata.ram ?? 0) / 1024 === minRam.value,
+    ) ?? props.availableProducts[0]
+  )
+})
+
+function updateRamStock(regionToCheck: string, newRam: number) {
+  if (newRam > 0) {
+    checkingCustomStock.value = true
+    const plan = props.availableProducts.find(
+      (product) => (product.metadata.ram ?? 0) / 1024 === newRam,
+    )
+    if (plan) {
+      const region = props.regions.find((region) => region.shortcode === regionToCheck)
+      if (region) {
+        props
+          .fetchStock(region, {
+            cpu: plan.metadata.cpu ?? 0,
+            memory_mb: plan.metadata.ram ?? 0,
+            swap_mb: plan.metadata.swap ?? 0,
+            storage_mb: plan.metadata.storage ?? 0,
+          })
+          .then((stock: number) => {
+            if (stock > 0) {
+              selectedPlan.value = plan
+            } else {
+              selectedPlan.value = undefined
+            }
+          })
+          .finally(() => {
+            checkingCustomStock.value = false
+          })
+      } else {
+        checkingCustomStock.value = false
+      }
+    }
+  }
+}
+
+watch(selectedRam, (newRam: number) => {
+  updateRamStock(selectedRegion.value, newRam)
+})
+
+watch(selectedRegion, (newRegion: number) => {
+  updateRamStock(newRegion, selectedRam.value)
+})
+
+const currentStock = ref<{ [region: string]: number }>({})
+const bestPing = ref<string>()
+
+const messages = defineMessages({
+  prompt: {
+    id: 'servers.region.prompt',
+    defaultMessage: 'Where would you like your server to be located?',
+  },
+  regionUnsupported: {
+    id: 'servers.region.region-unsupported',
+    defaultMessage: `Region not listed? <link>Let us know where you'd like to see Modrinth Servers next!</link>`,
+  },
+  customPrompt: {
+    id: 'servers.region.custom.prompt',
+    defaultMessage: `How much RAM do you want your server to have?`,
+  },
+})
+
+async function updateStock() {
+  currentStock.value = {}
+  const capacityChecks = props.regions.map((region) =>
+    props.fetchStock(
+      region,
+      selectedPlan.value
+        ? {
+            cpu: selectedPlan.value?.metadata.cpu ?? 0,
+            memory_mb: selectedPlan.value?.metadata.ram ?? 0,
+            swap_mb: selectedPlan.value?.metadata.swap ?? 0,
+            storage_mb: selectedPlan.value?.metadata.storage ?? 0,
+          }
+        : {
+            cpu: lowestProduct.value.metadata.cpu ?? 0,
+            memory_mb: lowestProduct.value.metadata.ram ?? 0,
+            swap_mb: lowestProduct.value.metadata.swap ?? 0,
+            storage_mb: lowestProduct.value.metadata.storage ?? 0,
+          },
+    ),
+  )
+  const results = await Promise.all(capacityChecks)
+  results.forEach((result, index) => {
+    currentStock.value[props.regions[index].shortcode] = result
+  })
+}
+
+onMounted(() => {
+  // auto select region with lowest ping
+  loading.value = true
+  bestPing.value =
+    props.pings.length > 0
+      ? props.pings.reduce((acc, cur) => {
+          return acc.ping < cur.ping ? acc : cur
+        })?.region
+      : undefined
+  selectedRam.value = minRam.value
+  checkingCustomStock.value = true
+  updateStock().then(() => {
+    const firstWithStock = props.regions.find((region) => currentStock.value[region.shortcode] > 0)
+    let stockedRegion = selectedRegion.value
+    if (!stockedRegion) {
+      stockedRegion =
+        bestPing.value && currentStock.value[bestPing.value] > 0
+          ? bestPing.value
+          : firstWithStock?.shortcode
+    }
+    selectedRegion.value = stockedRegion
+    updateRamStock(stockedRegion, minRam.value)
+    loading.value = false
+  })
+})
+</script>
+
+<template>
+  <ModalLoadingIndicator v-if="loading" class="flex py-40 justify-center">
+    Checking availability...
+  </ModalLoadingIndicator>
+  <template v-else>
+    <h2 class="mt-0 mb-4 text-xl font-bold text-contrast">
+      {{ formatMessage(messages.prompt) }}
+    </h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <ServersRegionButton
+        v-for="region in regions"
+        :key="region.shortcode"
+        v-model="selectedRegion"
+        :region="region"
+        :out-of-stock="currentStock[region.shortcode] === 0"
+        :ping="pings.find((p) => p.region === region.shortcode)?.ping"
+        :best-ping="bestPing === region.shortcode"
+      />
+    </div>
+    <div class="mt-3 text-sm">
+      <IntlFormatted :message-id="messages.regionUnsupported">
+        <template #link="{ children }">
+          <a
+            class="text-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://surveys.modrinth.com/servers-region-waitlist"
+          >
+            <component :is="() => children" />
+          </a>
+        </template>
+      </IntlFormatted>
+    </div>
+    <template v-if="custom">
+      <h2 class="mt-4 mb-2 text-xl font-bold text-contrast">
+        {{ formatMessage(messages.customPrompt) }}
+      </h2>
+      <div>
+        <Slider v-model="selectedRam" :min="minRam" :max="maxRam" :step="2" unit="GB" />
+        <div class="bg-bg rounded-xl p-4 mt-4 text-secondary">
+          <div v-if="checkingCustomStock" class="flex gap-2 items-center">
+            <SpinnerIcon class="size-5 shrink-0 animate-spin" /> Checking availability...
+          </div>
+          <div v-else-if="selectedPlan">
+            <ServersSpecs
+              class="!flex-row justify-between"
+              :ram="selectedPlan.metadata.ram ?? 0"
+              :storage="selectedPlan.metadata.storage ?? 0"
+              :cpus="selectedPlan.metadata.cpu ?? 0"
+            />
+          </div>
+          <div v-else class="flex gap-2 items-center">
+            <XIcon class="size-5 shrink-0 text-red" /> Sorry, we don't have any plans available with
+            {{ selectedRam }} GB RAM in this region.
+          </div>
+        </div>
+        <div class="flex gap-2 mt-2">
+          <InfoIcon class="hidden sm:block shrink-0 mt-1" />
+          <span class="text-sm text-secondary">
+            Storage and shared CPU count are currently not configurable independently, and are based
+            on the amount of RAM you select.
+          </span>
+        </div>
+      </div>
+    </template>
+  </template>
+</template>
--- a/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
+++ b/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type Stripe from 'stripe'
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import PaymentMethodOption from './PaymentMethodOption.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  (e: 'select', paymentMethod: Stripe.PaymentMethod | undefined): void
+}>()
+
+defineProps<{
+  paymentMethods: Stripe.PaymentMethod[]
+  selected?: Stripe.PaymentMethod
+  loadingElements: boolean
+  loadingElementsFailed: boolean
+}>()
+
+const messages = defineMessages({
+  prompt: {
+    id: 'servers.purchase.step.payment.prompt',
+    defaultMessage: 'Select a payment method',
+  },
+  description: {
+    id: 'servers.purchase.step.payment.description',
+    defaultMessage: `You won't be charged yet.`,
+  },
+})
+</script>
+
+<template>
+  <h2 class="mt-0 mb-1 text-xl font-bold text-contrast">
+    {{ formatMessage(messages.prompt) }}
+  </h2>
+  <p class="mt-0 mb-4 text-secondary">
+    {{ formatMessage(messages.description) }}
+  </p>
+  <div class="flex flex-col gap-1">
+    <PaymentMethodOption
+      v-for="method in paymentMethods"
+      :key="method.id"
+      :item="method"
+      :selected="selected?.id === method.id"
+      @select="emit('select', method)"
+    />
+    <PaymentMethodOption
+      :loading="false"
+      :item="undefined"
+      :selected="selected === undefined"
+      @select="emit('select', undefined)"
+    />
+  </div>
+  <div
+    v-show="selected === undefined"
+    class="min-h-[16rem] flex flex-col gap-2 mt-2 p-4 bg-table-alternateRow rounded-xl justify-center items-center"
+  >
+    <div v-show="loadingElements">
+      <ModalLoadingIndicator :error="loadingElementsFailed">
+        Loading...
+        <template #error> Error loading Stripe payment UI. </template>
+      </ModalLoadingIndicator>
+    </div>
+    <div class="w-full">
+      <div id="address-element"></div>
+      <div id="payment-element" class="mt-4"></div>
+    </div>
+  </div>
+</template>
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ServerBillingInterval, ServerPlan, ServerRegion } from '../../utils/billing'
+import TagItem from '../base/TagItem.vue'
+import ServersSpecs from './ServersSpecs.vue'
+import { formatPrice, getPingLevel } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+import { regionOverrides } from '../../utils/regions'
+import {
+  EditIcon,
+  RightArrowIcon,
+  SignalIcon,
+  SpinnerIcon,
+  XIcon,
+  RadioButtonIcon,
+  RadioButtonCheckedIcon,
+  ExternalIcon,
+} from '@modrinth/assets'
+import type Stripe from 'stripe'
+import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import Checkbox from '../base/Checkbox.vue'
+import ExpandableInvoiceTotal from './ExpandableInvoiceTotal.vue'
+
+const vintl = useVIntl()
+const { locale, formatMessage } = vintl
+
+const emit = defineEmits<{
+  (e: 'changePaymentMethod' | 'reloadPaymentIntent'): void
+}>()
+
+const props = defineProps<{
+  plan: ServerPlan
+  region: ServerRegion
+  tax?: number
+  total?: number
+  currency: string
+  ping?: number
+  loading?: boolean
+  selectedPaymentMethod: Stripe.PaymentMethod | undefined
+  onError: (error: Error) => void
+}>()
+
+const interval = defineModel<ServerBillingInterval>('interval')
+const acceptedEula = defineModel<boolean>('accepted-eula', { required: true })
+
+const prices = computed(() => {
+  return props.plan.prices.find((x) => x.currency_code === props.currency)
+})
+
+const planName = computed(() => {
+  if (!props.plan || !props.plan.metadata || props.plan.metadata.type !== 'pyro') return 'Unknown'
+  const ram = props.plan.metadata.ram
+  if (ram === 4096) return 'Small'
+  if (ram === 6144) return 'Medium'
+  if (ram === 8192) return 'Large'
+  return 'Custom'
+})
+
+const flag = computed(
+  () =>
+    regionOverrides[props.region.shortcode]?.flag ??
+    `https://flagcdn.com/${props.region.country_code}.svg`,
+)
+const overrideTitle = computed(() => regionOverrides[props.region.shortcode]?.name)
+const title = computed(() =>
+  overrideTitle.value ? formatMessage(overrideTitle.value) : props.region.display_name,
+)
+const locationSubtitle = computed(() =>
+  overrideTitle.value ? props.region.display_name : undefined,
+)
+const pingLevel = computed(() => getPingLevel(props.ping ?? 0))
+
+const period = computed(() => {
+  if (interval.value === 'monthly') return 'month'
+  if (interval.value === 'quarterly') return '3 months'
+  if (interval.value === 'yearly') return 'year'
+  return '???'
+})
+
+const monthsInInterval: Record<ServerBillingInterval, number> = {
+  monthly: 1,
+  quarterly: 3,
+  yearly: 12,
+}
+
+function setInterval(newInterval: ServerBillingInterval) {
+  interval.value = newInterval
+  emit('reloadPaymentIntent')
+}
+</script>
+
+<template>
+  <div class="grid sm:grid-cols-[3fr_2fr] gap-4">
+    <div class="bg-table-alternateRow p-4 rounded-2xl">
+      <div class="flex items-center gap-2 mb-3">
+        <LazyUiServersModrinthServersIcon class="flex h-5 w-fit" />
+        <TagItem>{{ planName }}</TagItem>
+      </div>
+      <div>
+        <ServersSpecs
+          v-if="plan.metadata && plan.metadata.ram && plan.metadata.storage && plan.metadata.cpu"
+          class="!grid sm:grid-cols-2"
+          :ram="plan.metadata.ram"
+          :storage="plan.metadata.storage"
+          :cpus="plan.metadata.cpu"
+        />
+      </div>
+    </div>
+    <div
+      class="bg-table-alternateRow p-4 rounded-2xl flex flex-col gap-2 items-center justify-center"
+    >
+      <img
+        v-if="flag"
+        class="aspect-[16/10] max-w-12 w-full object-cover rounded-md border-1 border-button-border border-solid"
+        :src="flag"
+        alt=""
+        aria-hidden="true"
+      />
+      <span class="font-semibold">
+        {{ title }}
+      </span>
+      <span class="text-xs flex items-center gap-1 text-secondary font-medium">
+        <template v-if="locationSubtitle">
+          <span>
+            {{ locationSubtitle }}
+          </span>
+          <span v-if="ping !== -1">•</span>
+        </template>
+        <template v-if="ping !== -1">
+          <SignalIcon
+            v-if="ping"
+            aria-hidden="true"
+            :style="`--_signal-${pingLevel}: ${pingLevel <= 2 ? 'var(--color-red)' : pingLevel <= 4 ? 'var(--color-orange)' : 'var(--color-green)'}`"
+            stroke-width="3px"
+            class="shrink-0"
+          />
+          <SpinnerIcon v-else class="animate-spin" />
+          <template v-if="ping"> {{ ping }}ms </template>
+          <span v-else> Testing connection... </span>
+        </template>
+      </span>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 gap-2">
+    <button
+      :class="
+        interval === 'monthly'
+          ? 'bg-button-bg border-transparent'
+          : 'bg-transparent  border-button-border'
+      "
+      class="mt-4 rounded-2xl active:scale-[0.98] transition-transform duration-100 border-2 border-solid p-4 flex items-center gap-2"
+      @click="setInterval('monthly')"
+    >
+      <RadioButtonCheckedIcon v-if="interval === 'monthly'" class="size-6 text-brand" />
+      <RadioButtonIcon v-else class="size-6 text-secondary" />
+      <div class="flex flex-col items-start gap-1 font-medium text-primary">
+        <span class="flex items-center gap-1" :class="{ 'text-contrast': interval === 'monthly' }"
+          >Pay monthly</span
+        >
+        <span class="text-sm text-secondary flex items-center gap-1"
+          >{{ formatPrice(locale, prices?.prices.intervals['monthly'], currency, true) }} /
+          month</span
+        >
+      </div>
+    </button>
+    <button
+      :class="
+        interval === 'yearly'
+          ? 'bg-button-bg border-transparent'
+          : 'bg-transparent  border-button-border'
+      "
+      class="mt-4 rounded-2xl active:scale-[0.98] transition-transform duration-100 border-2 border-solid p-4 flex items-center gap-2"
+      @click="setInterval('yearly')"
+    >
+      <RadioButtonCheckedIcon v-if="interval === 'yearly'" class="size-6 text-brand" />
+      <RadioButtonIcon v-else class="size-6 text-secondary" />
+      <div class="flex flex-col items-start gap-1 font-medium text-primary">
+        <span class="flex items-center gap-1" :class="{ 'text-contrast': interval === 'yearly' }"
+          >Pay yearly
+          <span class="text-xs font-bold text-brand px-1.5 py-0.5 rounded-full bg-brand-highlight"
+            >{{ interval === 'quarterly' ? 'Saving' : 'Save' }} 16%</span
+          ></span
+        >
+        <span class="text-sm text-secondary flex items-center gap-1"
+          >{{
+            formatPrice(
+              locale,
+              prices?.prices?.intervals?.['yearly'] ?? 0 / monthsInInterval['yearly'],
+              currency,
+              true,
+            )
+          }}
+          / month</span
+        >
+      </div>
+    </button>
+  </div>
+  <div class="mt-2">
+    <ExpandableInvoiceTotal
+      :period="period"
+      :currency="currency"
+      :loading="loading"
+      :total="total ?? -1"
+      :billing-items="
+        total !== undefined && tax !== undefined
+          ? [
+              {
+                title: `Modrinth Servers (${planName})`,
+                amount: total - tax,
+              },
+              {
+                title: 'Tax',
+                amount: tax,
+              },
+            ]
+          : []
+      "
+    />
+  </div>
+  <div class="mt-2 flex items-center pl-4 pr-2 py-3 bg-bg rounded-2xl gap-2 text-secondary">
+    <template v-if="selectedPaymentMethod">
+      <FormattedPaymentMethod :method="selectedPaymentMethod" />
+    </template>
+    <template v-else>
+      <div class="flex items-center gap-2 text-red">
+        <XIcon />
+        No payment method selected
+      </div>
+    </template>
+    <ButtonStyled size="small" type="transparent">
+      <button class="ml-auto" @click="emit('changePaymentMethod')">
+        <template v-if="selectedPaymentMethod"> <EditIcon /> Change </template>
+        <template v-else> Select payment method <RightArrowIcon /> </template>
+      </button>
+    </ButtonStyled>
+  </div>
+  <p class="m-0 mt-4 text-sm text-secondary">
+    <span class="font-semibold"
+      >By clicking "Subscribe", you are purchasing a recurring subscription.</span
+    >
+    <br />
+    You'll be charged
+    <SpinnerIcon v-if="loading" class="animate-spin relative top-0.5 mx-2" /><template v-else>{{
+      formatPrice(locale, total, currency)
+    }}</template>
+    every {{ period }} plus applicable taxes starting today, until you cancel. You can cancel
+    anytime from your settings page.
+  </p>
+  <div class="mt-2 flex items-center gap-1 text-sm">
+    <Checkbox
+      v-model="acceptedEula"
+      label="I acknowledge that I have read and agree to the"
+      description="I acknowledge that I have read and agree to the Minecraft EULA"
+    />
+    <a
+      href="https://www.minecraft.net/en-us/eula"
+      target="_blank"
+      class="text-brand underline hover:brightness-[--hover-brightness]"
+      >Minecraft EULA<ExternalIcon class="size-3 shrink-0 ml-0.5 mb-0.5"
+    /></a>
+  </div>
+</template>
--- a/packages/ui/src/components/billing/ServersRegionButton.vue
+++ b/packages/ui/src/components/billing/ServersRegionButton.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useVIntl } from '@vintl/vintl'
+import { getPingLevel } from '@modrinth/utils'
+import { SignalIcon, SpinnerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+import type { ServerRegion } from '../../utils/billing'
+import { regionOverrides } from '../../utils/regions'
+
+const { formatMessage } = useVIntl()
+
+const currentRegion = defineModel<string | undefined>({ required: true })
+
+const props = defineProps<{
+  region: ServerRegion
+  ping?: number
+  bestPing?: boolean
+  outOfStock?: boolean
+}>()
+
+const isCurrentRegion = computed(() => currentRegion.value === props.region.shortcode)
+const flag = computed(
+  () =>
+    regionOverrides[props.region.shortcode]?.flag ??
+    `https://flagcdn.com/${props.region.country_code}.svg`,
+)
+const overrideTitle = computed(() => regionOverrides[props.region.shortcode]?.name)
+const title = computed(() =>
+  overrideTitle.value ? formatMessage(overrideTitle.value) : props.region.display_name,
+)
+const locationSubtitle = computed(() =>
+  overrideTitle.value ? props.region.display_name : undefined,
+)
+const pingLevel = computed(() => getPingLevel(props.ping ?? 0))
+
+function setRegion() {
+  currentRegion.value = props.region.shortcode
+}
+</script>
+
+<template>
+  <button
+    :disabled="outOfStock"
+    class="rounded-2xl p-4 font-semibold transition-all border-2 border-solid flex flex-col items-center gap-3"
+    :class="{
+      'bg-button-bg border-transparent text-primary': !isCurrentRegion,
+      'bg-brand-highlight border-brand text-contrast': isCurrentRegion,
+      'opacity-50 cursor-not-allowed': outOfStock,
+      'hover:text-contrast active:scale-95 hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness] ':
+        !outOfStock,
+    }"
+    @click="setRegion"
+  >
+    <img
+      v-if="flag"
+      class="aspect-[16/10] max-w-16 w-full object-cover rounded-md border-1 border-solid"
+      :class="[
+        isCurrentRegion ? 'border-brand' : 'border-button-border',
+        { 'saturate-[0.25]': outOfStock },
+      ]"
+      :src="flag"
+      alt=""
+      aria-hidden="true"
+    />
+    <span class="flex flex-col gap-1 items-center">
+      <span class="flex items-center gap-1 flex-wrap justify-center">
+        {{ title }} <span v-if="outOfStock" class="text-sm text-secondary">(Out of stock)</span>
+      </span>
+      <span class="text-xs flex items-center gap-1 text-secondary font-medium">
+        <template v-if="locationSubtitle">
+          <span>
+            {{ locationSubtitle }}
+          </span>
+          <span v-if="ping !== -1">•</span>
+        </template>
+        <template v-if="ping !== -1">
+          <SignalIcon
+            v-if="ping"
+            aria-hidden="true"
+            :style="`--_signal-${pingLevel}: ${pingLevel <= 2 ? 'var(--color-red)' : pingLevel <= 4 ? 'var(--color-orange)' : 'var(--color-green)'}`"
+            stroke-width="3px"
+            class="shrink-0"
+          />
+          <SpinnerIcon v-else class="animate-spin" />
+          <span v-if="bestPing" :class="bestPing ? 'text-brand' : 'text-primary'">
+            Lowest latency ({{ ping }}ms)
+          </span>
+          <template v-else-if="ping"> {{ ping }}ms </template>
+          <span v-else> Testing connection... </span>
+        </template>
+      </span>
+    </span>
+  </button>
+</template>
--- a/packages/ui/src/components/billing/ServersSpecs.vue
+++ b/packages/ui/src/components/billing/ServersSpecs.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import AutoLink from '../base/AutoLink.vue'
+import { MemoryStickIcon, DatabaseIcon, CPUIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
+
+const emit = defineEmits<{
+  (e: 'click-bursting-link'): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    ram: number
+    storage: number
+    cpus: number
+    burstingLink?: string
+  }>(),
+  {
+    burstingLink: undefined,
+  },
+)
+
+const formattedRam = computed(() => {
+  return props.ram / 1024
+})
+
+const formattedStorage = computed(() => {
+  return props.storage / 1024
+})
+
+const sharedCpus = computed(() => {
+  return props.cpus / 2
+})
+</script>
+<template>
+  <ul class="m-0 flex list-none flex-col gap-2 px-0 text-sm leading-normal text-secondary">
+    <li class="flex items-center gap-2">
+      <MemoryStickIcon class="h-5 w-5 shrink-0" /> {{ formattedRam }} GB RAM
+    </li>
+    <li class="flex items-center gap-2">
+      <DatabaseIcon class="h-5 w-5 shrink-0" /> {{ formattedStorage }} GB Storage
+    </li>
+    <li class="flex items-center gap-2">
+      <CPUIcon class="h-5 w-5 shrink-0" /> {{ sharedCpus }} Shared CPUs
+    </li>
+    <li class="flex items-center gap-2">
+      <SparklesIcon class="h-5 w-5 shrink-0" /> Bursts up to {{ cpus }} CPUs
+      <AutoLink
+        v-if="burstingLink"
+        v-tooltip="
+          `CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info.`
+        "
+        class="flex"
+        :to="burstingLink"
+        @click="() => emit('click-bursting-link')"
+      >
+        <UnknownIcon class="h-4 w-4 text-secondary opacity-80" />
+      </AutoLink>
+    </li>
+  </ul>
+</template>
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -96,6 +96,8 @@ export { default as SearchSidebarFilter } from './search/SearchSidebarFilter.vue

 // Billing
 export { default as PurchaseModal } from './billing/PurchaseModal.vue'
+export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
+export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'

 // Version
 export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
@@ -107,3 +109,4 @@ export { default as ThemeSelector } from './settings/ThemeSelector.vue'

 // Servers
 export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
+export { default as ServersSpecs } from './billing/ServersSpecs.vue'
--- a/packages/ui/src/components/modal/ModalLoadingIndicator.vue
+++ b/packages/ui/src/components/modal/ModalLoadingIndicator.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { SpinnerIcon, XCircleIcon } from '@modrinth/assets'
+
+withDefaults(
+  defineProps<{
+    error?: boolean
+  }>(),
+  {
+    error: false,
+  },
+)
+</script>
+<template>
+  <div class="flex items-center gap-2 font-semibold" :class="error ? 'text-red' : 'animate-pulse'">
+    <XCircleIcon v-if="error" class="w-6 h-6" />
+    <SpinnerIcon v-else class="w-6 h-6 animate-spin" />
+    <slot v-if="error" name="error" />
+    <slot v-else />
+  </div>
+</template>
+<style scoped>
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    scale: 1;
+  }
+  50% {
+    scale: 0.95;
+  }
+}
+</style>
--- a/packages/ui/src/composables/stripe.ts
+++ 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<ServerPlan>,
+  interval: Ref<ServerBillingInterval>,
+  initiatePayment: (
+    body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
+  ) => Promise<CreatePaymentIntentResponse | UpdatePaymentIntentResponse>,
+) => {
+  const stripe = ref<StripeJs | null>(null)
+
+  let elements: StripeElements | undefined = undefined
+  const elementsLoaded = ref<0 | 1 | 2>(0)
+  const loadingElementsFailed = ref<boolean>(false)
+
+  const paymentMethodLoading = ref(false)
+  const loadingFailed = ref<string>()
+  const paymentIntentId = ref<string>()
+  const tax = ref<number>()
+  const total = ref<number>()
+  const confirmationToken = ref<string>()
+  const submittingPayment = ref(false)
+  const selectedPaymentMethod = ref<Stripe.PaymentMethod>()
+  const inputtedPaymentMethod = ref<Stripe.PaymentMethod>()
+
+  async function initialize() {
+    stripe.value = await loadStripe(publishableKey)
+  }
+
+  function createIntent(body: CreatePaymentIntentRequest): Promise<CreatePaymentIntentResponse> {
+    return initiatePayment(body) as Promise<CreatePaymentIntentResponse>
+  }
+
+  function updateIntent(body: UpdatePaymentIntentRequest): Promise<UpdatePaymentIntentResponse> {
+    return initiatePayment(body) as Promise<UpdatePaymentIntentResponse>
+  }
+
+  const planPrices = computed(() => {
+    return product.value.prices.find((x) => x.currency_code === currency)
+  })
+
+  const createElements: CreateElements = (options) => {
+    const styles = getComputedStyle(document.body)
+
+    if (!stripe.value) {
+      throw new Error('Stripe API not yet loaded')
+    }
+
+    elements = stripe.value.elements({
+      appearance: {
+        variables: {
+          colorPrimary: styles.getPropertyValue('--color-brand'),
+          colorBackground: styles.getPropertyValue('--experimental-color-button-bg'),
+          colorText: styles.getPropertyValue('--color-base'),
+          colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
+          colorDanger: styles.getPropertyValue('--color-red'),
+          fontFamily: styles.getPropertyValue('--font-standard'),
+          spacingUnit: '0.25rem',
+          borderRadius: '0.75rem',
+        },
+      },
+      loader: 'never',
+      ...options,
+    })
+
+    const paymentElement = elements.create('payment', {
+      layout: {
+        type: 'tabs',
+        defaultCollapsed: false,
+      },
+    })
+    paymentElement.mount('#payment-element')
+
+    const contacts: ContactOption[] = []
+
+    paymentMethods.forEach((method) => {
+      const addr = method.billing_details?.address
+      if (
+        addr &&
+        addr.line1 &&
+        addr.city &&
+        addr.postal_code &&
+        addr.country &&
+        addr.state &&
+        method.billing_details.name
+      ) {
+        contacts.push({
+          address: {
+            line1: addr.line1,
+            line2: addr.line2 ?? undefined,
+            city: addr.city,
+            state: addr.state,
+            postal_code: addr.postal_code,
+            country: addr.country,
+          },
+          name: method.billing_details.name,
+        })
+      }
+    })
+
+    const addressElement = elements.create('address', {
+      mode: 'billing',
+      contacts: contacts.length > 0 ? contacts : undefined,
+    })
+    addressElement.mount('#address-element')
+
+    return { elements, paymentElement, addressElement }
+  }
+
+  const primaryPaymentMethodId = computed<string | null>(() => {
+    if (customer && customer.invoice_settings && customer.invoice_settings.default_payment_method) {
+      const method = customer.invoice_settings.default_payment_method
+      if (typeof method === 'string') {
+        return method
+      } else {
+        return method.id
+      }
+    } else if (paymentMethods && paymentMethods[0] && paymentMethods[0].id) {
+      return paymentMethods[0].id
+    } else {
+      return null
+    }
+  })
+
+  const loadStripeElements = async () => {
+    loadingFailed.value = false
+    try {
+      if (!customer) {
+        paymentMethodLoading.value = true
+        await props.refreshPaymentMethods()
+        paymentMethodLoading.value = false
+      }
+
+      if (!selectedPaymentMethod.value) {
+        elementsLoaded.value = 0
+
+        const {
+          elements: newElements,
+          addressElement,
+          paymentElement,
+        } = createElements({
+          mode: 'payment',
+          currency: currency.toLowerCase(),
+          amount: product.value.prices.find((x) => x.currency_code === currency)?.prices.intervals[
+            interval.value
+          ],
+          paymentMethodCreation: 'manual',
+          setupFutureUsage: 'off_session',
+        })
+
+        elements = newElements
+        paymentElement.on('ready', () => {
+          elementsLoaded.value += 1
+        })
+        addressElement.on('ready', () => {
+          elementsLoaded.value += 1
+        })
+      }
+    } catch (err) {
+      loadingFailed.value = String(err)
+      console.log(err)
+    }
+  }
+
+  async function refreshPaymentIntent(id: string, confirmation: boolean) {
+    try {
+      paymentMethodLoading.value = true
+      if (!confirmation) {
+        selectedPaymentMethod.value = paymentMethods.find((x) => x.id === id)
+      }
+
+      const requestType: PaymentRequestType = confirmation
+        ? {
+            type: 'confirmation_token',
+            token: id,
+          }
+        : {
+            type: 'payment_method',
+            id: id,
+          }
+
+      const charge: ChargeRequestType = {
+        type: 'new',
+        product_id: product.value?.id,
+        interval: interval.value,
+      }
+
+      let result: BasePaymentIntentResponse
+
+      if (paymentIntentId.value) {
+        result = await updateIntent({
+          ...requestType,
+          charge,
+          existing_payment_intent: paymentIntentId.value,
+        })
+        console.log(`Updated payment intent: ${interval.value} for ${result.total}`)
+      } else {
+        ;({
+          payment_intent_id: paymentIntentId.value,
+          client_secret: clientSecret,
+          ...result
+        } = await createIntent({
+          ...requestType,
+          charge,
+        }))
+        console.log(`Created payment intent: ${interval.value} for ${result.total}`)
+      }
+
+      tax.value = result.tax
+      total.value = result.total
+
+      if (confirmation) {
+        confirmationToken.value = id
+        if (result.payment_method) {
+          inputtedPaymentMethod.value = result.payment_method
+        }
+      }
+    } catch (err) {
+      emit('error', err)
+    }
+    paymentMethodLoading.value = false
+  }
+
+  async function createConfirmationToken() {
+    if (!elements) {
+      return handlePaymentError('No elements')
+    }
+
+    const { error, confirmationToken: confirmation } = await stripe.value.createConfirmationToken({
+      elements,
+    })
+
+    if (error) {
+      emit('error', error)
+      return
+    }
+
+    return confirmation.id
+  }
+
+  function handlePaymentError(err: string | Error) {
+    paymentMethodLoading.value = false
+    emit('error', typeof err === 'string' ? new Error(err) : err)
+  }
+
+  async function createNewPaymentMethod() {
+    paymentMethodLoading.value = true
+
+    if (!elements) {
+      return handlePaymentError('No elements')
+    }
+
+    const { error: submitError } = await elements.submit()
+
+    if (submitError) {
+      return handlePaymentError(submitError)
+    }
+
+    const token = await createConfirmationToken()
+    if (!token) {
+      return handlePaymentError('Failed to create confirmation token')
+    }
+    await refreshPaymentIntent(token, true)
+
+    if (!planPrices.value) {
+      return handlePaymentError('No plan prices')
+    }
+    if (!total.value) {
+      return handlePaymentError('No total amount')
+    }
+
+    elements.update({ currency: planPrices.value.currency_code.toLowerCase(), amount: total.value })
+
+    elementsLoaded.value = 0
+    confirmationToken.value = token
+    paymentMethodLoading.value = false
+
+    return token
+  }
+
+  async function selectPaymentMethod(paymentMethod: Stripe.PaymentMethod | undefined) {
+    selectedPaymentMethod.value = paymentMethod
+    if (paymentMethod === undefined) {
+      await loadStripeElements()
+    } else {
+      refreshPaymentIntent(paymentMethod.id, false)
+    }
+  }
+
+  const loadingElements = computed(() => elementsLoaded.value < 2)
+
+  async function submitPayment(returnUrl: string) {
+    submittingPayment.value = true
+    const { error } = await stripe.value.confirmPayment({
+      clientSecret,
+      confirmParams: {
+        confirmation_token: confirmationToken.value,
+        return_url: `${returnUrl}?priceId=${product.value?.prices.find((x) => x.currency_code === currency)?.id}&plan=${interval.value}`,
+      },
+    })
+
+    if (error) {
+      props.onError(error)
+      return false
+    }
+    submittingPayment.value = false
+    return true
+  }
+
+  async function reloadPaymentIntent() {
+    console.log('selected:', selectedPaymentMethod.value)
+    console.log('token:', confirmationToken.value)
+    if (selectedPaymentMethod.value) {
+      await refreshPaymentIntent(selectedPaymentMethod.value.id, false)
+    } else if (confirmationToken.value) {
+      await refreshPaymentIntent(confirmationToken.value, true)
+    } else {
+      throw new Error('No payment method selected')
+    }
+  }
+
+  const hasPaymentMethod = computed(() => selectedPaymentMethod.value || confirmationToken.value)
+
+  return {
+    initializeStripe: initialize,
+    selectPaymentMethod,
+    reloadPaymentIntent,
+    primaryPaymentMethodId,
+    selectedPaymentMethod,
+    inputtedPaymentMethod,
+    hasPaymentMethod,
+    createNewPaymentMethod,
+    loadingElements,
+    loadingElementsFailed,
+    paymentMethodLoading,
+    loadStripeElements,
+    tax,
+    total,
+    submitPayment,
+  }
+}
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1,4 +1,7 @@
 {
+  "button.back": {
+    "defaultMessage": "Back"
+  },
  "button.cancel": {
    "defaultMessage": "Cancel"
  },
@@ -23,6 +26,9 @@
  "button.edit": {
    "defaultMessage": "Edit"
  },
+  "button.next": {
+    "defaultMessage": "Next"
+  },
  "button.open-folder": {
    "defaultMessage": "Open folder"
  },
@@ -173,6 +179,12 @@
  "label.visit-your-profile": {
    "defaultMessage": "Visit your profile"
  },
+  "modal.add-payment-method.action": {
+    "defaultMessage": "Add payment method"
+  },
+  "modal.add-payment-method.title": {
+    "defaultMessage": "Adding a payment method"
+  },
  "notification.error.title": {
    "defaultMessage": "An error occurred"
  },
@@ -485,6 +497,36 @@
  "servers.notice.undismissable": {
    "defaultMessage": "Undismissable"
  },
+  "servers.purchase.step.payment.description": {
+    "defaultMessage": "You won't be charged yet."
+  },
+  "servers.purchase.step.payment.prompt": {
+    "defaultMessage": "Select a payment method"
+  },
+  "servers.purchase.step.payment.title": {
+    "defaultMessage": "Payment method"
+  },
+  "servers.purchase.step.region.title": {
+    "defaultMessage": "Region"
+  },
+  "servers.purchase.step.review.title": {
+    "defaultMessage": "Review"
+  },
+  "servers.region.custom.prompt": {
+    "defaultMessage": "How much RAM do you want your server to have?"
+  },
+  "servers.region.europe": {
+    "defaultMessage": "Europe"
+  },
+  "servers.region.north-america": {
+    "defaultMessage": "North America"
+  },
+  "servers.region.prompt": {
+    "defaultMessage": "Where would you like your server to be located?"
+  },
+  "servers.region.region-unsupported": {
+    "defaultMessage": "Region not listed? <link>Let us know where you'd like to see Modrinth Servers next!</link>"
+  },
  "settings.account.title": {
    "defaultMessage": "Account and security"
  },
--- a/packages/ui/src/utils/billing.ts
+++ b/packages/ui/src/utils/billing.ts
@@ -0,0 +1,101 @@
+import type Stripe from 'stripe'
+
+export type ServerBillingInterval = 'monthly' | 'yearly' | 'quarterly'
+
+export interface ServerPlan {
+  id: string
+  name: string
+  description: string
+  metadata: {
+    type: string
+    ram?: number
+    cpu?: number
+    storage?: number
+    swap?: number
+  }
+  prices: {
+    id: string
+    currency_code: string
+    prices: {
+      intervals: {
+        monthly: number
+        yearly: number
+      }
+    }
+  }[]
+}
+
+export interface ServerStockRequest {
+  cpu?: number
+  memory_mb?: number
+  swap_mb?: number
+  storage_mb?: number
+}
+
+export interface ServerRegion {
+  shortcode: string
+  country_code: string
+  display_name: string
+  lat: number
+  lon: number
+}
+
+/*
+  Request types
+*/
+export type PaymentMethodRequest = {
+  type: 'payment_method'
+  id: string
+}
+
+export type ConfirmationTokenRequest = {
+  type: 'confirmation_token'
+  token: string
+}
+
+export type PaymentRequestType = PaymentMethodRequest | ConfirmationTokenRequest
+
+export type ChargeRequestType =
+  | {
+      type: 'existing'
+      id: string
+    }
+  | {
+      type: 'new'
+      product_id: string
+      interval?: ServerBillingInterval
+    }
+
+export type CreatePaymentIntentRequest = PaymentRequestType & {
+  charge: ChargeRequestType
+  metadata?: {
+    type: 'pyro'
+    server_name?: string
+    source: {
+      loader: string
+      game_version?: string
+      loader_version?: string
+    }
+  }
+}
+
+export type UpdatePaymentIntentRequest = CreatePaymentIntentRequest & {
+  existing_payment_intent: string
+}
+
+/*
+  Response types
+*/
+export type BasePaymentIntentResponse = {
+  price_id: string
+  tax: number
+  total: number
+  payment_method: Stripe.PaymentMethod
+}
+
+export type UpdatePaymentIntentResponse = BasePaymentIntentResponse
+
+export type CreatePaymentIntentResponse = BasePaymentIntentResponse & {
+  payment_intent_id: string
+  client_secret: string
+}
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -17,6 +17,14 @@ export const commonMessages = defineMessages({
    id: 'button.continue',
    defaultMessage: 'Continue',
  },
+  nextButton: {
+    id: 'button.next',
+    defaultMessage: 'Next',
+  },
+  backButton: {
+    id: 'button.back',
+    defaultMessage: 'Back',
+  },
  copyIdButton: {
    id: 'button.copy-id',
    defaultMessage: 'Copy ID',
@@ -205,6 +213,10 @@ export const commonMessages = defineMessages({
    id: 'label.visit-your-profile',
    defaultMessage: 'Visit your profile',
  },
+  paymentMethodCardDisplay: {
+    id: 'omorphia.component.purchase_modal.payment_method_card_display',
+    defaultMessage: '{card_brand} ending in {last_four}',
+  },
 })

 export const commonSettingsMessages = defineMessages({
@@ -245,3 +257,51 @@ export const commonSettingsMessages = defineMessages({
    defaultMessage: 'Billing and subscriptions',
  },
 })
+
+export const paymentMethodMessages = defineMessages({
+  visa: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.visa',
+    defaultMessage: 'Visa',
+  },
+  amex: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amex',
+    defaultMessage: 'American Express',
+  },
+  diners: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.diners',
+    defaultMessage: 'Diners Club',
+  },
+  discover: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.discover',
+    defaultMessage: 'Discover',
+  },
+  eftpos: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
+    defaultMessage: 'EFTPOS',
+  },
+  jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
+  mastercard: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
+    defaultMessage: 'MasterCard',
+  },
+  unionpay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
+    defaultMessage: 'UnionPay',
+  },
+  paypal: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
+    defaultMessage: 'PayPal',
+  },
+  cashapp: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
+    defaultMessage: 'Cash App',
+  },
+  amazon_pay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
+    defaultMessage: 'Amazon Pay',
+  },
+  unknown: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
+    defaultMessage: 'Unknown payment method',
+  },
+})
--- a/packages/ui/src/utils/regions.ts
+++ b/packages/ui/src/utils/regions.ts
@@ -0,0 +1,16 @@
+import { defineMessage, type MessageDescriptor } from '@vintl/vintl'
+
+export const regionOverrides = {
+  'us-vin': {
+    name: defineMessage({ id: 'servers.region.north-america', defaultMessage: 'North America' }),
+    flag: 'https://flagcdn.com/us.svg',
+  },
+  'eu-lim': {
+    name: defineMessage({ id: 'servers.region.europe', defaultMessage: 'Europe' }),
+    flag: 'https://flagcdn.com/eu.svg',
+  },
+  'de-fra': {
+    name: defineMessage({ id: 'servers.region.europe', defaultMessage: 'Europe' }),
+    flag: 'https://flagcdn.com/eu.svg',
+  },
+} satisfies Record<string, { name?: MessageDescriptor; flag?: string }>
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -5,5 +5,6 @@
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "noImplicitAny": false
-  }
+  },
+  "types": ["@stripe/stripe-js"]
 }
--- a/packages/utils/billing.ts
+++ b/packages/utils/billing.ts
@@ -61,16 +61,26 @@ export const getCurrency = (userCountry) => {
  return countryCurrency[userCountry] ?? 'USD'
 }

-export const formatPrice = (locale, price, currency) => {
-  const formatter = new Intl.NumberFormat(locale, {
+export const formatPrice = (locale, price, currency, trimZeros = false) => {
+  let formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
  })

  const maxDigits = formatter.resolvedOptions().maximumFractionDigits
-
  const convertedPrice = price / Math.pow(10, maxDigits)

+  let minimumFractionDigits = maxDigits
+
+  if (trimZeros && Number.isInteger(convertedPrice)) {
+    minimumFractionDigits = 0
+  }
+
+  formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits,
+  })
  return formatter.format(convertedPrice)
 }

@@ -87,13 +97,13 @@ export const createStripeElements = (stripe, paymentMethods, options) => {
    appearance: {
      variables: {
        colorPrimary: styles.getPropertyValue('--color-brand'),
-        colorBackground: styles.getPropertyValue('--color-bg'),
+        colorBackground: styles.getPropertyValue('--experimental-color-button-bg'),
        colorText: styles.getPropertyValue('--color-base'),
        colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
        colorDanger: styles.getPropertyValue('--color-red'),
        fontFamily: styles.getPropertyValue('--font-standard'),
        spacingUnit: '0.25rem',
-        borderRadius: '1rem',
+        borderRadius: '0.75rem',
      },
    },
    loader: 'never',
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -341,3 +341,17 @@ export const getArrayOrString = (x: string[] | string): string[] => {
    return x
  }
 }
+
+export function getPingLevel(ping: number) {
+  if (ping < 150) {
+    return 5
+  } else if (ping < 300) {
+    return 4
+  } else if (ping < 600) {
+    return 3
+  } else if (ping < 1000) {
+    return 2
+  } else {
+    return 1
+  }
+}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database-icon lucide-database"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-memory-stick-icon lucide-memory-stick"><path d="M6 19v-3"/><path d="M10 19v-3"/><path d="M14 19v-3"/><path d="M18 19v-3"/><path d="M8 11V9"/><path d="M16 11V9"/><path d="M12 11V9"/><path d="M2 15h20"/><path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"/></svg>