How to Integrate Authorize Net with V0

1'use client';
2import { useEffect, useState } from 'react';
3
4declare global {
5  interface Window {
6    Accept: {
7      dispatchData: (
8        secureData: object,
9        responseHandler: (response: AcceptResponse) => void
10      ) => void;
11    };
12  }
13}
14
15interface AcceptResponse {
16  opaqueData?: { dataDescriptor: string; dataValue: string };
17  messages: { resultCode: 'Ok' | 'Error'; message: Array<{ code: string; text: string }> };
18}
19
20const AUTHORIZE_NET_PUBLIC_KEY = process.env.NEXT_PUBLIC_AUTHORIZE_NET_PUBLIC_KEY!;
21const AUTHORIZE_NET_LOGIN_ID = process.env.NEXT_PUBLIC_AUTHORIZE_NET_LOGIN_ID!;
22const IS_SANDBOX = process.env.NEXT_PUBLIC_AUTHORIZE_NET_SANDBOX === 'true';
23
24export function PaymentForm({ amount, onSuccess }: { amount: number; onSuccess: () => void }) {
25  const [cardNumber, setCardNumber] = useState('');
26  const [cardExpiry, setCardExpiry] = useState('');
27  const [cardCode, setCardCode] = useState('');
28  const [cardName, setCardName] = useState('');
29  const [loading, setLoading] = useState(false);
30  const [error, setError] = useState('');
31
32  useEffect(() => {
33    const scriptSrc = IS_SANDBOX
34      ? 'https://jstest.authorize.net/v1/Accept.js'
35      : 'https://js.authorize.net/v1/Accept.js';
36    const script = document.createElement('script');
37    script.src = scriptSrc;
38    script.async = true;
39    document.head.appendChild(script);
40    return () => document.head.removeChild(script);
41  }, []);
42
43  async function handleSubmit(e: React.FormEvent) {
44    e.preventDefault();
45    setLoading(true);
46    setError('');
47
48    const [month, year] = cardExpiry.split('/');
49
50    window.Accept.dispatchData(
51      {
52        authData: { clientKey: AUTHORIZE_NET_PUBLIC_KEY, apiLoginID: AUTHORIZE_NET_LOGIN_ID },
53        cardData: {
54          cardNumber: cardNumber.replace(/\s/g, ''),
55          month: month?.trim(),
56          year: `20${year?.trim()}`,
57          cardCode: cardCode,
58          fullName: cardName,
59        },
60      },
61      async (response: AcceptResponse) => {
62        if (response.messages.resultCode === 'Error') {
63          setError(response.messages.message[0]?.text || 'Card tokenization failed');
64          setLoading(false);
65          return;
66        }
67
68        try {
69          const res = await fetch('/api/authorize-net/charge', {
70            method: 'POST',
71            headers: { 'Content-Type': 'application/json' },
72            body: JSON.stringify({
73              opaqueData: response.opaqueData,
74              amount,
75              fullName: cardName,
76            }),
77          });
78          const data = await res.json();
79          if (data.success) {
80            onSuccess();
81          } else {
82            setError(data.error || 'Payment failed');
83          }
84        } catch {
85          setError('Network error — please try again');
86        } finally {
87          setLoading(false);
88        }
89      }
90    );
91  }
92
93  return (
94    <form onSubmit={handleSubmit} className="space-y-4">
95      {/* form fields — use cardNumber, cardExpiry, cardCode, cardName state */}
96      {error && <p className="text-red-500 text-sm">{error}</p>}
97      <button type="submit" disabled={loading}
98        className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium disabled:opacity-50">
99        {loading ? 'Processing...' : `Pay $${amount.toFixed(2)}`}
100      </button>
101    </form>
102  );
103}

1import { NextResponse } from 'next/server';
2
3const API_LOGIN_ID = process.env.AUTHORIZE_NET_LOGIN_ID!;
4const TRANSACTION_KEY = process.env.AUTHORIZE_NET_TRANSACTION_KEY!;
5const IS_SANDBOX = process.env.AUTHORIZE_NET_SANDBOX === 'true';
6
7const API_URL = IS_SANDBOX
8  ? 'https://apitest.authorize.net/xml/v1/request.api'
9  : 'https://api.authorize.net/xml/v1/request.api';
10
11interface OpaqueData {
12  dataDescriptor: string;
13  dataValue: string;
14}
15
16export async function POST(request: Request) {
17  const { opaqueData, amount, fullName }: { opaqueData: OpaqueData; amount: number; fullName: string } =
18    await request.json();
19
20  if (!opaqueData?.dataDescriptor || !opaqueData?.dataValue) {
21    return NextResponse.json({ error: 'Invalid payment token' }, { status: 400 });
22  }
23
24  const payload = {
25    createTransactionRequest: {
26      merchantAuthentication: {
27        name: API_LOGIN_ID,
28        transactionKey: TRANSACTION_KEY,
29      },
30      transactionRequest: {
31        transactionType: 'authCaptureTransaction',
32        amount: amount.toFixed(2),
33        payment: {
34          opaqueData: {
35            dataDescriptor: opaqueData.dataDescriptor,
36            dataValue: opaqueData.dataValue,
37          },
38        },
39        billTo: {
40          firstName: fullName.split(' ')[0] || '',
41          lastName: fullName.split(' ').slice(1).join(' ') || '',
42        },
43        userFields: {
44          userField: [{ name: 'source', value: 'v0-nextjs-app' }],
45        },
46      },
47    },
48  };
49
50  const response = await fetch(API_URL, {
51    method: 'POST',
52    headers: { 'Content-Type': 'application/json' },
53    body: JSON.stringify(payload),
54  });
55
56  const data = await response.json();
57  const txResponse = data.transactionResponse;
58
59  if (data.messages?.resultCode === 'Error') {
60    return NextResponse.json(
61      { error: data.messages.message[0]?.text || 'Transaction failed' },
62      { status: 402 }
63    );
64  }
65
66  if (txResponse?.responseCode !== '1') {
67    const msg = txResponse?.errors?.[0]?.errorText || 'Payment declined';
68    return NextResponse.json({ error: msg }, { status: 402 });
69  }
70
71  return NextResponse.json({
72    success: true,
73    transactionId: txResponse.transId,
74    authCode: txResponse.authCode,
75  });
76}

1# .env.local — Sandbox credentials for development
2# Server-only (no NEXT_PUBLIC_)
3AUTHORIZE_NET_LOGIN_ID=your_sandbox_api_login_id
4AUTHORIZE_NET_TRANSACTION_KEY=your_sandbox_transaction_key
5AUTHORIZE_NET_SANDBOX=true
6
7# Client-safe (for Accept.js tokenization)
8NEXT_PUBLIC_AUTHORIZE_NET_LOGIN_ID=your_sandbox_api_login_id
9NEXT_PUBLIC_AUTHORIZE_NET_PUBLIC_KEY=your_sandbox_public_client_key
10NEXT_PUBLIC_AUTHORIZE_NET_SANDBOX=true