API Integration Examples: Six Workflows

By the InfiniSynapse Data Team · Last updated: 2026-09-27 · We build InfiniSynapse and write these notes like a builder posting after a Reddit thread—not a brochure for vibe-coded products moving to real APIs and data infrastructure.

Table of Contents

1. TL;DR
2. Key Definition
3. How to Read These Examples
4. Which Example Matches the Job
5. Rollout Order
6. Example 1: Stripe Webhook → Entitlement
7. Example 2: OAuth Login Proxy
8. Example 3: Slack Alert on Form Submit
9. Example 4: Geocoding Behind a Proxy
10. Example 5: Transactional Email
11. Example 6: Async PDF Report
12. Pattern Comparison Matrix
13. Readiness Scorecard
14. InfiniSynapse Connection
15. Operating Model
16. Failure Modes
17. Rollout Detail
18. Case Study
19. FAQ
20. Conclusion

TL;DR

Direct answer: API integration examples you can copy are six first production workflows: a Stripe webhook that grants entitlement, an OAuth login proxy, a Slack alert, a geocoding proxy, transactional email, and an async PDF report. Each keeps the vendor secret on the server and ships with one contract test.

If you have spent time in r/vibecoding, r/webdev, r/SaaS, and r/node, you have seen these arguments. Here is what teams actually wired after the UI demo—not abstract "integration layer" theory.

• Week 1: Stripe webhook + Supabase row update (Example 1).
• Week 2: Google OAuth via server callback (Example 2) + Slack on signup (Example 3).
• Later: Geocoding proxy, Resend email, async PDF (Examples 4–6).
• One working example beats six planned abstractions.

Who this is for: teams designing their first production workflows after vibe-coding the shell. What you'll learn: six API integration examples with code, a job map, a matrix, a scorecard, and a rollout order.

For pillar context see API Integration Services and Custom API Integration.

Key Definition

Key Definition: API integration examples are concrete, copy-adaptable workflow patterns—webhook handlers, OAuth callbacks, notification proxies, and async jobs—that teams implement as their first real external API connections.

