> ## Documentation Index
> Fetch the complete documentation index at: https://developer.quickei.io/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript SDK
> Accept payments on any website with a few lines of code
Drop a single script tag into your website and start accepting payments with Quickei. No backend required — the SDK handles the entire checkout flow in a secure inline modal or popup window.
## Installation
Add the Quickei SDK to your page:
```html theme={null}
```
Load the script before your payment code runs. Place it in the `` or just before your closing `` tag.
## Quick Start
```html theme={null}
My Store
```
## API Reference
### Constructor
```javascript theme={null}
const quickei = new Quickei({ publicKey });
```
| Parameter | Type | Required | Description |
| ----------- | -------- | -------- | ------------------------------------------------------------------------ |
| `publicKey` | `string` | Yes | Your public key (`client_id`) from the Merchant Dashboard → API Settings |
### `quickei.pay(options)`
Opens an inline iframe modal overlay on the current page. The customer completes payment without leaving your site.
```javascript theme={null}
quickei.pay({
amount: 25.00,
currency: 'EUR',
reference: 'INV-2026-001',
description: 'Premium subscription',
customer: { email: 'john@example.com', name: 'John Doe' },
callbackUrl: 'https://mystore.com/webhook',
onSuccess: (response) => { /* ... */ },
onCancel: () => { /* ... */ },
onError: (error) => { /* ... */ }
});
```
### `quickei.popup(options)`
Opens payment in a new popup window. Takes the same parameters as `pay()`. Use this when your site has strict CSP rules or you prefer a separate window.
```javascript theme={null}
quickei.popup({
amount: 50.00,
currency: 'USD',
reference: 'ORD-789',
onSuccess: (response) => {
console.log('Paid:', response.trx_id);
}
});
```
### `quickei.close()`
Programmatically close the payment modal or popup. Useful for timeout scenarios or navigation changes.
```javascript theme={null}
// Close after 5 minutes of inactivity
setTimeout(() => quickei.close(), 5 * 60 * 1000);
```
## Parameters
All parameters for `pay()` and `popup()`:
| Parameter | Type | Required | Description |
| ---------------- | ---------- | -------- | ------------------------------------------------- |
| `amount` | `number` | Yes | Payment amount (e.g. `25.00`) |
| `currency` | `string` | Yes | ISO 4217 currency code (e.g. `EUR`, `USD`, `XOF`) |
| `reference` | `string` | Yes | Your unique order/invoice reference |
| `description` | `string` | No | Human-readable description shown to the customer |
| `customer` | `object` | No | Customer details (see below) |
| `customer.email` | `string` | No | Customer email address |
| `customer.name` | `string` | No | Customer full name |
| `callbackUrl` | `string` | No | Server-side webhook URL for payment notifications |
| `onSuccess` | `function` | No | Called when payment completes successfully |
| `onCancel` | `function` | No | Called when customer closes the payment modal |
| `onError` | `function` | No | Called on payment failure or network error |
## Callback Response
The `onSuccess` callback receives a response object:
```javascript theme={null}
{
"reference": "INV-2026-001",
"trx_id": "TRX-A1B2C3D4",
"amount": 25.00,
"currency": "EUR",
"status": "success"
}
```
| Field | Type | Description |
| ----------- | -------- | ----------------------------- |
| `reference` | `string` | Your original order reference |
| `trx_id` | `string` | Quickei transaction ID |
| `amount` | `number` | Amount paid |
| `currency` | `string` | Currency of the payment |
| `status` | `string` | Payment status (`success`) |
Always verify the payment on your server using the `callbackUrl` webhook or the [Check Payment Status](/api-reference/03-check-payment-status) endpoint. Client-side callbacks can be spoofed.
## Sandbox vs Production
Use key prefixes to switch between environments:
| Environment | Key Prefix | Base URL |
| -------------- | ---------- | -------------------------------- |
| **Sandbox** | `qi_test_` | `https://quickei.io/pay/sandbox` |
| **Production** | `qi_live_` | `https://quickei.io/pay` |
The SDK automatically detects the environment based on your key prefix. No code changes needed — just swap the key.
```javascript theme={null}
// Sandbox — test payments, no real charges
const quickei = new Quickei({
publicKey: 'qi_test_abc123def456'
});
// Production — real payments
const quickei = new Quickei({
publicKey: 'qi_live_abc123def456'
});
```
## Examples
### Complete Checkout Page
A full checkout page with order summary and payment button:
```html theme={null}
Checkout — My Store
Order Summary
Premium Plan (1 year)99.00 EUR
Setup fee10.00 EUR
Total109.00 EUR
```
### Custom Button Styling
You can trigger the payment from any element. Style it however you want:
```html theme={null}
```
## Security
The SDK uses your **public key** (`client_id`). Never include your `client_secret` in client-side code — it would allow anyone to make API calls on your behalf.
Always confirm payments server-side using webhooks or the payment status API. Client-side callbacks are for UX only — they can be tampered with.
The SDK only loads on pages served over HTTPS. Callback URLs must also use HTTPS.
If you use Content Security Policy headers, allow `https://quickei.io` in `frame-src` and `script-src` directives.
## Browser Support
The SDK works in all modern browsers:
| Browser | Minimum Version |
| ------------- | --------------- |
| Chrome | 60+ |
| Firefox | 55+ |
| Safari | 12+ |
| Edge | 79+ (Chromium) |
| Opera | 47+ |
| Mobile Chrome | 60+ |
| Mobile Safari | 12+ |
Internet Explorer is not supported. The SDK uses modern JavaScript features (Promises, `fetch`, arrow functions) that require a modern browser.