How to connect other APIs to your website or app (safely)

Almost every feature beyond the basics comes from another service: sending email, generating text with an AI model, showing a map, calculating shipping, sending invoices to your accounting software. Each one is connected through its API, a documented way for your app to send requests and get answers back. The pattern is the same every time, and getting it right once protects your keys, your users and your budget.

Read the docs first

Before connecting anything, find four things in the provider's documentation:

• How you authenticate: usually an API key, sometimes OAuth (where users connect their own account).
• Pricing: free allowance, cost per request, and what happens when you exceed it.
• Rate limits: how many requests you can make per second or minute.
• A test mode or sandbox, so you can build without real side effects.

Keep keys on the server

Anything in your front-end code can be read by anyone who visits your site. So never call a paid or private API directly from the browser with a secret key. Instead, the browser calls a small function on your server (a serverless function on your host, or a Supabase Edge Function), and that function calls the API with the key from its environment variables:

// A server-side route: the key never reaches the browser
export default async function handler(req, res) {
  const r = await fetch('https://api.example.com/v1/quote', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + process.env.EXAMPLE_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ postcode: req.body.postcode }),
    signal: AbortSignal.timeout(10000),
  });
  if (!r.ok) return res.status(502).json({ error: 'Quote service unavailable' });
  res.json(await r.json());
}

This also lets you check that the user is logged in and allowed to make the request before you spend money on it.

Handle failure gracefully

• Timeouts: don't let one slow service freeze your page.
• Friendly errors: show "We couldn't get a quote right now — try again" rather than a blank screen or raw error text.
• Retries with backoff for temporary failures, and never for requests that would charge or send something twice.
• Logging: record failures on the server so you can see them.

Respect rate limits and cache

If the same answer is requested often (exchange rates, product details, a map of a fixed address), store it for a while instead of asking every time. It's faster for users, cheaper for you, and keeps you under the provider's limits.

Verify incoming webhooks

Many services push events to you: "payment received", "email bounced", "order shipped". Treat every incoming webhook as untrusted until you've verified its signature with the secret the provider gives you, exactly as with Stripe webhooks. Then make your handler safe to run twice, because providers retry.

Control costs

• Set usage alerts and hard limits in each provider's dashboard where available.
• Limit usage per user in your own app, especially for AI features, where one person can run up a real bill.
• Restrict keys where the provider allows: to specific domains, IP addresses or permissions.
• Rotate a key immediately if it ever appears in code, a screenshot or a chat.

Let Claude Code do the wiring

Connect the [service] API to send a confirmation email when a booking
is created. Docs: [link to the official API docs].
- Put the call in a server-side function; read the key from
  [SERVICE]_API_KEY in .env.
- Wrap it in one small module so we can swap providers later.
- Handle errors without breaking the booking, and log failures.
- Add a test that mocks the API response. Show me the plan first.

Linking the official docs matters: APIs change, and the docs are the source of truth. Some services also publish MCP servers that let Claude Code use their tools directly. See part 2.

Checklist for every new API

• Key stored in environment variables, used only on the server.
• Tested in sandbox or test mode first.
• Timeouts, friendly errors and logging in place.
• Usage alerts or limits set.
• Incoming webhooks verified and safe to repeat.
• The provider's terms read, especially on how you may display or store its data.

Next: earn commission through your website. Some affiliate programs also work through APIs.