How to Integrate Bolt.new with 2Checkout (Verifone)

1// lib/2checkout.ts
2import { createHmac } from 'crypto';
3
4export function generateHmacSignature(
5  merchantCode: string,
6  secretKey: string,
7  date: string
8): string {
9  const stringToHash = `${merchantCode.length}${merchantCode}${date.length}${date}`;
10  return createHmac('sha256', secretKey)
11    .update(stringToHash)
12    .digest('hex');
13}
14
15export async function twocheckoutFetch<T = unknown>(
16  endpoint: string,
17  init: RequestInit = {}
18): Promise<T> {
19  const merchantCode = process.env.NEXT_PUBLIC_2CHECKOUT_MERCHANT_CODE;
20  const secretKey = process.env.TWOCHECKOUT_SECRET_KEY;
21  const apiUrl = process.env.TWOCHECKOUT_API_URL ?? 'https://sandbox.2checkout.com/rest/6.0';
22
23  if (!merchantCode || !secretKey) {
24    throw new Error(
25      'NEXT_PUBLIC_2CHECKOUT_MERCHANT_CODE and TWOCHECKOUT_SECRET_KEY must be set in .env'
26    );
27  }
28
29  const date = new Date().toISOString().replace('T', ' ').substring(0, 19);
30  const hash = generateHmacSignature(merchantCode, secretKey, date);
31
32  const url = `${apiUrl}${endpoint.startsWith('/') ? endpoint : '/' + endpoint}`;
33  const response = await fetch(url, {
34    ...init,
35    headers: {
36      'X-Avangate-Authentication': `code="${merchantCode}" date="${date}" hash="${hash}"`,
37      'Content-Type': 'application/json',
38      Accept: 'application/json',
39      ...init.headers,
40    },
41  });
42
43  if (!response.ok) {
44    const errorData = await response.text();
45    throw new Error(`2Checkout API ${response.status}: ${errorData}`);
46  }
47
48  return response.json() as Promise<T>;
49}

1// components/TwoCheckoutForm.tsx
2'use client';
3import { useState, useEffect } from 'react';
4
5declare global {
6  interface Window {
7    TCO: {
8      loadScript: (merchantCode: string) => void;
9      requestToken: (options: Record<string, unknown>, callback: (token: string, err?: string) => void) => void;
10    };
11  }
12}
13
14interface TwoCheckoutFormProps {
15  productCode: string;
16  productName: string;
17  price: number;
18  currency?: string;
19  onSuccess: (orderRef: string) => void;
20  onError: (error: string) => void;
21}
22
23export function TwoCheckoutForm({
24  productCode,
25  productName,
26  price,
27  currency = 'USD',
28  onSuccess,
29  onError,
30}: TwoCheckoutFormProps) {
31  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
32  const [isProcessing, setIsProcessing] = useState(false);
33  const [formData, setFormData] = useState({
34    firstName: '', lastName: '', email: '',
35    cardNumber: '', expMonth: '', expYear: '', cvv: '',
36  });
37
38  useEffect(() => {
39    const script = document.createElement('script');
40    script.src = 'https://secure.2checkout.com/checkout/api/tco_inline.js';
41    script.onload = () => {
42      window.TCO?.loadScript(process.env.NEXT_PUBLIC_2CHECKOUT_MERCHANT_CODE!);
43      setIsScriptLoaded(true);
44    };
45    document.head.appendChild(script);
46    return () => { document.head.removeChild(script); };
47  }, []);
48
49  const handleSubmit = async (e: React.FormEvent) => {
50    e.preventDefault();
51    if (!isScriptLoaded) return;
52    setIsProcessing(true);
53
54    const tokenOptions = {
55      sellerId: process.env.NEXT_PUBLIC_2CHECKOUT_MERCHANT_CODE,
56      publishableKey: process.env.NEXT_PUBLIC_2CHECKOUT_PUBLISHABLE_KEY,
57      ccNo: formData.cardNumber.replace(/\s/g, ''),
58      cvv: formData.cvv,
59      expMonth: formData.expMonth,
60      expYear: formData.expYear,
61    };
62
63    window.TCO.requestToken(tokenOptions, async (token: string, err?: string) => {
64      if (err) {
65        setIsProcessing(false);
66        onError(err);
67        return;
68      }
69
70      try {
71        const response = await fetch('/api/2checkout/order', {
72          method: 'POST',
73          headers: { 'Content-Type': 'application/json' },
74          body: JSON.stringify({
75            token, productCode, productName, price, currency,
76            customer: {
77              firstName: formData.firstName,
78              lastName: formData.lastName,
79              email: formData.email,
80            },
81          }),
82        });
83        const result = await response.json();
84        if (result.orderRef) {
85          onSuccess(result.orderRef);
86        } else {
87          onError(result.error ?? 'Payment failed');
88        }
89      } catch {
90        onError('Network error — please try again');
91      } finally {
92        setIsProcessing(false);
93      }
94    });
95  };
96
97  return (
98    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
99      <div className="grid grid-cols-2 gap-4">
100        <input required placeholder="First name" value={formData.firstName}
101          onChange={e => setFormData(p => ({ ...p, firstName: e.target.value }))}
102          className="border rounded px-3 py-2" />
103        <input required placeholder="Last name" value={formData.lastName}
104          onChange={e => setFormData(p => ({ ...p, lastName: e.target.value }))}
105          className="border rounded px-3 py-2" />
106      </div>
107      <input required type="email" placeholder="Email" value={formData.email}
108        onChange={e => setFormData(p => ({ ...p, email: e.target.value }))}
109        className="border rounded px-3 py-2 w-full" />
110      <input required placeholder="Card number" value={formData.cardNumber}
111        onChange={e => setFormData(p => ({ ...p, cardNumber: e.target.value }))}
112        className="border rounded px-3 py-2 w-full" maxLength={19} />
113      <div className="grid grid-cols-3 gap-4">
114        <input required placeholder="MM" value={formData.expMonth}
115          onChange={e => setFormData(p => ({ ...p, expMonth: e.target.value }))}
116          className="border rounded px-3 py-2" maxLength={2} />
117        <input required placeholder="YYYY" value={formData.expYear}
118          onChange={e => setFormData(p => ({ ...p, expYear: e.target.value }))}
119          className="border rounded px-3 py-2" maxLength={4} />
120        <input required placeholder="CVV" value={formData.cvv}
121          onChange={e => setFormData(p => ({ ...p, cvv: e.target.value }))}
122          className="border rounded px-3 py-2" maxLength={4} />
123      </div>
124      <button type="submit" disabled={isProcessing || !isScriptLoaded}
125        className="w-full bg-blue-600 text-white py-3 rounded font-medium disabled:opacity-50">
126        {isProcessing ? 'Processing...' : `Pay ${currency} ${price}`}
127      </button>
128    </form>
129  );
130}

