tsapay-checkout-js

Beautiful, drop-in payment modal for TsaPay Mobile Money. Works with any website or JavaScript framework (React, Angular, Vue, Svelte, vanilla JS…).

✨ Features

• 🎨 Beautiful UI — Professionally designed modal with smooth animations
• 🔌 Zero dependencies — No React, no Angular, no jQuery. Works everywhere.
• 📱 Mobile-first — Responsive design, works on all screen sizes
• ⏳ Built-in polling — Automatically checks payment status while the user confirms on their phone
• 🔒 Secure — Your API key is used server-side or via HTTPS; the checkout never stores sensitive data
• 🌍 Framework-agnostic — Works with React, Angular, Vue, Svelte, Next.js, Nuxt, or a simple HTML page

📦 Installation

Option 1: NPM (Recommended for frameworks)

npm install tsapay-checkout-js

Option 2: CDN (For simple HTML pages)

<script src="https://unpkg.com/tsapay-checkout-js/dist/checkout.js"></script>

🚀 Quick Start

Vanilla HTML / JavaScript

<button id="pay-btn">Acheter — 5 000 FCFA</button>

<script src="https://unpkg.com/tsapay-checkout-js/dist/checkout.js"></script>
<script>
  const checkout = new TsaPayCheckout('sk_test_YOUR_API_KEY', 'http://your-api.com/v1');

  document.getElementById('pay-btn').addEventListener('click', function () {
    checkout.open({
      amount: 5000,
      currency: 'XAF',
      description: 'T-Shirt Édition Dev',
      reference: 'ORDER-001',
      onSuccess: function (payment) {
        alert('Paiement réussi ! ID: ' + payment.id);
      },
      onError: function (error) {
        alert('Échec: ' + error.message);
      },
    });
  });
</script>

React / Next.js

import { TsaPayCheckout } from 'tsapay-checkout-js';

const checkout = new TsaPayCheckout('sk_test_YOUR_API_KEY');

export default function BuyButton() {
  const handleClick = () => {
    checkout.open({
      amount: 1500,
      description: 'Abonnement Premium',
      onSuccess: (payment) => {
        console.log('Payment succeeded:', payment.id);
        // redirect or update UI
      },
    });
  };

  return <button onClick={handleClick}>Payer 1 500 FCFA</button>;
}

Angular

import { Component } from '@angular/core';
import { TsaPayCheckout } from 'tsapay-checkout-js';

@Component({
  selector: 'app-buy',
  template: `<button (click)="pay()">Payer 5 000 FCFA</button>`,
})
export class BuyComponent {
  private checkout = new TsaPayCheckout('sk_test_YOUR_API_KEY');

  pay() {
    this.checkout.open({
      amount: 5000,
      description: 'Commande #42',
      onSuccess: (payment) => console.log('OK', payment),
      onError: (err) => console.error('KO', err),
    });
  }
}

Vue 3

<script setup lang="ts">
import { TsaPayCheckout } from '@tsapay/checkout';

const checkout = new TsaPayCheckout('sk_test_YOUR_API_KEY');

function pay() {
  checkout.open({
    amount: 2500,
    description: 'Cours en ligne',
    onSuccess: (p) => alert(`Paiement ${p.id} confirmé !`),
  });
}
</script>

<template>
  <button @click="pay">Payer 2 500 FCFA</button>
</template>

⚙️ API Reference

new TsaPayCheckout(apiKey, baseUrl?)

| Parameter | Type | Description | |-----------|----------|------------------------------------------| | apiKey | string | Your TsaPay API key (sk_test_...) | | baseUrl | string | Optional. API base URL (default: https://api.tsapay.com/v1) |

checkout.open(options)

| Option | Type | Required | Description | |---------------|------------|----------|------------------------------------------| | amount | number | ✅ | Amount in XAF (e.g. 5000) | | currency | string | ❌ | Default: "XAF" | | description | string | ❌ | Shown in the modal header | | reference | string | ❌ | Your internal order reference | | callbackUrl | string | ❌ | Webhook URL for async notifications | | phoneNumber | string | ❌ | Pre-fill the phone field | | provider | string | ❌ | Pre-select "mtn_momo" or "orange_money" | | metadata | object | ❌ | Key-value pairs attached to payment | | onSuccess | function | ❌ | Called with PaymentResult on success | | onError | function | ❌ | Called with { code, message } on failure | | onClose | function | ❌ | Called when user closes the modal |

checkout.close()

Programmatically close the modal.

📄 License

MIT — Built with ❤️ by TsaPay