Implement multi-step registration process: Add step indicators, error handling, and payment processing for membership registration. Enhance form validation and user feedback with success and error messages. Refactor state management for improved clarity and maintainability.

server/api/helcim/initialize-payment.post.js

@@ -0,0 +1,62 @@
+// Initialize HelcimPay.js session
+const HELCIM_API_BASE = 'https://api.helcim.com/v2'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const config = useRuntimeConfig(event)
+    const body = await readBody(event)
+    
+    // Debug log the request body
+    console.log('Initialize payment request body:', body)
+    
+    // Validate required fields
+    if (!body.customerId) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Customer ID is required'
+      })
+    }
+
+    const helcimToken = config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN
+    
+    // Initialize HelcimPay.js session
+    const response = await fetch(`${HELCIM_API_BASE}/helcim-pay/initialize`, {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'content-type': 'application/json',
+        'api-token': helcimToken
+      },
+      body: JSON.stringify({
+        paymentType: 'verify', // For card verification
+        amount: 0, // Must be exactly 0 for verification
+        currency: 'CAD',
+        customerCode: body.customerCode,
+        paymentMethod: 'cc'
+      })
+    })
+    
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error('HelcimPay initialization failed:', response.status, errorText)
+      throw createError({
+        statusCode: response.status,
+        statusMessage: `Failed to initialize payment: ${errorText}`
+      })
+    }
+    
+    const paymentData = await response.json()
+
+    return {
+      success: true,
+      checkoutToken: paymentData.checkoutToken,
+      secretToken: paymentData.secretToken
+    }
+  } catch (error) {
+    console.error('Error initializing HelcimPay:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || 'Failed to initialize payment'
+    })
+  }
+})