44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<!-- pages/join.vue -->
|
|
<template>
|
|
<UContainer class="py-12">
|
|
<UForm :state="form" @submit="handleSubmit">
|
|
<!-- Step 1: Basic Info -->
|
|
<UFormGroup label="Email" name="email">
|
|
<UInput v-model="form.email" type="email" />
|
|
</UFormGroup>
|
|
|
|
<!-- 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>
|
|
const form = reactive({
|
|
email: "",
|
|
name: "",
|
|
circle: "community",
|
|
contribution: "15",
|
|
});
|
|
|
|
// Load Helcim.js
|
|
onMounted(() => {
|
|
const script = document.createElement("script");
|
|
script.src = "https://secure.helcim.app/helcim-pay.js";
|
|
document.head.appendChild(script);
|
|
});
|
|
</script>
|