How to Integrate 2Checkout (Verifone) with V0

1// app/api/2checkout/signature/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3import crypto from 'crypto'
4
5function generateHmacSignature(params: Record<string, string>, secretKey: string): string {
6  // 2Checkout signature: concatenate values by specific rules, then HMAC-SHA256
7  // Parameter order depends on your 2Checkout API version and product type
8  // Refer to 2Checkout docs for exact parameter list and order
9  const paramValues = Object.values(params).join('')
10  return crypto
11    .createHmac('sha256', secretKey)
12    .update(paramValues)
13    .digest('hex')
14    .toUpperCase()
15}
16
17export async function POST(request: NextRequest) {
18  try {
19    const body = await request.json()
20    const {
21      orderReference,
22      productName,
23      price,
24      currency = 'USD',
25      quantity = 1,
26    } = body
27
28    const merchantCode = process.env.NEXT_PUBLIC_2CO_MERCHANT_CODE!
29    const secretKey = process.env.TWO_CO_SECRET_KEY!
30
31    // Build order parameters
32    const timestamp = Math.floor(Date.now() / 1000).toString()
33    const params = {
34      CURRENCY: currency,
35      MERCHANT: merchantCode,
36      ORDER_HASH: orderReference,
37      PRICE: price.toString(),
38      PROD: productName,
39      QTY: quantity.toString(),
40      TIMESTAMP: timestamp,
41    }
42
43    const signature = generateHmacSignature(params, secretKey)
44
45    return NextResponse.json({
46      signature,
47      timestamp,
48      merchantCode,
49      params,
50    })
51  } catch (error) {
52    return NextResponse.json({ error: 'Signature generation failed' }, { status: 500 })
53  }
54}
55
56// app/api/2checkout/ipn/route.ts — IPN webhook handler
57export async function POST(request: NextRequest) {
58  try {
59    const body = await request.text()
60    const params = new URLSearchParams(body)
61
62    const orderRefno = params.get('REFNOEXT') || ''
63    const orderStatus = params.get('ORDERSTATUS') || ''
64    const hash = params.get('HASH') || ''
65
66    // Verify IPN hash using secret key
67    // Refer to 2Checkout IPN verification documentation for exact algorithm
68    const secretKey = process.env.TWO_CO_SECRET_KEY!
69    const expectedHash = crypto
70      .createHmac('sha256', secretKey)
71      .update(Array.from(params.entries()).filter(([k]) => k !== 'HASH').map(([k, v]) => `${v.length}${v}`).join(''))
72      .digest('hex')
73      .toUpperCase()
74
75    if (hash !== expectedHash) {
76      console.error('IPN hash mismatch')
77      return new Response('FAIL', { status: 200 })
78    }
79
80    if (orderStatus === 'COMPLETE') {
81      // Process completed order: activate license, send email, update DB
82      console.log('Order completed:', orderRefno)
83    }
84
85    // 2Checkout requires specific response format
86    return new Response(`<EPAYMENT>${new Date().toISOString()}|${expectedHash}</EPAYMENT>`, {
87      status: 200,
88      headers: { 'Content-Type': 'text/plain' },
89    })
90  } catch (error) {
91    return new Response('FAIL', { status: 200 })
92  }
93}

