Astro Integration

npm create astro@latest my-sendable-app
cd my-sendable-app

SENDABLE_API_KEY=your_api_key_here

import type { APIRoute } from 'astro'

export const POST: APIRoute = async ({ request }) => {
  const { to, text } = await request.json()

  const response = await fetch('https://api.sendable.dev/messages/send', {
    method: 'POST',
    headers: {
      'x-api-key': import.meta.env.SENDABLE_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ to, text }),
  })

  return new Response(JSON.stringify(await response.json()), {
    status: response.status,
  })
}

<form id="message-form">
  <input name="to" placeholder="Phone number" required />
  <textarea name="text" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
  <p id="status"></p>
</form>

<script>
  const form = document.getElementById('message-form')
  const status = document.getElementById('status')

  form?.addEventListener('submit', async (e) => {
    e.preventDefault()
    const data = new FormData(form)
    
    const res = await fetch('/api/send-message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        to: data.get('to'),
        text: data.get('text'),
      }),
    })

    status!.textContent = res.ok ? 'Sent!' : 'Failed'
  })
</script>