How to Integrate Bolt.new with Authorize.Net

1# .env
2AUTHORIZE_API_LOGIN_ID=your_api_login_id_here
3AUTHORIZE_TRANSACTION_KEY=your_transaction_key_here
4VITE_AUTHORIZE_CLIENT_KEY=your_client_key_here

1// components/AuthorizePaymentForm.tsx
2'use client';
3import { useState } from 'react';
4
5declare global {
6  interface Window {
7    Accept: {
8      dispatchData: (secureData: object, callback: (response: AcceptResponse) => void) => void;
9    };
10  }
11}
12
13interface AcceptResponse {
14  messages: { resultCode: string; message: Array<{ code: string; text: string }> };
15  opaqueData?: { dataDescriptor: string; dataValue: string };
16}
17
18interface AuthorizePaymentFormProps {
19  amount: number;
20  onSuccess: (transactionId: string) => void;
21  onError: (message: string) => void;
22}
23
24export function AuthorizePaymentForm({ amount, onSuccess, onError }: AuthorizePaymentFormProps) {
25  const [cardNumber, setCardNumber] = useState('');
26  const [expMonth, setExpMonth] = useState('');
27  const [expYear, setExpYear] = useState('');
28  const [cvv, setCvv] = useState('');
29  const [loading, setLoading] = useState(false);
30
31  function handleSubmit(e: React.FormEvent) {
32    e.preventDefault();
33    setLoading(true);
34
35    const secureData = {
36      authData: {
37        clientKey: import.meta.env.VITE_AUTHORIZE_CLIENT_KEY,
38        apiLoginID: import.meta.env.VITE_AUTHORIZE_API_LOGIN_ID,
39      },
40      cardData: {
41        cardNumber: cardNumber.replace(/\s/g, ''),
42        month: expMonth,
43        year: expYear,
44        cardCode: cvv,
45      },
46    };
47
48    window.Accept.dispatchData(secureData, async (response: AcceptResponse) => {
49      if (response.messages.resultCode === 'Error') {
50        const errorMsg = response.messages.message.map((m) => m.text).join(', ');
51        onError(errorMsg);
52        setLoading(false);
53        return;
54      }
55
56      const nonce = response.opaqueData?.dataValue;
57      const descriptor = response.opaqueData?.dataDescriptor;
58
59      const result = await fetch('/api/authorize-payment', {
60        method: 'POST',
61        headers: { 'Content-Type': 'application/json' },
62        body: JSON.stringify({ nonce, descriptor, amount }),
63      });
64
65      const data = await result.json();
66      setLoading(false);
67
68      if (data.transactionId) {
69        onSuccess(data.transactionId);
70      } else {
71        onError(data.error || 'Payment failed');
72      }
73    });
74  }
75
76  return (
77    <form onSubmit={handleSubmit} className="space-y-4">
78      <script src="https://jstest.authorize.net/v1/Accept.js" />
79      <input
80        type="text"
81        placeholder="Card Number"
82        value={cardNumber}
83        onChange={(e) => setCardNumber(e.target.value)}
84        className="w-full border rounded px-3 py-2"
85        maxLength={19}
86      />
87      <div className="flex gap-2">
88        <input type="text" placeholder="MM" value={expMonth} onChange={(e) => setExpMonth(e.target.value)} className="w-24 border rounded px-3 py-2" maxLength={2} />
89        <input type="text" placeholder="YYYY" value={expYear} onChange={(e) => setExpYear(e.target.value)} className="w-28 border rounded px-3 py-2" maxLength={4} />
90        <input type="text" placeholder="CVV" value={cvv} onChange={(e) => setCvv(e.target.value)} className="w-20 border rounded px-3 py-2" maxLength={4} />
91      </div>
92      <button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 disabled:opacity-50">
93        {loading ? 'Processing...' : `Pay $${amount.toFixed(2)}`}
94      </button>
95    </form>
96  );
97}

1// app/api/authorize-payment/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import * as AuthorizeNet from 'authorizenet';
4
5const ApiContracts = AuthorizeNet.APIContracts;
6const ApiControllers = AuthorizeNet.APIControllers;
7
8export async function POST(request: NextRequest) {
9  const { nonce, descriptor, amount } = await request.json();
10
11  const merchantAuthenticationType = new ApiContracts.MerchantAuthenticationType();
12  merchantAuthenticationType.setName(process.env.AUTHORIZE_API_LOGIN_ID!);
13  merchantAuthenticationType.setTransactionKey(process.env.AUTHORIZE_TRANSACTION_KEY!);
14
15  const opaqueData = new ApiContracts.OpaqueDataType();
16  opaqueData.setDataDescriptor(descriptor || 'COMMON.ACCEPT.INAPP.PAYMENT');
17  opaqueData.setDataValue(nonce);
18
19  const paymentType = new ApiContracts.PaymentType();
20  paymentType.setOpaqueData(opaqueData);
21
22  const transactionRequestType = new ApiContracts.TransactionRequestType();
23  transactionRequestType.setTransactionType(ApiContracts.TransactionTypeEnum.AUTHCAPTURETRANSACTION);
24  transactionRequestType.setPayment(paymentType);
25  transactionRequestType.setAmount(amount.toFixed(2));
26
27  const createRequest = new ApiContracts.CreateTransactionRequest();
28  createRequest.setMerchantAuthentication(merchantAuthenticationType);
29  createRequest.setTransactionRequest(transactionRequestType);
30
31  return new Promise((resolve) => {
32    const ctrl = new ApiControllers.CreateTransactionController(createRequest.getJSON());
33    ctrl.setEnvironment(ApiContracts.Constants.endpoint.sandbox);
34
35    ctrl.execute(() => {
36      const apiResponse = ctrl.getResponse();
37      const response = new ApiContracts.CreateTransactionResponse(apiResponse);
38
39      if (response && response.getMessages().getResultCode() === ApiContracts.MessageTypeEnum.OK) {
40        const transId = response.getTransactionResponse().getTransId();
41        resolve(NextResponse.json({ transactionId: transId }));
42      } else {
43        const errorText =
44          response?.getTransactionResponse()?.getErrors()?.getError()?.[0]?.getErrorText() ||
45          response?.getMessages()?.getMessage()?.[0]?.getText() ||
46          'Transaction failed';
47        resolve(NextResponse.json({ error: errorText }, { status: 400 }));
48      }
49    });
50  });
51}

1// app/api/authorize-webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5export async function POST(request: NextRequest) {
6  const body = await request.text();
7  const signature = request.headers.get('x-anet-signature');
8
9  if (!signature) {
10    return NextResponse.json({ error: 'Missing signature' }, { status: 401 });
11  }
12
13  // Authorize.Net sends SHA512=<hash>
14  const expectedSig = crypto
15    .createHmac('sha512', process.env.AUTHORIZE_WEBHOOK_KEY!)
16    .update(body)
17    .digest('hex')
18    .toUpperCase();
19
20  const receivedSig = signature.replace('SHA512=', '').toUpperCase();
21
22  if (expectedSig !== receivedSig) {
23    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
24  }
25
26  const event = JSON.parse(body);
27
28  if (event.eventType === 'net.authorize.payment.authcapture.created') {
29    const transactionId = event.payload?.id;
30    const amount = event.payload?.authAmount;
31    console.log(`Payment captured: transaction ${transactionId} for $${amount}`);
32    // Update your database here
33  }
34
35  return NextResponse.json({ received: true });
36}