63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<!-- pages/join.vue -->
|
|
<template>
|
|
<UContainer class="py-12">
|
|
<UForm :state="form" @submit="handleSubmit">
|
|
<!-- Step 1: Basic Info -->
|
|
<UFormField label="Email" name="email">
|
|
<UInput v-model="form.email" type="email" />
|
|
</UFormField>
|
|
|
|
<!-- Step 2: Choose Circle -->
|
|
<URadioGroup
|
|
v-model="form.circle"
|
|
:options="circleOptions"
|
|
name="circle" />
|
|
|
|
<!-- Step 3: Choose Contribution -->
|
|
<URadioGroup
|
|
v-model="form.contribution"
|
|
:options="contributionOptions"
|
|
name="contribution" />
|
|
|
|
<!-- Step 4: Helcim Checkout -->
|
|
<div id="helcim-payment"></div>
|
|
|
|
<UButton type="submit" block> Complete Membership </UButton>
|
|
</UForm>
|
|
</UContainer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted } from 'vue';
|
|
|
|
const form = reactive({
|
|
email: "",
|
|
name: "",
|
|
circle: "community",
|
|
contribution: "15",
|
|
});
|
|
|
|
const circleOptions = [
|
|
{ value: 'community', label: 'Community Circle - $15/month' },
|
|
{ value: 'support', label: 'Support Circle - $25/month' },
|
|
{ value: 'sustaining', label: 'Sustaining Circle - $50/month' }
|
|
];
|
|
|
|
const contributionOptions = [
|
|
{ value: '15', label: '$15/month' },
|
|
{ value: '25', label: '$25/month' },
|
|
{ value: '50', label: '$50/month' },
|
|
{ value: 'custom', label: 'Custom amount' }
|
|
];
|
|
|
|
const handleSubmit = () => {
|
|
console.log('Form submitted:', form);
|
|
};
|
|
|
|
// Load Helcim.js
|
|
onMounted(() => {
|
|
const script = document.createElement("script");
|
|
script.src = "https://secure.helcim.app/helcim-pay.js";
|
|
document.head.appendChild(script);
|
|
});
|
|
</script>
|