tsapay-checkout-js

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