Donation with Stripe

.env.example

@@ -19,4 +19,11 @@ NUXT_AUTH0_CLIENT_ID=
 # In your Auth0 dashboard: Application > Basic Information > Client Secret
 NUXT_AUTH0_CLIENT_SECRET=
 # In your Auth0 dashboard: Application > Basic Information > Domain
-NUXT_AUTH0_ISSUER=https://**********.us.auth0.com
+NUXT_AUTH0_ISSUER=https://**********.us.auth0.com
+
+# Stripe
+#
+# Developers > API Keys > Secret key
+NUXT_STRIPE_SECRET_KEY=sk_**********
+# URL to redirect the user after successful checkout
+NUXT_STRIPE_SUCCESS_URL=http://localhost:3000

components/Donation.vue

@@ -5,12 +5,69 @@
       Se você gosta de carros elétricos e o nosso conteúdo é útil para você, considere fazer uma doação
       para continuarmos expandindo o site com conteúdos de qualidade ainda melhor!
     </p>
-    <a href="https://stripe.com/donate-link" target="_blank" class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition-colors">
+
+    <div class="mb-6">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        @click="selectAmount(preset)"
+        :class="['px-4 py-2 rounded-full mr-2', { 'bg-blue-600': amount === preset, 'bg-gray-600': amount !== preset }]"
+        class="text-white hover:bg-blue-500 transition-colors"
+      >
+        R$ {{ preset / 100 }}
+      </button>
+    </div>
+
+    <button
+      @click="generatePaymentLink"
+      class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition-colors"
+    >
       Quero ajudar!
-    </a>
+    </button>
+
+    <!-- Aviso de erro -->
+    <p v-if="errorMessage" class="text-red-500 mt-4">{{ errorMessage }}</p>
   </aside>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const amount = ref<number | null>(null)
+const customAmount = ref<number | null>(null)
+const errorMessage = ref<string | null>(null)
+const presets = [500, 1000, 5000, 10000]
+
+const selectAmount = (preset: number) => {
+  amount.value = preset
+  customAmount.value = null
+  errorMessage.value = null
+}
+
+const generatePaymentLink = async () => {
+  const selectedAmount = customAmount.value ? customAmount.value * 100 : amount.value
+
+  if (!selectedAmount || selectedAmount <= 0) {
+    errorMessage.value = 'Por favor, insira ou selecione um valor válido.'
+    return
+  }
+
+  errorMessage.value = null
+
+  try {
+    const response = await fetch('/api/donation', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ amount: selectedAmount })
+    })
+
+    const { url } = await response.json()
 
+    window.location.href = url
+  } catch (error) {
+    console.error('Erro ao criar o link de pagamento:', error)
+  }
+}
 </script>

nuxt.config.ts

@@ -95,6 +95,11 @@ export default defineNuxtConfig({
 			clientId: "",
 			clientSecret: "",
 		},
+
+		stripe: {
+  		secretKey: "",
+  		successUrl: "",
+  	},
 
 		// Configurations inside the `public` object are available to the client.
 		// Eg. in the browser