remove unnecessary webhook call but add it again for crypto payment

Author: deadcoder0904

README.md

@@ -4,7 +4,7 @@
 
 Install [Node.js](https://nodejs.org/) and [pnpm](https://pnpm.io/).
 
-Use [clovyr.app](https://clovyr.app/)'s free plan (7-day free trial) for [testing BTCPayServer](https://clovyr.app/apps/btcpayserver).
+Use [clovyr.app](https://clovyr.app/)'s free plan (7-day free trial) for [testing BTCPayServer](https://clovyr.app/apps/btcpayserver). Or maybe don't as Clovyr doesn't update BTCPayServer often. Use Voltage Cloud only even for testing because I had a webhook error as Clovyr was using old BTCPayServer version. Or use [kyun host](https://kyun.host) to deploy your own BTCPayServer on a Linux VPS for $15/month.
 
 After testing, you can use Lunanode or [Voltage Cloud's hosted BTCPayServer](https://www.youtube.com/playlist?list=PLuMtKGSqizH2sxmKdy52gdbqSVKkyLX-t) Plan for $8/month or buy a VPS from Kyun Host ($16/month) to self-host it yourself using [btcpayserver-docker](https://github.com/btcpayserver/btcpayserver-docker).
 
@@ -26,7 +26,7 @@ BTCPAY_STORE_ID=xxxx
 # Under `Settings > Store Settings > Webhooks` => Payload URL = http://localhost:3000/api/btcpayserver/webhook (replace http://localhost:3000 with ngrok url as localhost (specifically, http) won't work with webhooks) & Events > Send Me Everything
 BTCPAY_WEBHOOK_SECRET=xxxx
 
-NEXT_PUBLIC_EBOOK_PRICE=57
+NEXT_PUBLIC_EBOOK_PRICE=107
 
 NEXT_TELEMETRY_DISABLED=1
 ```

src/app/api/btcpayserver/checkout/route.ts

@@ -30,7 +30,7 @@ export const POST = async (request: NextRequest, response: NextResponse) => {
   const redirectURL = `${BASE_URL}/payment/successful`
 
   const project_name = 'BTC Ebook'
-  const amount = ((EBOOK_PRICE || 97) as number) - 20
+  const amount = Number(EBOOK_PRICE)
   const currency = 'USD'
 
   try {
@@ -66,7 +66,7 @@ export const POST = async (request: NextRequest, response: NextResponse) => {
     )
 
     const session = await response.json()
-    console.log({ session })
+    console.log(JSON.stringify({ session }, null, 2))
     console.info(`[BTCPayServer] ✅ Successfully created Checkout Page!`)
     return NextResponse.json({ success: true, url: session.checkoutLink })
   } catch (error) {

src/app/api/btcpayserver/webhook/route.ts

@@ -1,5 +1,4 @@
 import crypto from 'crypto'
-import { error } from 'next/dist/build/output/log'
 import { NextRequest, NextResponse } from 'next/server'
 
 import {
@@ -36,19 +35,17 @@ export const POST = async (req: NextRequest, res: NextResponse) => {
     }
 
     console.info(`[BTCPayServer] Listening to Webhook Event!`)
-  } catch (err) {
-    error(err as string)
-    return new Response(`Webhook Error: ${(err as Error).message}`, {
-      status: 400,
-    })
+  } catch (error) {
+    return NextResponse.json({ error }, { status: 400 })
   }
 
   try {
     const event = JSON.parse(body)
+
     const BTCPAY_INVOICE_ID = event.invoiceId
 
     const response = await fetch(
-      `${BTCPAY_URL}/stores/${BTCPAY_STORE_ID}/invoices/${BTCPAY_INVOICE_ID}`,
+      `${BTCPAY_URL}/stores/${BTCPAY_STORE_ID}/invoices/${BTCPAY_INVOICE_ID}/payment-methods`,
       {
         method: 'GET',
         headers: {
@@ -58,16 +55,25 @@ export const POST = async (req: NextRequest, res: NextResponse) => {
       }
     )
 
-    const { metadata } = await response.json()
+    const result = await response.json()
+
+    console.warn(`[BTCPayServer] 🧨 ${event.type} 🧨`)
 
     switch (event.type) {
-      case 'InvoicePaymentSettled':
-        console.log({ metadata })
+      case 'InvoiceSettled':
+        const { buyerEmail } = event.metadata
+        const cryptoCurrency = result[0].cryptoCode
 
-        const { buyerEmail } = metadata
-        const cryptoCurrency = event.paymentMethod
-        const cryptoPayment = event.payment.value
-        const cryptoFees = event.payment.fee
+        type Crypto = { totalPaid: number; networkFee: number }
+
+        const cryptoPayment = result.reduce(
+          (acc: number, crypto: Crypto) => acc + Number(crypto.totalPaid),
+          0
+        )
+        const cryptoFees = result.reduce(
+          (acc: number, crypto: Crypto) => acc + Number(crypto.networkFee),
+          0
+        )
 
         try {
           // create user here with info from `metadata`
@@ -88,9 +94,10 @@ export const POST = async (req: NextRequest, res: NextResponse) => {
     }
   } catch (err) {
     console.error({ err }, `[BTCPayServer] Webhook Error`)
-    return new Response('Webhook handler failed. View logs.', {
-      status: 400,
-    })
+    return NextResponse.json(
+      { error: 'Webhook handler failed. View logs.' },
+      { status: 400 }
+    )
   }
 
   console.info(`[BTCPayServer] Successfully ran Webhook!`)

src/app/components/HomePage.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { EBOOK_PRICE } from '@/app/lib/constants'
+
 export const HomePage = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -53,7 +55,7 @@ export const HomePage = () => {
         </div>
 
         <button type="submit" className="border border-white p-2 w-64">
-          Submit
+          Buy for ${EBOOK_PRICE}
         </button>
       </form>
     </div>