Is hutopy finally trilangual

frontend/src/views/PaymentFailed.vue

@@ -5,7 +5,7 @@
       <p>{{ t('message') }}</p>
       <div class="card-actions">
         <button class="action-button" @click="goBack()">
-          {{ t('continue') }}
+          {{ t('retry') }}
         </button>
       </div>
     </div>
@@ -14,11 +14,11 @@
 
 <script setup>
 import { useRouter, useRoute } from 'vue-router';
-import { useTranslations } from '@/translations/translations';
+import { useI18n } from 'vue-i18n';
 
 const router = useRouter();
 const route = useRoute();
-const t = useTranslations();
+const { t } = useI18n();
 
 function goBack() {
   const returnUrl = route.query.returnUrl;
@@ -30,6 +30,26 @@ function goBack() {
 }
 </script>
 
+<i18n>
+{
+  "en": {
+    "title": "Payment Failed",
+    "message": "We couldn't process your payment.",
+    "retry": "Try Again"
+  },
+  "fr": {
+    "title": "Échec du paiement",
+    "message": "Nous n'avons pas pu traiter votre paiement.",
+    "retry": "Réessayer"
+  },
+  "es": {
+    "title": "Pago fallido",
+    "message": "No pudimos procesar su pago.",
+    "retry": "Intentar de nuevo"
+  }
+}
+</i18n>
+
 <style scoped>
 .container {
   @apply min-h-screen;