How to Integrate Bolt.new with Square

1# .env file additions
2# NEXT_PUBLIC_ = client-safe (Application ID only, never the access token)
3NEXT_PUBLIC_SQUARE_APP_ID=sandbox-sq0idb-your_application_id
4NEXT_PUBLIC_SQUARE_LOCATION_ID=your_sandbox_location_id
5# Use SQUARE_ENV=sandbox for development, production for live
6NEXT_PUBLIC_SQUARE_ENV=sandbox
7
8# Server-side only — never NEXT_PUBLIC_
9SQUARE_ACCESS_TOKEN=EAAAl_your_sandbox_access_token
10SQUARE_LOCATION_ID=your_sandbox_location_id

1// components/SquareCheckout.tsx
2'use client';
3import { useEffect, useRef, useState } from 'react';
4
5declare global {
6  interface Window {
7    Square?: {
8      payments: (appId: string, locationId: string) => Promise<{
9        card: () => Promise<{
10          attach: (selector: string) => Promise<void>;
11          tokenize: () => Promise<{ status: string; token?: string; errors?: Array<{ message: string }> }>;
12        }>;
13      }>;
14    };
15  }
16}
17
18interface SquareCheckoutProps {
19  amount: number; // in cents
20  currency?: string;
21  onSuccess: (paymentId: string) => void;
22}
23
24export function SquareCheckout({ amount, currency = 'USD', onSuccess }: SquareCheckoutProps) {
25  const cardRef = useRef<{ tokenize: () => Promise<{ status: string; token?: string }> } | null>(null);
26  const [status, setStatus] = useState<'loading' | 'ready' | 'processing' | 'success' | 'error'>('loading');
27  const [errorMessage, setErrorMessage] = useState('');
28
29  useEffect(() => {
30    async function initializeSquare() {
31      if (!window.Square) {
32        setErrorMessage('Square Web Payments SDK not loaded');
33        setStatus('error');
34        return;
35      }
36      try {
37        const payments = await window.Square.payments(
38          process.env.NEXT_PUBLIC_SQUARE_APP_ID ?? '',
39          process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID ?? ''
40        );
41        const card = await payments.card();
42        await card.attach('#card-container');
43        cardRef.current = card;
44        setStatus('ready');
45      } catch (err) {
46        console.error('Square initialization error:', err);
47        setStatus('error');
48      }
49    }
50    initializeSquare();
51  }, []);
52
53  async function handlePay() {
54    if (!cardRef.current) return;
55    setStatus('processing');
56    setErrorMessage('');
57    try {
58      const result = await cardRef.current.tokenize();
59      if (result.status !== 'OK' || !result.token) {
60        setErrorMessage('Card tokenization failed. Please check your card details.');
61        setStatus('ready');
62        return;
63      }
64      const response = await fetch('/api/square/charge', {
65        method: 'POST',
66        headers: { 'Content-Type': 'application/json' },
67        body: JSON.stringify({ sourceId: result.token, amount, currency }),
68      });
69      const data = await response.json();
70      if (!response.ok) throw new Error(data.error ?? 'Payment failed');
71      setStatus('success');
72      onSuccess(data.paymentId);
73    } catch (err) {
74      setErrorMessage(err instanceof Error ? err.message : 'Payment failed');
75      setStatus('ready');
76    }
77  }
78
79  return (
80    <div className="max-w-md mx-auto p-6 border rounded-lg">
81      <div id="card-container" className="mb-4 min-h-[100px]" />
82      {errorMessage && <p className="text-red-500 text-sm mb-3">{errorMessage}</p>}
83      <button
84        onClick={handlePay}
85        disabled={status !== 'ready'}
86        className="w-full py-3 bg-black text-white rounded font-medium disabled:opacity-50"
87      >
88        {status === 'loading' ? 'Loading...' : status === 'processing' ? 'Processing...' : `Pay $${(amount / 100).toFixed(2)}`}
89      </button>
90    </div>
91  );
92}

1// app/api/square/charge/route.ts
2import { NextResponse } from 'next/server';
3import { Client, Environment } from 'squareup';
4
5const squareClient = new Client({
6  accessToken: process.env.SQUARE_ACCESS_TOKEN ?? '',
7  environment: process.env.NEXT_PUBLIC_SQUARE_ENV === 'production'
8    ? Environment.Production
9    : Environment.Sandbox,
10});
11
12export async function POST(request: Request) {
13  try {
14    const { sourceId, amount, currency = 'USD' } = await request.json();
15
16    if (!sourceId) {
17      return NextResponse.json({ error: 'sourceId is required' }, { status: 400 });
18    }
19    if (!amount || amount < 1) {
20      return NextResponse.json({ error: 'Amount must be at least 1 cent' }, { status: 400 });
21    }
22
23    const response = await squareClient.paymentsApi.createPayment({
24      sourceId,
25      idempotencyKey: crypto.randomUUID(),
26      amountMoney: {
27        amount: BigInt(amount),
28        currency,
29      },
30      locationId: process.env.SQUARE_LOCATION_ID,
31    });
32
33    const payment = response.result.payment;
34    if (!payment) {
35      return NextResponse.json({ error: 'Payment creation failed' }, { status: 500 });
36    }
37
38    return NextResponse.json({
39      success: true,
40      paymentId: payment.id,
41      status: payment.status,
42      receiptUrl: payment.receiptUrl,
43    });
44  } catch (error: unknown) {
45    console.error('Square payment error:', error);
46    const squareError = error as { errors?: Array<{ detail?: string; code?: string }> };
47    const detail = squareError.errors?.[0]?.detail ?? 'Payment processing failed';
48    return NextResponse.json({ error: detail }, { status: 500 });
49  }
50}

1// app/api/square/catalog/route.ts
2import { NextResponse } from 'next/server';
3import { Client, Environment } from 'squareup';
4
5const squareClient = new Client({
6  accessToken: process.env.SQUARE_ACCESS_TOKEN ?? '',
7  environment: process.env.NEXT_PUBLIC_SQUARE_ENV === 'production'
8    ? Environment.Production
9    : Environment.Sandbox,
10});
11
12export async function GET() {
13  try {
14    const response = await squareClient.catalogApi.listCatalog(
15      undefined, // cursor for pagination
16      'ITEM'     // only fetch items, not categories/taxes/discounts
17    );
18
19    const items = (response.result.objects ?? []).map((obj) => {
20      const item = obj.itemData;
21      const firstVariation = item?.variations?.[0]?.itemVariationData;
22      return {
23        id: obj.id,
24        name: item?.name ?? 'Unnamed item',
25        description: item?.description ?? '',
26        price: Number(firstVariation?.priceMoney?.amount ?? 0),
27        currency: firstVariation?.priceMoney?.currency ?? 'USD',
28        variationId: item?.variations?.[0]?.id,
29      };
30    });
31
32    return NextResponse.json({ items });
33  } catch (error) {
34    console.error('Square catalog error:', error);
35    return NextResponse.json({ error: 'Failed to fetch catalog' }, { status: 500 });
36  }
37}