They matter when your repo has pretty components but zero app/api/* routes that touch vendors.

Integration hygiene should align with OWASP API Security Top 10 from the first proxy route—not after a breach thread.

How to Read These Examples

Each of these API integration examples includes:

Pick one example, ship it with a contract test, then add the next—do not scaffold all six before any work in production.

Start with the smallest route that proves secrets stay server-side—usually Slack or a single webhook—before opening the architecture diagram tool.

Which example matches the job

These six routes are the API integration examples on this page. Pick the row that matches the job, then open that example.

API integration examples in rollout order

Ship one row, pass its contract test, then take the next. The same order is repeated with the case study below.

Example 1: Stripe Webhook → Entitlement

Trigger: User completes Stripe Checkout.
Sync vs async: Async—webhook updates DB; redirect is UX only.
Secret location: STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET in server env.

// app/api/webhooks/stripe/route.ts
import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const body = await req.text();
  const event = stripe.webhooks.constructEvent(
    body, req.headers.get("stripe-signature")!, process.env.STRIPE_WEBHOOK_SECRET!
  );
  if (event.type === "checkout.session.completed") {
    const session = event.data.object as Stripe.Checkout.Session;
    await db.users.update({ stripeCustomerId: session.customer, plan: "pro" });
  }
  return Response.json({ received: true });
}

Test hook: Stripe CLI stripe listen --forward-to localhost:3000/api/webhooks/stripe + test checkout.

Common failure: Unlocking features in success URL only—user closes tab. See Payment API Integration.

This is the mistake that shows up in r/stripe build logs—treat checkout redirect as confirmation UX, not entitlement source.

Webhook verification follows Stripe webhook signatures.

Example 2: OAuth Login Proxy

Trigger: User clicks "Sign in with Google."
Sync vs async: Sync redirect dance; session cookie at end.
Secret location: GOOGLE_CLIENT_SECRET, Supabase service role server-only.

// app/api/auth/google/callback/route.ts
export async function GET(req: Request) {
  const code = new URL(req.url).searchParams.get("code");
  const tokens = await exchangeGoogleCode(code!);
  const supabaseUser = await supabase.auth.signInWithIdToken({
    provider: "google",
    token: tokens.id_token,
  });
  return redirect("/dashboard");
}

Test hook: OAuth test user in Google Cloud Console; verify session in incognito.

Common failure: Client-side OAuth with secret in frontend bundle—rotate keys immediately.

Google OAuth setup is documented in Google Identity platform guides; keep redirect URIs in version control and secrets in env only.

Auth boundaries should reference NIST Cybersecurity Framework when production sessions touch customer data.

Example 3: Slack Alert on Form Submit

Trigger: Waitlist or contact form submit.
Sync vs async: Sync API call from server route (<2s); optional queue if volume grows.
Secret location: SLACK_BOT_TOKEN or incoming webhook URL in env.

// app/api/waitlist/route.ts
export async function POST(req: Request) {
  const { email } = await req.json();
  await saveWaitlist(email);
  await fetch("https://slack.com/api/chat.postMessage", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`, "Content-Type": "application/json" },
    body: JSON.stringify({ channel: "#signups", text: `New waitlist: ${email}` }),
  });
  return Response.json({ ok: true });
}

Test hook: Submit form in staging; confirm Slack message and DB row.

Common failure: Zapier plus custom route both posting—duplicate alerts. Pick one path per channel.

For iPaaS alternatives see Integration Platform.

Example 4: Geocoding Behind a Proxy

Trigger: User enters address; map or report needs lat/lng.
Sync vs async: Sync if vendor p95 under 500ms; cache results.
Secret location: MAPBOX_TOKEN or GOOGLE_MAPS_KEY server-only.

// app/api/geocode/route.ts
export async function POST(req: Request) {
  const { address } = await req.json();
  const cached = await cache.get(address);
  if (cached) return Response.json(cached);
  const res = await fetch(
    `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(address)}.json?access_token=${process.env.MAPBOX_TOKEN}`
  );
  const data = await res.json();
  const coords = { lat: data.features[0].center[1], lng: data.features[0].center[0] };
  await cache.set(address, coords, { ttl: 86400 });
  return Response.json(coords);
}

Test hook: Fixture address in CI; assert lat/lng shape.

Common failure: Mapbox token in React useEffect fetch—key appears in network tab and gets scraped.

Rate limits matter—cache geocode responses. Skipping the cache is how demo day blows a Mapbox quota.

Example 5: Transactional Email

Trigger: Signup, password reset, or report ready.
Sync vs async: Async preferred—enqueue send; never block checkout on email SMTP.
Secret location: RESEND_API_KEY or SendGrid key server-only.

// lib/email/sendWelcome.ts
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendWelcome(to: string) {
  await resend.emails.send({
    from: "team@yourapp.com",
    to,
    subject: "Welcome",
    html: "<p>Thanks for signing up.</p>",
  });
}

Test hook: Resend test mode or Mailtrap in staging.

Common failure: Awaiting email in webhook handler—Stripe retries while your SMTP hangs.

Email compliance should follow FTC consumer protection guidance for opt-out and truthful subject lines.

Example 6: Async PDF Report

Trigger: User requests export; generation exceeds five seconds.
Sync vs async: Async—return job id; poll or SSE for progress.
Secret location: Backend API keys; no vendor URLs in UI.

// app/api/reports/route.ts
export async function POST(req: Request) {
  const { reportId } = await req.json();
  const jobId = crypto.randomUUID();
  await queue.enqueue({ jobId, reportId });
  return Response.json({ jobId, status: "queued" });
}

// worker or InfiniSynapse newTask → workspace download URL

Test hook: Mock queue; assert job id returned in <200ms.

Common failure: Blocking serverless function on headless Chrome—timeout at 10s.

This pattern is where vibe-coded MVPs most often hit the five-second wall—queue early, polish UI later.

Long jobs align with Google SRE async patterns—never tie HTTP request lifetime to report generation.

InfiniSynapse Server API fits Example 6 when reports need federated SQL or multi-step agents—entitlement check first, then newTask.

Pattern Comparison Matrix

These six rows are the API integration examples. For a first week, row 3 (Slack) plus row 1 (Stripe) covers most needs.

Cloud deployment should follow AWS Well-Architected Framework even for single-route MVPs.

Readiness Scorecard

Before adding a seventh integration, score these basics (1 point each):

7–8: add the next example safely. Below 5: finish Example 1–3 before expanding.

Supabase documentation covers RLS when Examples 1–2 write user rows from server routes.

InfiniSynapse Connection

Examples 1–5 run on thin proxies; Example 6 often needs a data-agent backend. InfiniSynapse Server API handles SSE progress and workspace downloads after your proxy confirms auth and payment—same timeline whether users start from web or API. Replicate with Temporal or Inngest if preferred; the lesson is entitlement before compute spend.

See Production Readiness Checklist before beta traffic.

Operating Model

Even with copy-paste patterns, one integration owner should maintain:

• A vendor registry mapping example number → env vars → route path
• Weekly replay of failed webhooks from provider dashboards
• CI grep blocking sk_live, MAPBOX, and SLACK tokens in *.tsx files
• One-page runbook per example with sandbox URL and sample payload

Fifteen minutes weekly prevents six examples from becoming six untouchable scripts.

Failure Modes

Failure 1: Six half-built examples

No route fully tested—pick one row from the rollout table, finish its contract test, ship.

Failure 2: Copy-paste without env separation

Example 1: test Stripe keys in the production webhook URL—charges fail mysteriously.

Failure 3: iPaaS plus custom duplicate

Example 3: Zap and /api/waitlist both Slack post—disable one.

Failure 4: OAuth secret in NEXT_PUBLIC_

Example 2: immediate rotation and audit git history.

Failure 5: Sync PDF in API route

Example 6: serverless timeout; users see a spinner forever.

Rollout Order

Recommended sequence for these API integration examples:

Secure AI-adjacent stacks should cross-check UK NCSC guidelines for secure AI system development when Example 6 combines agents with user uploads.

Case Study: Waitlist to Paid Beta

A vibe-coded analytics tool had a Lovable waitlist form—no backend. The path over ten days:

Days 1–2: Example 3 (Slack) + Supabase waitlist table.
Days 3–5: Example 2 (Google OAuth) for beta login.
Days 6–8: Example 1 (Stripe webhook) for $29/mo beta tier.
Days 9–10: Example 5 (Resend welcome email on webhook).

Metrics:

• p95 /api/waitlist: 180ms including Slack post
• Webhook handler p95: 95ms; 0 duplicate entitlements across 8 Stripe replays
• First paying beta user: day 8
• Zero API keys in client bundle (CI grep gate)

Example 6 (PDF export) queued for week three—team refused to block beta on report generation.

That sequencing matches the rollout above: revenue and identity before heavy async compute.

Frequently Asked Questions

What are API integration examples?

API integration examples here are six concrete first workflows with code: Stripe webhook, OAuth proxy, Slack alert, geocoding proxy, transactional email, and async PDF. Each keeps the vendor secret on the server. They are starter routes, not an enterprise iPaaS catalog.

Which API integration example should I build first?

Slack or email if you need a feedback loop; Stripe webhook if you need revenue; OAuth if you need accounts. Pass that example's contract test before starting the next.

How does InfiniSynapse fit?

Example 6 async reports—proxy checks auth/payment, then InfiniSynapse runs long analysis with SSE progress.

Examples vs custom API integration?

Examples are starter patterns; Custom API Integration when plugins fail on legacy or signed APIs.

How long for all six?

Small team: 2–3 weeks sequential following the rollout order above. Do not parallelize until Examples 1–3 pass contract tests.

Conclusion

API integration examples are learned by shipping one pattern at a time: webhook entitlement, OAuth proxy, notify route, geocode cache, async email, queued PDF—not by drawing integration architecture posters first.

Priority order: Slack or Stripe webhook, OAuth, contract test per route, then expand.

Explore API Integration Services and copy the example closest to your next user story.