1// app/api/2checkout/order/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { twocheckoutFetch } from '@/lib/2checkout';
4
5interface OrderResponse {
6  RefNo: string;
7  Status: string;
8  GrossPrice: number;
9  Currency: string;
10}
11
12export async function POST(request: NextRequest) {
13  const { token, productCode, productName, price, currency = 'USD', customer } =
14    await request.json();
15
16  if (!token || !productCode || !price || !customer?.email) {
17    return NextResponse.json(
18      { error: 'token, productCode, price, and customer.email are required' },
19      { status: 400 }
20    );
21  }
22
23  // 2Checkout handles tax calculation automatically for international sales
24  // based on customer billing address and product type
25  const orderPayload = {
26    Currency: currency,
27    Language: 'EN',
28    Country: 'US',
29    CustomerIP: '91.220.163.52', // In production, use the real customer IP
30    Source: 'BOLT_APP',
31    BillingDetails: {
32      FirstName: customer.firstName ?? '',
33      LastName: customer.lastName ?? '',
34      Email: customer.email,
35      Address1: '123 Main St', // In production, collect from form
36      City: 'New York',
37      State: 'New York',
38      CountryCode: 'US',
39      Zip: '10001',
40    },
41    PaymentDetails: {
42      Type: 'EES_TOKEN_PAYMENT',
43      Currency: currency,
44      PaymentMethod: {
45        EesToken: token,
46        Vendor3DSReturnURL: `${process.env.NEXT_PUBLIC_APP_URL}/payment/return`,
47        Vendor3DSCancelURL: `${process.env.NEXT_PUBLIC_APP_URL}/payment/cancel`,
48      },
49    },
50    Items: [{
51      Code: productCode,
52      Quantity: 1,
53      IsDynamic: false,
54      Price: {
55        Amount: price,
56        Type: 'CUSTOM',
57      },
58    }],
59  };
60
61  const result = await twocheckoutFetch<OrderResponse>('/orders/', {
62    method: 'POST',
63    body: JSON.stringify(orderPayload),
64  });
65
66  return NextResponse.json({
67    orderRef: result.RefNo,
68    status: result.Status,
69    total: result.GrossPrice,
70    currency: result.Currency,
71  });
72}

1// app/api/2checkout/ipn/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createHash } from 'crypto';
4
5// NOTE: 2Checkout IPN webhooks require a publicly deployed URL.
6// During Bolt.new WebContainer development, incoming IPN callbacks
7// cannot be received. Deploy to Netlify, then configure your IPN URL
8// in 2Checkout Merchant Control Panel → Integrations → Webhooks & API → IPN Settings.
9export async function POST(request: NextRequest) {
10  try {
11    const text = await request.text();
12    const params = new URLSearchParams(text);
13    const ipnData = Object.fromEntries(params.entries());
14
15    // Verify IPN signature
16    const secretKey = process.env.TWOCHECKOUT_SECRET_KEY;
17    if (secretKey) {
18      const receivedHash = ipnData.HASH;
19      // Build hash string: MD5 of concatenated values length+value for each param except HASH
20      const sortedKeys = Object.keys(ipnData)
21        .filter(k => k !== 'HASH')
22        .sort();
23      const hashString = sortedKeys
24        .map(k => `${ipnData[k].length}${ipnData[k]}`)
25        .join('');
26      const computedHash = createHash('md5')
27        .update(secretKey + hashString)
28        .digest('hex');
29
30      if (computedHash !== receivedHash) {
31        console.error('2Checkout IPN: invalid signature');
32        // Still return 200 to prevent retries, but log the issue
33      }
34    }
35
36    const messageType = ipnData.MESSAGE_TYPE;
37    const orderRef = ipnData.REFNO;
38
39    switch (messageType) {
40      case 'ORDER_CREATED':
41        console.log(`Order created: ${orderRef}, amount: ${ipnData.IPN_TOTALGENERAL} ${ipnData.CURRENCY}`);
42        // TODO: Update order status in your database, send confirmation email
43        break;
44      case 'FRAUD_STATUS_CHANGED':
45        console.warn(`Fraud status for order ${orderRef}: ${ipnData.FRAUD_STATUS}`);
46        break;
47      case 'SUBSCRIPTION_RENEWED':
48        console.log(`Subscription renewed for order ${orderRef}`);
49        break;
50      default:
51        console.log(`2Checkout IPN event: ${messageType} for order ${orderRef}`);
52    }
53  } catch (error) {
54    console.error('IPN processing error:', error);
55  }
56
57  // Always return 200 — 2Checkout retries on non-200 responses
58  return new NextResponse('', { status: 200 });
59}