Merge pull request #142 from wizelineacademy/stripe-payments

feat: Configured stripe process for payment

next.config.mjs

@@ -1,26 +1,24 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        remotePatterns: [
-            {
-              protocol: 'https',
-              hostname: 'oaidalleapiprodscus.blob.core.windows.net',
-              port: '',
-            },
-            {
-              protocol: "https",
-              hostname: "vita-juliomeza2510-mybucket-uvkhksmm.s3.us-east-1.amazonaws.com",
-              port: ''
-            }
-          ],
-    },
-    reactStrictMode: false,
-    experimental: {
-      serverComponentsExternalPackages: [
-        'puppeteer-core',
-        '@sparticuz/chromium'
-      ]
-    }
-};
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'oaidalleapiprodscus.blob.core.windows.net',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname:
+          'vita-juliomeza2510-mybucket-uvkhksmm.s3.us-east-1.amazonaws.com',
+        port: '',
+      },
+    ],
+  },
+  reactStrictMode: false,
+  experimental: {
+    serverComponentsExternalPackages: ['puppeteer-core', '@sparticuz/chromium'],
+  },
+}
 
-export default nextConfig;
+export default nextConfig

package.json

@@ -61,6 +61,7 @@
     "postgres": "^3.4.4",
     "puppeteer": "^22.10.0",
     "puppeteer-core": "^22.10.0",
+    "raw-body": "^2.5.2",
     "reacharts": "^0.4.5",
     "react": "^18.3.1",
     "react-circular-progressbar": "^2.1.0",
@@ -73,6 +74,7 @@
     "react-speech-recognition": "^3.10.0",
     "recharts": "^2.12.7",
     "sst": "^3.0.32",
+    "stripe": "^15.9.0",
     "sweetalert2": "^11.11.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

src/app/(pages)/healthdata/page.tsx

@@ -46,7 +46,7 @@ const HealthData = () => {
         if (!data) {
           return
         } else {
-          router.replace('/plan')
+          router.replace('/home')
         }
       } catch (error) {
         console.log(error)

src/app/(pages)/plan/page.tsx

@@ -1,12 +1,14 @@
 'use client'
+import axios from 'axios'
 import { NextPage } from 'next'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 
 interface Plan {
   name: string
   price: number
   features: string[]
-  link: string
+  priceId: string
+  allowTrial: boolean
 }
 
 const plans: Plan[] = [
@@ -21,7 +23,8 @@ const plans: Plan[] = [
       'Red Social para compartir progreso y apoyar a otros.',
       'Perfil Médico',
     ],
-    link: 'https://buy.stripe.com/test_5kA4jc54DcqW2zKbII',
+    priceId: 'price_1PODCEA5dyQt5UTQT1A5yBVQ',
+    allowTrial: false,
   },
   {
     name: 'Bienestar Plus',
@@ -34,7 +37,8 @@ const plans: Plan[] = [
       'Recordatorios automáticos en Whatsapp.',
       'Retos mensuales e insignias por logros.',
     ],
-    link: 'https://buy.stripe.com/test_00g8zs68HbmSb6gdQR',
+    priceId: 'price_1PODQFA5dyQt5UTQ9ejvVNjG',
+    allowTrial: true,
   },
   {
     name: 'Bienestar Total',
@@ -46,7 +50,8 @@ const plans: Plan[] = [
       'Chatbot por Whatsapp.',
       'Acceso prioritario a las nuevas funciones en desarrollo.',
     ],
-    link: 'https://buy.stripe.com/test_dR68zsbt1fD8eisdQS',
+    priceId: 'price_1PODRUA5dyQt5UTQqsDYIfuQ',
+    allowTrial: false,
   },
 ]
 
@@ -68,6 +73,21 @@ const PricingPage: NextPage = () => {
 }
 
 const PlanCard: React.FC<{ plan: Plan }> = ({ plan }) => {
+  const router = useRouter()
+
+  const processPayment = async () => {
+    try {
+      const res = await axios.post('/api/stripe/payment', {
+        priceId: plan.priceId,
+        allowTrial: plan.allowTrial,
+      })
+      const data = res.data
+      router.push(data.url)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
   return (
     <div className='flex h-full transform flex-col justify-between rounded-md border bg-gray-800 p-4 text-white shadow-md transition duration-300 ease-in-out hover:scale-105'>
       <div>
@@ -85,12 +105,12 @@ const PlanCard: React.FC<{ plan: Plan }> = ({ plan }) => {
         )}
       </div>
       <div className='mt-auto'>
-        <Link
+        <button
           className={`w-full transform rounded-md bg-blue-500 px-4 py-2 text-white transition duration-300 hover:scale-105 hover:bg-green-600 focus:outline-none focus:ring focus:ring-green-400`}
-          href={plan.link}
+          onClick={processPayment}
         >
           Seleccionar
-        </Link>
+        </button>
       </div>
     </div>
   )

src/app/api/stripe/payment/route.ts

@@ -0,0 +1,46 @@
+import { authOptions } from '@/src/lib/auth/authOptions'
+import { stripe } from '@/src/lib/stripe/stripe'
+import { getServerSession } from 'next-auth'
+import { NextResponse } from 'next/server'
+import Stripe from 'stripe'
+
+export async function POST(req: Request) {
+  const body = await req.json()
+  const session = await getServerSession(authOptions)
+  const { priceId, allowTrial } = body
+
+  const stripeConfig: Stripe.Checkout.SessionCreateParams = {
+    success_url: 'http://localhost:3000/home',
+    cancel_url: 'http://localhost:3000',
+    payment_method_types: ['card'],
+    mode: 'subscription',
+    billing_address_collection: 'auto',
+    customer_email: session?.user.email,
+    allow_promotion_codes: true,
+    line_items: [
+      {
+        price: priceId,
+        quantity: 1,
+      },
+    ],
+    metadata: {
+      userId: session?.user.id,
+    },
+    subscription_data: {
+      trial_settings: {
+        end_behavior: {
+          missing_payment_method: 'cancel',
+        },
+      },
+    },
+    payment_method_collection: 'if_required',
+  }
+
+  if (stripeConfig.subscription_data && allowTrial) {
+    stripeConfig.subscription_data.trial_period_days = 7
+  }
+
+  const res = await stripe.checkout.sessions.create(stripeConfig)
+
+  return NextResponse.json({ url: res.url }, { status: 200 })
+}