Web Drop-in Widget

Browser   No framework required

Add a complete payment checkout modal to any website with one script tag. No framework. No build step.

CDN (recommended)

<script src="https://cdn.jsdelivr.net/npm/@neptune.fintech/astro-web/dist/astro-checkout.umd.js"></script>

<button onclick="launchCheckout()">Pay 500 LYD</button>

<script>
async function launchCheckout() {
  // 1. Create session on your server first
  const { session_id } = await fetch('/api/create-payment', {
    method: 'POST',
    body: JSON.stringify({ amount: 500000, reference: 'order_1042' })
  }).then(r => r.json())

  // 2. Open the Astro checkout modal
  AstroCheckout.checkout({
    sessionId: session_id,
    gatewayUrl: 'https://astro.neptune.ly',
    onSuccess(result) {
      console.log('Paid!', result.reference)
      window.location = '/order/' + result.reference + '/success'
    },
    onFailure(err) {
      alert('Payment failed: ' + err.message)
    },
    onCancel() {
      console.log('Customer cancelled')
    }
  })
}
</script>

npm

npm install @neptune.fintech/astro-web

import { checkout } from '@neptune.fintech/astro-web'

document.getElementById('pay-btn').addEventListener('click', async () => {
  const { session_id } = await createSessionOnServer()

  checkout({
    sessionId: session_id,
    gatewayUrl: 'https://astro.neptune.ly',
    onSuccess: (result) => console.log('Done:', result),
    onFailure: (err) => console.error(err),
  })
})

Options

interface CheckoutOptions {
  sessionId: string         // From your server's POST /payments/sessions response
  gatewayUrl: string        // Base URL of your Astro gateway
  locale?: 'ar' | 'en'     // Default: 'ar'
  theme?: 'light' | 'dark' // Default: 'light'
  onSuccess?: (result: { session_id: string, reference?: string }) => void
  onFailure?: (error: { code: string, message: string }) => void
  onCancel?: () => void
}

Flow

1. Your server creates a PaymentSession  →  returns session_id
2. Your page calls AstroCheckout.checkout({ sessionId })
3. Modal appears — customer enters alias/IBAN + OTP
4. Astro processes the payment
5. onSuccess fires — redirect to your thank-you page

Session creation is server-side

Never create sessions in the browser — your merchant API key would be exposed. Create sessions on your backend and pass only the session_id to the frontend.

Dismiss programmatically

import { dismiss } from '@neptune.fintech/astro-web'
dismiss() // closes the modal

Source

packages/astro-web-sdk/ in the neptune-astro repo.