Bolt.new AI and Square integration: Step-by-Step Guide 2025

To integrate Bolt.new with Square, you don’t “connect Bolt to Square” directly. Instead, you build code inside Bolt.new that talks to Square’s real APIs using Square's REST endpoints or their official SDKs. Bolt.new is simply your browser‑based dev environment, so the integration works exactly like in any Node.js or Python backend: you provide your Square access token through environment variables, call Square’s API from server-side routes, and test responses inside the Bolt runtime. From there you can scaffold a minimal backend route (like /create-payment), add Square's access token to Environment Variables in Bolt.new, and make fetch or SDK calls. That’s the entire integration pattern.

 

What You Actually Do to Integrate Bolt.new with Square

 

Square offers REST APIs and official Node.js SDK. Bolt.new runs Node on the server-side, so you integrate by installing the SDK, configuring environment variables, and writing backend routes that call Square's services.

You never give the token directly to the frontend — Square requires server-side handling for all sensitive operations. Bolt.new supports environment variables, so you put the Square token there.

 

• Use OAuth or a Personal Access Token from Square Developer Dashboard for server-side calls.
• Never expose the token in frontend code, even inside Bolt.
• Use fetch() or Square’s SDK from a Bolt.new backend route.
• Test the API call using Bolt’s built-in sandbox server.

 

Step-by-step Integration (Real, Valid, Works in Bolt.new)

 

Below is the exact, real flow you’d use.

• Create a Square Developer account and app.
• Take the Access Token (Sandbox token for testing).
• Open your Bolt.new workspace → Environment tab → Add variable:
  NAME: SQUARE_ACCESS_TOKEN
  VALUE: (your Square sandbox token)
• Install the official SDK in Bolt.new’s terminal.

 

npm install square

 

Example: Backend route in Bolt.new calling Square’s Payments API

 

This is a real, minimal, valid Node.js example you can drop inside a Bolt.new server file (e.g., api/create-payment.js or inside an Express server route).

// api/create-payment.js
import { Client, Environment } from "square";

export default async function handler(req, res) {
  try {
    const client = new Client({
      accessToken: process.env.SQUARE_ACCESS_TOKEN, // protected in Bolt env
      environment: Environment.Sandbox
    });

    const paymentsApi = client.paymentsApi;

    const body = {
      sourceId: req.body.sourceId, // e.g. card nonce from Square Web Payments SDK
      idempotencyKey: crypto.randomUUID(), // required by Square
      amountMoney: {
        amount: 100, // 1.00 USD
        currency: "USD"
      }
    };

    const result = await paymentsApi.createPayment(body);

    res.status(200).json(result);
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Square payment failed", error: err });
  }
}

 

Notes to understand this:

• sourceId is generated on the client side using the Square Web Payments SDK. Bolt.new can host that client code too.
• idempotencyKey prevents duplicate charges. Square requires it.
• Environment.Sandbox means you are hitting Square's sandbox servers.

 

Client-side Example (Bolt.new frontend) to generate sourceId

 

Square requires their official Web Payments SDK in the browser to tokenize card data. You load the script and mount a card form.

<script type="text/javascript" src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<div id="card"></div>
<button id="payBtn">Pay</button>

<script>
// Replace with your real Square Sandbox App ID
const payments = Square.payments("REPLACE_APP_ID", "REPLACE_LOCATION_ID");

(async () => {
  const card = await payments.card();
  await card.attach("#card");

  document.getElementById("payBtn").onclick = async () => {
    const tokenResult = await card.tokenize();
    if (tokenResult.status === "OK") {
      const sourceId = tokenResult.token;

      // Send sourceId to your Bolt backend route
      const res = await fetch("/api/create-payment", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sourceId })
      });

      const data = await res.json();
      console.log("Payment response:", data);
    }
  };
})();
</script>

 

• The browser collects card data safely through Square’s PCI‑compliant elements.
• The server (Bolt backend route) makes the actual payment request.

 

Key Integration Principles (Most Important)

 

• All sensitive Square operations always run server-side inside Bolt.new code.
• Environment variables store tokens, never hard-coded.
• Use Square’s official SDK for reliability.
• Handle errors & idempotency because Square requires it for payments.
• Test in Square Sandbox first — do not hit production until verified.

 

Summary in One Sentence

 

You integrate Bolt.new with Square exactly like any Node.js app: install Square’s SDK, add your Square access token to Bolt environment variables, write backend routes that call Square APIs, and use the Square Web Payments SDK on the frontend to securely generate payment tokens.