1// app/checkout/page.tsx — Client component with ConvertPlus integration
2'use client'
3import { useEffect, useRef, useState } from 'react'
4
5declare global {
6  interface Window {
7    TwoCoInlineCart: any
8  }
9}
10
11export function TwoCheckoutPayment({
12  productName,
13  price,
14  currency = 'USD',
15  buyerEmail,
16  buyerName,
17}: {
18  productName: string
19  price: number
20  currency?: string
21  buyerEmail: string
22  buyerName: string
23}) {
24  const [loading, setLoading] = useState(true)
25  const [error, setError] = useState<string | null>(null)
26  const containerRef = useRef<HTMLDivElement>(null)
27
28  useEffect(() => {
29    const orderReference = `ORDER-${Date.now()}`
30
31    async function initConvertPlus() {
32      try {
33        // 1. Get signature from server
34        const sigResponse = await fetch('/api/2checkout/signature', {
35          method: 'POST',
36          headers: { 'Content-Type': 'application/json' },
37          body: JSON.stringify({ orderReference, productName, price, currency }),
38        })
39
40        if (!sigResponse.ok) throw new Error('Failed to initialize payment')
41        const { merchantCode } = await sigResponse.json()
42
43        // 2. Load ConvertPlus script
44        const script = document.createElement('script')
45        script.src = 'https://secure.2checkout.com/checkout/client/twoCoInlineCart.js'
46        script.onload = () => {
47          // 3. Configure ConvertPlus
48          const cart = window.TwoCoInlineCart
49
50          cart.setup.setMerchant(merchantCode)
51          cart.setup.setMode('PURCHASE') // or AUTHORIZENET
52
53          // Add product to cart
54          cart.cart.setReset(true)
55          cart.cart.setLanguage('en')
56          cart.cart.setCurrency(currency)
57
58          cart.products.removeAll()
59          cart.products.add({
60            code: productName.replace(/\s+/g, '-').toLowerCase(),
61            quantity: 1,
62            price,
63            name: productName,
64            type: 'DIGITAL',
65            tangible: 'N',
66          })
67
68          // Pre-fill buyer info
69          cart.billing.setEmail(buyerEmail)
70          cart.billing.setFirstName(buyerName.split(' ')[0] || '')
71          cart.billing.setLastName(buyerName.split(' ').slice(1).join(' ') || '')
72
73          cart.order.setExternalRef(orderReference)
74          cart.order.setReturnUrl(`${window.location.origin}/checkout/success`)
75          cart.order.setCancelUrl(`${window.location.origin}/checkout/cancel`)
76
77          // Render in container
78          if (containerRef.current) {
79            cart.cart.checkout()
80          }
81          setLoading(false)
82        }
83        script.onerror = () => setError('Failed to load payment system')
84        document.head.appendChild(script)
85      } catch (err) {
86        setError(err instanceof Error ? err.message : 'Payment setup failed')
87        setLoading(false)
88      }
89    }
90
91    initConvertPlus()
92  }, [productName, price, currency, buyerEmail, buyerName])
93
94  return (
95    <div>
96      {loading && (
97        <div className="flex items-center justify-center h-48 bg-gray-50 rounded-lg">
98          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
99          <span className="ml-3 text-gray-500">Initializing secure payment...</span>
100        </div>
101      )}
102      {error && (
103        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
104          {error}
105        </div>
106      )}
107      <div ref={containerRef} className={loading || error ? 'hidden' : ''} />
108    </div>
109  )
110}

1// Vercel Dashboard → Settings → Environment Variables:
2// NEXT_PUBLIC_2CO_MERCHANT_CODE = your_numeric_merchant_code
3// TWO_CO_SECRET_KEY = your_secret_key_from_2checkout_dashboard
4// NEXT_PUBLIC_APP_URL = https://your-app.vercel.app
5
6// 2Checkout test card numbers for sandbox:
7// Visa: 4111 1111 1111 1111, Exp: any future, CVV: 123
8// Mastercard: 5500 0000 0000 0004
9// Test successful payment, then check Vercel function logs for IPN receipt
10
11// 2Checkout Dashboard IPN Configuration:
12// Account → Integrations → Webhooks & API → IPN settings
13// Add URL: https://your-app.vercel.app/api/2checkout/ipn
14// Select triggers: ORDER_STATUS_COMPLETE, REFUND, etc.
15
16// Return URL Configuration:
17// Account → Integrations → Return URL
18// Return URL: https://your-app.vercel.app/checkout/success
19// Cancel/Failure URL: https://your-app.vercel.app/checkout/cancel