tsapay-checkout-js 1.0.0

package/dist/src/checkout.d.ts

@@ -0,0 +1,81 @@
+/**
+ * TsaPay Checkout — Drop-in payment modal for any website.
+ *
+ * Usage (vanilla):
+ *   <script src="https://cdn.tsapay.com/checkout.js"></script>
+ *   <script>
+ *     const checkout = new TsaPayCheckout('pk_test_xxx');
+ *     checkout.open({ amount: 5000 });
+ *   </script>
+ *
+ * Usage (npm / ES module):
+ *   import { TsaPayCheckout } from '@tsapay/checkout';
+ *   const checkout = new TsaPayCheckout('pk_test_xxx');
+ */
+export interface CheckoutOptions {
+    /** Amount in the smallest currency unit (e.g. 5000 for 5 000 XAF). */
+    amount: number;
+    /** ISO currency code. Default: "XAF". */
+    currency?: string;
+    /** Short description shown in the modal header. */
+    description?: string;
+    /** Your internal order reference. */
+    reference?: string;
+    /** URL to receive webhook after payment. */
+    callbackUrl?: string;
+    /** Arbitrary metadata to attach to the payment. */
+    metadata?: Record<string, string>;
+    /** Pre-fill the phone number field. */
+    phoneNumber?: string;
+    /** Pre-select a provider: "mtn_momo" | "orange_money". */
+    provider?: "mtn_momo" | "orange_money";
+    /** Called when payment succeeds. */
+    onSuccess?: (payment: PaymentResult) => void;
+    /** Called when payment fails or is cancelled. */
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    /** Called when the user closes the modal. */
+    onClose?: () => void;
+}
+export interface PaymentResult {
+    id: string;
+    status: string;
+    amount: number;
+    currency: string;
+    provider: string;
+    reference: string;
+}
+export declare class TsaPayCheckout {
+    private apiKey;
+    private baseUrl;
+    private overlay;
+    private styleEl;
+    private currentOpts;
+    private pollTimer;
+    /**
+     * Create a new TsaPayCheckout instance.
+     * @param apiKey  Your TsaPay API key (sk_test_... or sk_live_...).
+     * @param baseUrl Optional. Override the API base URL.
+     */
+    constructor(apiKey: string, baseUrl?: string);
+    /**
+     * Open the checkout modal with the given options.
+     */
+    open(opts: CheckoutOptions): void;
+    /**
+     * Programmatically close the checkout modal.
+     */
+    close(): void;
+    private injectCSS;
+    private formatAmount;
+    private destroy;
+    private createPayment;
+    private fetchPayment;
+    private renderForm;
+    private handleSubmit;
+    private renderWaiting;
+    private renderSuccess;
+    private renderError;
+}

package/dist/src/checkout.js

