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

You integrate Braintree into a Bolt.new project exactly the same way you integrate it into any Node.js backend: you install the official Braintree SDK inside Bolt’s workspace, store your Braintree credentials in Bolt environment variables, and expose backend API routes that your frontend calls to create payment tokens or transactions. Bolt does not have any special “AI integration layer” for Braintree — you wire it manually through standard REST/SDK patterns. Once wired, the AI assistant can scaffold files, generate routes, and help you iterate, but the actual integration is standard code.

 

What integration actually looks like

 

In practical terms, you do three things:

• Install the official Braintree Node SDK in Bolt.new.
• Store credentials in Bolt environment variables (merchant ID, public key, private key).
• Create backend routes that talk to Braintree: usually a route to generate a Client Token and a route to submit a Transaction.

Everything else (UI, forms, validation) is just wiring around those two backend endpoints.

 

Step-by-step: how to integrate Braintree inside Bolt.new

 

I’ll walk through it in a way a junior dev can follow without guessing.

• Step: Install Braintree SDK
  Open the Bolt.new terminal and run:

npm install braintree

• Step: Add environment variables
  In Bolt.new, open the environment variables panel and add:

BT_MERCHANT_ID = your real Merchant ID
BT_PUBLIC_KEY = your Public Key
BT_PRIVATE_KEY = your Private Key
BT\_ENVIRONMENT = Sandbox

(Bolt environment variables behave like a normal Node process.env.)

• Step: Create a Braintree gateway client
  Put this in a file like /server/braintree.js:

// server/braintree.js
import braintree from "braintree";

export const gateway = new braintree.BraintreeGateway({
  environment: braintree.Environment.Sandbox, // use Production later
  merchantId: process.env.BT_MERCHANT_ID,
  publicKey: process.env.BT_PUBLIC_KEY,
  privateKey: process.env.BT_PRIVATE_KEY
});

• Step: Create backend route to generate a client token
  This token is required for Braintree’s client-side Drop-In UI or SDK.

// server/routes/generateToken.js
import express from "express";
import { gateway } from "../braintree.js";

const router = express.Router();

router.get("/token", async (req, res) => {
  try {
    const { clientToken } = await gateway.clientToken.generate({});
    res.json({ clientToken });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

export default router;

• Step: Create backend route to submit a transaction

// server/routes/checkout.js
import express from "express";
import { gateway } from "../braintree.js";

const router = express.Router();

router.post("/checkout", async (req, res) => {
  try {
    const nonceFromClient = req.body.paymentMethodNonce;

    const result = await gateway.transaction.sale({
      amount: "10.00", // example
      paymentMethodNonce: nonceFromClient,
      options: {
        submitForSettlement: true
      }
    });

    res.json(result);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

export default router;

• Step: Register these routes in your server index

// server/index.js
import express from "express";
import generateToken from "./routes/generateToken.js";
import checkout from "./routes/checkout.js";

const app = express();
app.use(express.json());

app.use("/api", generateToken);
app.use("/api", checkout);

app.listen(3000, () => console.log("Server running"));

• Step: Connect your frontend
  Your UI (React/Vue/etc inside Bolt.new) retrieves token and submits nonce:

// Example React snippet

async function loadClientToken() {
  const res = await fetch("/api/token");
  const data = await res.json();
  return data.clientToken;
}

async function submitPayment(nonce) {
  const res = await fetch("/api/checkout", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ paymentMethodNonce: nonce })
  });
  return res.json();
}

This works with Braintree Drop-In UI or any payment method Braintree supports.

 

Important notes for Bolt usage

 

• Bolt cannot store secret keys in the frontend; always use environment variables on the backend.
• All Braintree API calls must happen on the backend — never in the browser.
• OAuth is not used here; Braintree uses static credentials for server-to-server auth.
• You can test the whole flow inside Bolt just like a normal Node+React project.

Once you move outside Bolt to production hosting, you simply copy these env vars and deploy the same backend code.