APIs: plugging in other services
Lesson 16 of 26 in the course “Vibe coding”. Free, with animations and a quiz.
APIs: programs talking
An API (application programming interface) is how one program asks another to do something. Like a waiter: you don't walk into the kitchen, you give your order and the dish comes to you. Your server sends a request, the service answers with data. Example for this lesson: a booking site for your friend the barber. A client books, and the site sends an email, takes a deposit and answers questions on its own.
What you can plug in
Almost everything useful already exists as an API. Email: Resend or Brevo will send “you're booked for Friday”. Payments: Stripe or a local payment provider in your country. AI: the Anthropic or OpenAI API, so a bot can answer clients. Plus weather, maps, translation. In the figure that's the box on the right. Check that the service and payments are available in your country.
The key's path
The setup is almost always the same. 1) Sign up for the service. 2) Get an API key: a password for programs (see the keys lesson). 3) Put it in the server's environment variables, not in the code. 4) The server uses the key to call the API. 5) The frontend only calls your server. The browser never sees the key: as in the figure, the key lives on the server.
Webhook: the service calls you
Usually you make the call: your server asks, the service answers. A webhook is the reverse: the service knocks on your server's address when something happens. Example: a client pays for a haircut, the payment service sends a “payment succeeded” webhook, and your server marks the booking as paid. That's the dashed arrow in the figure. Verify the webhook's signature so your server knows it's really the service, not a prankster.
Docs and test mode
Documentation (docs) is the service's manual for using its API. Give the agent the link to the docs and ask it to follow them: fewer made-up details. Start in test mode: payment services have a sandbox where payments are fake and no money moves. Walk through the whole path: booking, email, payment, webhook. Works? Only then switch to the live keys, meaning the real ones.
Check yourself
- Where should the payment service's API key live?
Correct answer: In the server's environment variables. A key on the server is invisible to the browser. The frontend asks your server, and the server uses the key to call the API. - What is a webhook?
Correct answer: The service calls your server when something happens. Usually your server asks. A webhook is the reverse: the service tells you itself, for example “payment succeeded”. - How should you start adding payments?
Correct answer: With test mode, where no money moves. In the sandbox you can test the whole path as much as you want with no risk. Switch to live keys once everything works.