@@ -0,0 +1,513 @@
+/**
+ * TsaPay Checkout — Drop-in payment modal for any website.
+ *
+ * Usage (vanilla):
+ *   <script src="https://cdn.tsapay.com/checkout.js"></script>
+ *   <script>
+ *     const checkout = new TsaPayCheckout('pk_test_xxx');
+ *     checkout.open({ amount: 5000 });
+ *   </script>
+ *
+ * Usage (npm / ES module):
+ *   import { TsaPayCheckout } from '@tsapay/checkout';
+ *   const checkout = new TsaPayCheckout('pk_test_xxx');
+ */
+// ─────────────────────────────────────────────
+// Inline CSS (injected once)
+// ─────────────────────────────────────────────
+const CHECKOUT_CSS = `
+/* ── TsaPay Checkout Overlay ───────────────── */
+.tsapay-overlay {
+  position: fixed; inset: 0; z-index: 999999;
+  background: rgba(0,0,0,.55);
+  backdrop-filter: blur(6px);
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; transition: opacity .3s ease;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+.tsapay-overlay.tsapay-visible { opacity: 1; }
+
+/* ── Modal Card ────────────────────────────── */
+.tsapay-modal {
+  background: #fff; border-radius: 20px;
+  width: 420px; max-width: 94vw; max-height: 96vh;
+  overflow-y: auto; box-shadow: 0 25px 60px rgba(0,0,0,.35);
+  transform: translateY(30px) scale(.96);
+  transition: transform .35s cubic-bezier(.22,1,.36,1);
+}
+.tsapay-overlay.tsapay-visible .tsapay-modal {
+  transform: translateY(0) scale(1);
+}
+
+/* ── Header ────────────────────────────────── */
+.tsapay-header {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  padding: 28px 28px 22px; border-radius: 20px 20px 0 0;
+  position: relative;
+}
+.tsapay-header-brand {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
+}
+.tsapay-logo {
+  width: 32px; height: 32px; border-radius: 8px;
+  background: linear-gradient(135deg, #eab308, #22c55e);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 800; font-size: 14px; color: #0f172a;
+}
+.tsapay-brand-name {
+  font-size: 16px; font-weight: 700; color: #f1f5f9; letter-spacing: -.3px;
+}
+.tsapay-close-btn {
+  position: absolute; top: 18px; right: 18px;
+  width: 32px; height: 32px; border-radius: 50%;
+  background: rgba(255,255,255,.1); border: none;
+  color: #94a3b8; font-size: 18px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .2s, color .2s;
+}
+.tsapay-close-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
+.tsapay-amount {
+  font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -1px;
+}
+.tsapay-amount-currency {
+  font-size: 16px; font-weight: 500; color: #94a3b8; margin-left: 6px;
+}
+.tsapay-description {
+  font-size: 13px; color: #94a3b8; margin-top: 4px;
+}
+
+/* ── Body ──────────────────────────────────── */
+.tsapay-body { padding: 28px; }
+
+.tsapay-field { margin-bottom: 20px; }
+.tsapay-label {
+  display: block; font-size: 13px; font-weight: 600;
+  color: #334155; margin-bottom: 8px;
+}
+.tsapay-input {
+  width: 100%; padding: 14px 16px; border-radius: 12px;
+  border: 1.5px solid #e2e8f0; font-size: 15px; color: #0f172a;
+  outline: none; transition: border-color .2s, box-shadow .2s;
+  box-sizing: border-box; font-family: inherit;
+}
+.tsapay-input:focus {
+  border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15);
+}
+.tsapay-input::placeholder { color: #94a3b8; }
+
+/* ── Provider Selector ─────────────────────── */
+.tsapay-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.tsapay-provider {
+  position: relative; cursor: pointer;
+}
+.tsapay-provider input { position: absolute; opacity: 0; pointer-events: none; }
+.tsapay-provider-card {
+  padding: 16px; border-radius: 14px;
+  border: 2px solid #e2e8f0; text-align: center;
+  transition: all .2s ease; background: #fff;
+}
+.tsapay-provider-card:hover { border-color: #cbd5e1; background: #f8fafc; }
+.tsapay-provider input:checked + .tsapay-provider-card {
+  border-color: #22c55e; background: #f0fdf4;
+}
+.tsapay-provider-icon {
+  font-size: 28px; margin-bottom: 6px; display: block;
+}
+.tsapay-provider-name {
+  font-size: 13px; font-weight: 700; color: #0f172a;
+}
+.tsapay-provider-sub {
+  font-size: 11px; color: #64748b; margin-top: 2px;
+}
+
+/* ── Submit Button ─────────────────────────── */
+.tsapay-submit {
+  width: 100%; padding: 16px; border-radius: 14px;
+  border: none; cursor: pointer; font-size: 15px;
+  font-weight: 700; color: #fff; font-family: inherit;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  transition: all .25s ease; display: flex;
+  align-items: center; justify-content: center; gap: 8px;
+  margin-top: 8px;
+}
+.tsapay-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(15,23,42,.3); }
+.tsapay-submit:active { transform: translateY(0); }
+.tsapay-submit:disabled {
+  opacity: .6; cursor: not-allowed; transform: none !important;
+  box-shadow: none !important;
+}
+
+/* ── Spinner ───────────────────────────────── */
+.tsapay-spinner {
+  width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.3);
+  border-top-color: #fff; border-radius: 50%;
+  animation: tsapay-spin .7s linear infinite;
+}
+@keyframes tsapay-spin { to { transform: rotate(360deg); } }
+
+/* ── Footer ────────────────────────────────── */
+.tsapay-footer {
+  text-align: center; padding: 16px 28px 22px;
+  border-top: 1px solid #f1f5f9;
+}
+.tsapay-footer-text {
+  font-size: 11px; color: #94a3b8;
+}
+.tsapay-footer-text a { color: #22c55e; text-decoration: none; font-weight: 600; }
+
+/* ── Result screens ────────────────────────── */
+.tsapay-result {
+  text-align: center; padding: 48px 28px;
+}
+.tsapay-result-icon {
+  width: 72px; height: 72px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 20px; font-size: 36px;
+  animation: tsapay-pop .5s cubic-bezier(.22,1,.36,1);
+}
+@keyframes tsapay-pop {
+  0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); }
+}
+.tsapay-result-icon.success { background: #dcfce7; color: #16a34a; }
+.tsapay-result-icon.error   { background: #fee2e2; color: #dc2626; }
+.tsapay-result-icon.pending { background: #dbeafe; color: #2563eb; }
+.tsapay-result-title {
+  font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 8px;
+}
+.tsapay-result-msg {
+  font-size: 14px; color: #64748b; margin-bottom: 28px; line-height: 1.6;
+}
+.tsapay-result-btn {
+  padding: 14px 32px; border-radius: 12px; border: none;
+  font-size: 14px; font-weight: 700; cursor: pointer;
+  font-family: inherit; transition: all .2s;
+}
+.tsapay-result-btn.primary {
+  background: #0f172a; color: #fff;
+}
+.tsapay-result-btn.primary:hover { background: #1e293b; }
+
+/* ── Waiting / polling screen ──────────────── */
+.tsapay-waiting {
+  text-align: center; padding: 48px 28px;
+}
+.tsapay-waiting-animation {
+  width: 80px; height: 80px; margin: 0 auto 24px; position: relative;
+}
+.tsapay-phone-icon {
+  font-size: 48px; animation: tsapay-ring 1.5s ease-in-out infinite;
+}
+@keyframes tsapay-ring {
+  0%, 100% { transform: rotate(0deg); }
+  15% { transform: rotate(12deg); }
+  30% { transform: rotate(-12deg); }
+  45% { transform: rotate(8deg); }
+  60% { transform: rotate(-8deg); }
+  75% { transform: rotate(0deg); }
+}
+.tsapay-waiting-title {
+  font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 8px;
+}
+.tsapay-waiting-msg {
+  font-size: 13px; color: #64748b; line-height: 1.7;
+}
+.tsapay-waiting-dots::after {
+  content: ''; animation: tsapay-dots 1.5s steps(4, end) infinite;
+}
+@keyframes tsapay-dots {
+  0%  { content: ''; }
+  25% { content: '.'; }
+  50% { content: '..'; }
+  75% { content: '...'; }
+}
+`;
+// ─────────────────────────────────────────────
+// Main Class
+// ─────────────────────────────────────────────
+export class TsaPayCheckout {
+    /**
+     * Create a new TsaPayCheckout instance.
+     * @param apiKey  Your TsaPay API key (sk_test_... or sk_live_...).
+     * @param baseUrl Optional. Override the API base URL.
+     */
+    constructor(apiKey, baseUrl) {
+        this.overlay = null;
+        this.styleEl = null;
+        this.currentOpts = null;
+        this.pollTimer = null;
+        if (!apiKey)
+            throw new Error("[TsaPay] An API key is required.");
+        this.apiKey = apiKey;
+        this.baseUrl = (baseUrl || "https://api.tsapay.com/v1").replace(/\/+$/, "");
+    }
+    // ── Public API ────────────────────────────
+    /**
+     * Open the checkout modal with the given options.
+     */
+    open(opts) {
+        this.currentOpts = opts;
+        this.injectCSS();
+        this.renderForm(opts);
+    }
+    /**
+     * Programmatically close the checkout modal.
+     */
+    close() {
+        this.destroy();
+        this.currentOpts?.onClose?.();
+    }
+    // ── CSS Injection ─────────────────────────
+    injectCSS() {
+        if (document.getElementById("tsapay-checkout-css"))
+            return;
+        const style = document.createElement("style");
+        style.id = "tsapay-checkout-css";
+        style.textContent = CHECKOUT_CSS;
+        document.head.appendChild(style);
+        this.styleEl = style;
+    }
+    // ── Helpers ───────────────────────────────
+    formatAmount(amount) {
+        return new Intl.NumberFormat("fr-FR").format(amount);
+    }
+    destroy() {
+        if (this.pollTimer) {
+            clearInterval(this.pollTimer);
+            this.pollTimer = null;
+        }
+        if (this.overlay) {
+            this.overlay.classList.remove("tsapay-visible");
+            setTimeout(() => {
+                this.overlay?.remove();
+                this.overlay = null;
+            }, 300);
+        }
+    }
+    // ── API Calls ─────────────────────────────
+    async createPayment(phone, provider) {
+        const opts = this.currentOpts;
+        const res = await fetch(`${this.baseUrl}/payments`, {
+            method: "POST",
+            headers: {
+                "Authorization": `Bearer ${this.apiKey}`,
+                "Content-Type": "application/json",
+                "Idempotency-Key": crypto.randomUUID(),
+            },
+            body: JSON.stringify({
+                amount: opts.amount,
+                currency: opts.currency || "XAF",
+                provider,
+                phone_number: phone,
+                description: opts.description || "",
+                reference: opts.reference || "",
+                callback_url: opts.callbackUrl || "",
+                metadata: opts.metadata || {},
+            }),
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ message: "Network error" }));
+            throw new Error(err.message || `HTTP ${res.status}`);
+        }
+        return res.json();
+    }
+    async fetchPayment(paymentId) {
+        const res = await fetch(`${this.baseUrl}/payments/${paymentId}`, {
+            headers: { "Authorization": `Bearer ${this.apiKey}` },
+        });
+        return res.json();
+    }
+    // ── Render: Form ──────────────────────────
+    renderForm(opts) {
+        const currency = opts.currency || "XAF";
+        const overlay = document.createElement("div");
+        overlay.className = "tsapay-overlay";
+        overlay.innerHTML = `
+      <div class="tsapay-modal">
+        <div class="tsapay-header">
+          <div class="tsapay-header-brand">
+            <div class="tsapay-logo">T</div>
+            <span class="tsapay-brand-name">TsaPay</span>
+          </div>
+          <button class="tsapay-close-btn" aria-label="Fermer">&times;</button>
+          <div class="tsapay-amount">${this.formatAmount(opts.amount)}<span class="tsapay-amount-currency">${currency}</span></div>
+          ${opts.description ? `<div class="tsapay-description">${opts.description}</div>` : ""}
+        </div>
+
+        <div class="tsapay-body">
+          <div class="tsapay-field">
+            <label class="tsapay-label">Numéro de téléphone</label>
+            <input class="tsapay-input" id="tsapay-phone" type="tel"
+                   placeholder="+237 6XX XXX XXX" value="${opts.phoneNumber || ""}" required />
+          </div>
+
+          <div class="tsapay-field">
+            <label class="tsapay-label">Moyen de paiement</label>
+            <div class="tsapay-providers">
+              <label class="tsapay-provider">
+                <input type="radio" name="tsapay-provider" value="mtn_momo" ${(!opts.provider || opts.provider === "mtn_momo") ? "checked" : ""} />
+                <div class="tsapay-provider-card">
+                  <span class="tsapay-provider-icon">🟡</span>
+                  <div class="tsapay-provider-name">MTN MoMo</div>
+                  <div class="tsapay-provider-sub">Mobile Money</div>
+                </div>
+              </label>
+              <label class="tsapay-provider">
+                <input type="radio" name="tsapay-provider" value="orange_money" ${opts.provider === "orange_money" ? "checked" : ""} />
+                <div class="tsapay-provider-card">
+                  <span class="tsapay-provider-icon">🟠</span>
+                  <div class="tsapay-provider-name">Orange Money</div>
+                  <div class="tsapay-provider-sub">Mobile Money</div>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          <button class="tsapay-submit" id="tsapay-submit-btn">
+            Payer ${this.formatAmount(opts.amount)} ${currency}
+          </button>
+        </div>
+
+        <div class="tsapay-footer">
+          <span class="tsapay-footer-text">🔒 Paiement sécurisé par <a href="https://tsapay.com" target="_blank">TsaPay</a></span>
+        </div>
+      </div>
+    `;
+        document.body.appendChild(overlay);
+        this.overlay = overlay;
+        // Animate in
+        requestAnimationFrame(() => overlay.classList.add("tsapay-visible"));
+        // Close on overlay click or close button
+        overlay.querySelector(".tsapay-close-btn").addEventListener("click", () => this.close());
+        overlay.addEventListener("click", (e) => {
+            if (e.target === overlay)
+                this.close();
+        });
+        // Submit handler
+        overlay.querySelector("#tsapay-submit-btn").addEventListener("click", () => this.handleSubmit());
+    }
+    // ── Submit ────────────────────────────────
+    async handleSubmit() {
+        const phoneInput = this.overlay.querySelector("#tsapay-phone");
+        const providerInput = this.overlay.querySelector('input[name="tsapay-provider"]:checked');
+        const btn = this.overlay.querySelector("#tsapay-submit-btn");
+        const phone = phoneInput.value.trim();
+        if (!phone) {
+            phoneInput.style.borderColor = "#ef4444";
+            phoneInput.focus();
+            return;
+        }
+        // Loading state
+        btn.disabled = true;
+        btn.innerHTML = `<span class="tsapay-spinner"></span> Traitement en cours…`;
+        try {
+            const data = await this.createPayment(phone, providerInput.value);
+            const paymentId = data.payment?.id || data.id;
+            if (paymentId) {
+                this.renderWaiting(paymentId, providerInput.value);
+            }
+            else {
+                this.renderSuccess(data.payment || data);
+            }
+        }
+        catch (err) {
+            this.renderError(err.message || "Une erreur est survenue.");
+        }
+    }
+    // ── Render: Waiting (USSD push) ───────────
+    renderWaiting(paymentId, provider) {
+        const modal = this.overlay.querySelector(".tsapay-modal");
+        const providerLabel = provider === "mtn_momo" ? "MTN MoMo" : "Orange Money";
+        modal.innerHTML = `
+      <div class="tsapay-header">
+        <div class="tsapay-header-brand">
+          <div class="tsapay-logo">T</div>
+          <span class="tsapay-brand-name">TsaPay</span>
+        </div>
+        <button class="tsapay-close-btn" aria-label="Fermer">&times;</button>
+      </div>
+      <div class="tsapay-waiting">
+        <div class="tsapay-waiting-animation">
+          <span class="tsapay-phone-icon">📱</span>
+        </div>
+        <div class="tsapay-waiting-title">Vérifiez votre téléphone</div>
+        <div class="tsapay-waiting-msg">
+          Un message USSD ${providerLabel} a été envoyé sur votre téléphone.<br/>
+          Composez votre code PIN pour confirmer le paiement<span class="tsapay-waiting-dots"></span>
+        </div>
+      </div>
+      <div class="tsapay-footer">
+        <span class="tsapay-footer-text">🔒 Paiement sécurisé par <a href="https://tsapay.com" target="_blank">TsaPay</a></span>
+      </div>
+    `;
+        modal.querySelector(".tsapay-close-btn").addEventListener("click", () => this.close());
+        // Poll for status every 3s
+        let attempts = 0;
+        const maxAttempts = 40; // ~2 minutes
+        this.pollTimer = window.setInterval(async () => {
+            attempts++;
+            try {
+                const data = await this.fetchPayment(paymentId);
+                const status = data.payment?.status || data.status;
+                if (status === "success") {
+                    clearInterval(this.pollTimer);
+                    this.pollTimer = null;
+                    const result = data.payment || data;
+                    this.renderSuccess(result);
+                    this.currentOpts?.onSuccess?.(result);
+                }
+                else if (status === "failed" || status === "expired") {
+                    clearInterval(this.pollTimer);
+                    this.pollTimer = null;
+                    const reason = data.payment?.failure_reason || "Le paiement a échoué.";
+                    this.renderError(reason);
+                    this.currentOpts?.onError?.({ code: status, message: reason });
+                }
+                else if (attempts >= maxAttempts) {
+                    clearInterval(this.pollTimer);
+                    this.pollTimer = null;
+                    this.renderError("Délai d'attente dépassé. Veuillez réessayer.");
+                    this.currentOpts?.onError?.({ code: "timeout", message: "Payment timeout" });
+                }
+            }
+            catch {
+                // Silently retry on network error
+            }
+        }, 3000);
+    }
+    // ── Render: Success ───────────────────────
+    renderSuccess(payment) {
+        const modal = this.overlay.querySelector(".tsapay-modal");
+        modal.innerHTML = `
+      <div class="tsapay-result">
+        <div class="tsapay-result-icon success">✓</div>
+        <div class="tsapay-result-title">Paiement réussi !</div>
+        <div class="tsapay-result-msg">
+          Votre paiement de <strong>${this.formatAmount(payment.amount || this.currentOpts?.amount || 0)} ${payment.currency || "XAF"}</strong> a été confirmé.<br/>
+          ${payment.reference ? `Référence : <strong>${payment.reference}</strong>` : ""}
+        </div>
+        <button class="tsapay-result-btn primary" id="tsapay-done-btn">Terminé</button>
+      </div>
+    `;
+        modal.querySelector("#tsapay-done-btn").addEventListener("click", () => this.close());
+    }
+    // ── Render: Error ─────────────────────────
+    renderError(message) {
+        const modal = this.overlay.querySelector(".tsapay-modal");
+        modal.innerHTML = `
+      <div class="tsapay-result">
+        <div class="tsapay-result-icon error">✕</div>
+        <div class="tsapay-result-title">Paiement échoué</div>
+        <div class="tsapay-result-msg">${message}</div>
+        <button class="tsapay-result-btn primary" id="tsapay-retry-btn">Réessayer</button>
+      </div>
+    `;
+        modal.querySelector("#tsapay-retry-btn").addEventListener("click", () => {
+            if (this.currentOpts)
+                this.renderForm(this.currentOpts);
+        });
+    }
+}
+// ── Auto-register on window for <script> usage ──
+if (typeof window !== "undefined") {
+    window.TsaPayCheckout = TsaPayCheckout;
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "tsapay-checkout-js",
+  "version": "1.0.0",
+  "description": "TsaPay Drop-in Checkout UI — Beautiful payment modal for any website or JS framework",
+  "main": "dist/checkout.js",
+  "module": "dist/checkout.esm.js",
+  "types": "dist/checkout.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc && node scripts/bundle.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["tsapay", "checkout", "mobile-money", "payment-ui", "mtn", "orange-money", "drop-in", "modal"],
+  "author": "TsaPay",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "typescript": "^6.0.3"
+  }
+}