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

To integrate Bolt.new with Sage Pay, you don’t connect “Bolt” to Sage Pay directly. Instead, you build a normal backend (Node/Express, Python/FastAPI, etc.) inside Bolt.new’s sandbox, call Sage Pay’s REST API from that backend, and expose a secure payment endpoint to your frontend. Sage Pay (now called Opayo by Elavon) only communicates through API calls and server-side signatures, so the integration is a standard server‑to‑payment‑gateway flow using REST + cryptographic signing. Bolt.new just gives you a browser IDE and a runtime to test these calls with environment variables.

 

How Bolt.new actually integrates with Sage Pay

 

You create a backend route in Bolt.new, store your Opayo (Sage Pay) credentials in environment variables, generate the required encrypted payload on the server, send it to Sage Pay's REST endpoint, and return the response or redirect URL to your frontend. Nothing is automatic. You must implement the Opayo protocol correctly.

The minimal steps:

• You get Opayo API credentials (VendorName, Integration Key, Integration Password).
• You store these in Bolt.new’s environment variables panel.
• You build a backend route that generates a payment request.
• You call Opayo’s POST /transactions REST endpoint.
• You receive a transactionId and redirectUrl.
• You send the user to that URL to complete payment.

 

Important background (explained simply)

 

Opayo (formerly Sage Pay) works like Stripe Checkout but older: your server signs every request with an integration key and password. You never expose these to the frontend. Bolt.new gives you a Node.js runtime where you can securely store secrets in environment variables. This is where you place your Opayo credentials.

Then you build an API route like /api/pay. Your frontend calls it, your server contacts Opayo, Opayo returns a URL, and your user goes to that URL to enter card info. You never see the card details.

 

Minimal working backend example (Node/Express inside Bolt.new)

 

Assuming Opayo’s REST protocol (JSON API) and using environment variables:

// server.js (Express backend in Bolt.new)

import express from "express";
import fetch from "node-fetch";

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

app.post("/api/pay", async (req, res) => {
  try {
    // These must be defined in Bolt.new environment variables UI
    const vendorName = process.env.OPAYO_VENDOR_NAME; 
    const integrationKey = process.env.OPAYO_INTEGRATION_KEY;
    const integrationPassword = process.env.OPAYO_INTEGRATION_PASSWORD;

    const body = {
      transactionType: "Payment",
      paymentMethod: {
        card: {
          // If you're redirecting, you do NOT collect card directly
          // For redirect flow, only amount + description are needed
        }
      },
      vendorTxCode: "TX-" + Date.now(), // Unique per transaction
      amount: 1000, // in pennies/cents
      currency: "GBP",
      description: "Test purchase",
      apply3DSecure: "UseMSPSetting",
      customerEmail: "[email protected]"
    };

    const response = await fetch("https://pi-live.sagepay.com/api/v1/transactions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Vendor-Name": vendorName,
        "X-Integration-Key": integrationKey,
        "X-Integration-Password": integrationPassword
      },
      body: JSON.stringify(body)
    });

    const data = await response.json();

    // The important part: Opayo returns a redirect URL
    return res.json({
      transactionId: data.transactionId,
      redirectUrl: data.redirectUrl
    });

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

app.listen(3000, () => {
  console.log("Server running on :3000");
});

 

Frontend flow inside Bolt.new

 

Your frontend (React or vanilla JS) simply calls /api/pay and then sends the browser to the redirectUrl:

// frontend example

async function startPayment() {
  const res = await fetch("/api/pay", { method: "POST" });
  const data = await res.json();
  window.location.href = data.redirectUrl; // User completes payment here!
}

 

Webhook handling

 

Opayo can notify your backend when payment succeeds. You create another endpoint (for example /api/opayo-webhook) and configure it in Opayo’s dashboard. This lets you confirm the payment and update orders. Bolt.new supports this normally because it's just an HTTP POST target.

 

Security inside Bolt.new

 

The key rules:

• Never store Opayo credentials in your frontend.
• Use environment variables inside Bolt.new runtime.
• All Opayo signature headers are added server-side.
• Frontend never handles card info directly when using redirect flow.

 

Summary in plain words

 

Bolt.new doesn’t “integrate” with Sage Pay automatically. You build a normal Node backend inside Bolt.new, store Sage Pay credentials as environment variables, call the Sage Pay REST API from the backend, and redirect the user to complete payment. This is exactly how you’d integrate Sage Pay anywhere—Bolt.new just gives you a fast environment to write and run the code.