<template>
  <div class="Recharge__container-rechageBtn" @click="handleRecharge">
    Recharge Now
  </div>
</template>

<script setup>
import { ref } from 'vue'

const payID = ref(21)
const amount = ref(1000)

const handleRecharge = async () => {
  try {
    const token = localStorage.getItem('token')
    const res = await fetch(`/wepay.php?token=${token}`)
    const data = await res.json()

    if (data.code === 1 && data.payment_url) {
      window.location.href = data.payment_url
    } else {
      alert(data.msg || 'FastZix Payment Failed.')
    }
  } catch (err) {
    alert('Error while connecting to FastZix')
    console.error(err)
  }
}
</script>

<style scoped>
.Recharge__container-rechageBtn {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}
</style>
