N
Nuxt•2mo ago
Hùng Lê

push data form webhook stripe

I have the following server/api/stripe/webhook code import { eventHandler, readRawBody, getHeader, createError, sendError } from 'h3' import Stripe from 'stripe' // import { firestore } from '~/server/utils/firebaseAdmin' // import test from '~/services/webhook/index' export default eventHandler(async (event: any) => { const stripe = new Stripe(${process.env.STRIPE_SECRET_KEY}) const endpointSecret = ${process.env.STRIPE_WEBHOOK_SECRET} let body try { body = await readRawBody(event, false) } catch (err) { throw createError({ statusCode: 400, statusMessage: Cannot read body: ${err}, }) } const signature = getHeader(event, 'stripe-signature') if (!body) { throw createError({ statusCode: 400, statusMessage: 'Invalid request body', }) } if (!signature) { throw createError({ statusCode: 400, statusMessage: 'Invalid stripe-signature', }) } let stripeEvent try { stripeEvent = stripe.webhooks.constructEvent( body, signature, endpointSecret ) } catch (err) { console.error('❌ ERROR: Webhook verification failed:', err) throw createError({ statusCode: 400, statusMessage: Webhook error: ${err}, }) } // Handle the event if (stripeEvent.type == 'payment_intent.succeeded') { const paymentIntent = stripeEvent.data.object const s3Url = paymentIntent?.metadata?.s3Url || '' if (!s3Url) { return { received: true } } // io.emit('newS3Url', s3Url); } return { received: true } }) how to push s3url in webhook to client?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Hùng Lê. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll help you with pushing data from your Stripe webhook to the client in a Nuxt application. Based on the code you've provided, you're trying to send an S3 URL to the client when a payment succeeds. In H3 (the HTTP server framework used by Nuxt), there are several ways to accomplish this. Option 1: Using Server-Sent Events (SSE) You can implement Server-Sent Events to push real-time updates from your server to clients: 
// server/api/sse.ts
import { defineEventHandler } from 'h3'

export default defineEventHandler((event) => {
  event.node.res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })
  
  // Store the client connection
  const clientId = Date.now()
  
  // Add this client to a global connections store
  if (!global.sseClients) global.sseClients = new Map()
  global.sseClients.set(clientId, event.node.res)
  
  // Remove client when they disconnect
  event.node.req.on('close', () => {
    global.sseClients.delete(clientId)
  })
  
  // Keep connection alive
  const keepAlive = setInterval(() => {
    event.node.res.write('data: keep-alive\n\n')
  }, 30000)
  
  event.node.req.on('close', () => {
    clearInterval(keepAlive)
  })
})
// server/api/sse.ts
import { defineEventHandler } from 'h3'

export default defineEventHandler((event) => {
  event.node.res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })
  
  // Store the client connection
  const clientId = Date.now()
  
  // Add this client to a global connections store
  if (!global.sseClients) global.sseClients = new Map()
  global.sseClients.set(clientId, event.node.res)
  
  // Remove client when they disconnect
  event.node.req.on('close', () => {
    global.sseClients.delete(clientId)
  })
  
  // Keep connection alive
  const keepAlive = setInterval(() => {
    event.node.res.write('data: keep-alive\n\n')
  }, 30000)
  
  event.node.req.on('close', () => {
    clearInterval(keepAlive)
  })
})
Then in your webhook handler: 
// In your webhook handler when payment succeeds
if (stripeEvent.type == 'payment_intent.succeeded') {
    const paymentIntent = stripeEvent.data.object
    const s3Url = paymentIntent?.metadata?.s3Url || ''
    if (!s3Url) {
        return { received: true }
    }
    
    // Send to all connected clients
    if (global.sseClients) {
        global.sseClients.forEach(client => {
            client.write(`data: ${JSON.stringify({ type: 'newS3Url', url: s3Url })}\n\n`)
        })
    }
}
// In your webhook handler when payment succeeds
if (stripeEvent.type == 'payment_intent.succeeded') {
    const paymentIntent = stripeEvent.data.object
    const s3Url = paymentIntent?.metadata?.s3Url || ''
    if (!s3Url) {
        return { received: true }
    }
    
    // Send to all connected clients
    if (global.sseClients) {
        global.sseClients.forEach(client => {
            client.write(`data: ${JSON.stringify({ type: 'newS3Url', url: s3Url })}\n\n`)
        })
    }
}
On the client side: 
// In your Vue component
onMounted(() => {
  const eventSource = new EventSource('/api/sse')
  
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data)
    if (data.type === 'newS3Url') {
      // Handle the S3 URL
      console.log('Received S3 URL:', data.url)
    }
  }
  
  onBeforeUnmount(() => {
    eventSource.close()
  })
})
// In your Vue component
onMounted(() => {
  const eventSource = new EventSource('/api/sse')
  
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data)
    if (data.type === 'newS3Url') {
      // Handle the S3 URL
      console.log('Received S3 URL:', data.url)
    }
  }
  
  onBeforeUnmount(() => {
    eventSource.close()
  })
})
Option 2: Using a Database with Polling Another approach is to store the S3 URL in a database and have the client poll for updates: 
// In your webhook handler
if (stripeEvent.type == 'payment_intent.succeeded') {
    const paymentIntent = stripeEvent.data.object
    const s3Url = paymentIntent?.metadata?.s3Url || ''
    if (!s3Url) {
        return { received: true }
    }
    
    // Store in database (you'll need to implement this)
    // Example: await storeS3Url(paymentIntent.id, s3Url)
}
// In your webhook handler
if (stripeEvent.type == 'payment_intent.succeeded') {
    const paymentIntent = stripeEvent.data.object
    const s3Url = paymentIntent?.metadata?.s3Url || ''
    if (!s3Url) {
        return { received: true }
    }
    
    // Store in database (you'll need to implement this)
    // Example: await storeS3Url(paymentIntent.id, s3Url)
}
Then create an API endpoint for clients to check for updates: 
// server/api/check-payment-status.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const paymentId = query.paymentId
  
  // Retrieve from database (you'll need to implement this)
  // Example: const data = await getPaymentData(paymentId)
  
  return { s3Url: data.s3Url }
})
// server/api/check-payment-status.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const paymentId = query.paymentId
  
  // Retrieve from database (you'll need to implement this)
  // Example: const data = await getPaymentData(paymentId)
  
  return { s3Url: data.s3Url }
})
The H3 framework used in Nuxt provides these utilities for handling HTTP requests and responses as shown in your code. You're already using eventHandler, readRawBody, getHeader, and other H3 utilities from the H3 framework. Remember that for production use, you should implement proper authentication and security measures to ensure that only authorized clients can access the S3 URLs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@395818224114991104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?