KaribPay SDK

One function for checkout. Works in React, Vue, Angular, and vanilla JavaScript. No script tag in HTML—the SDK loads automatically.

Installation

npm

npm install karibpay-sdk

GitHub

npm install github:yourusername/karibpay-sdk

Quick Start

import { karibPayOpen } from 'karibpay-sdk';

karibPayOpen({
  amount: 200,
  currency: 'USD',
  merchant: 'ABC Store',
  api_key: 'pk_sandbox_your_api_key',
  onSuccess: (response) => console.log('Payment successful', response),
  onFailed: (error) => console.log('Payment failed', error)
});

API

karibPayOpen(options)

Opens the KaribPay checkout modal.

| Option | Type | Required | Description | |--------|------|----------|-------------| | amount | number | Yes | Payment amount (positive number) | | currency | string | Yes | Currency code (e.g. 'USD', 'KES') | | merchant | string | Yes | Merchant name | | api_key | string | Yes | Your KaribPay API key | | onSuccess | function | No | Called when payment succeeds | | onFailed | function | No | Called when payment fails |

Returns a Promise that resolves when the checkout modal opens.

Framework Examples

React

import { karibPayOpen } from 'karibpay-sdk';

function PayButton() {
  const handlePay = () => {
    karibPayOpen({
      amount: 200,
      currency: 'USD',
      merchant: 'ABC Store',
      api_key: 'pk_sandbox_xxx',
      onSuccess: () => alert('Paid!'),
      onFailed: () => alert('Failed')
    });
  };

  return <button onClick={handlePay}>Pay Now</button>;
}

Vue

<script setup>
import { karibPayOpen } from 'karibpay-sdk';

function pay() {
  karibPayOpen({
    amount: 200,
    currency: 'USD',
    merchant: 'ABC Store',
    api_key: 'pk_sandbox_xxx',
    onSuccess: () => alert('Paid!'),
    onFailed: () => alert('Failed')
  });
}
</script>

<template>
  <button @click="pay">Pay Now</button>
</template>

Angular

import { karibPayOpen } from 'karibpay-sdk';

// In your component
pay() {
  karibPayOpen({
    amount: 200,
    currency: 'USD',
    merchant: 'ABC Store',
    api_key: 'pk_sandbox_xxx',
    onSuccess: () => alert('Paid!'),
    onFailed: () => alert('Failed')
  });
}

Vanilla JavaScript

<button id="pay">Pay Now</button>
<script type="module">
  import { karibPayOpen } from 'karibpay-sdk';

  document.getElementById('pay').onclick = () => {
    karibPayOpen({
      amount: 200,
      currency: 'USD',
      merchant: 'ABC Store',
      api_key: 'pk_sandbox_xxx',
      onSuccess: () => alert('Paid!'),
      onFailed: () => alert('Failed')
    });
  };
</script>

Validation

The SDK validates options before opening checkout. It throws errors for:

• amount not a positive number
• currency, merchant, or api_key empty or invalid
• onSuccess or onFailed not a function (when provided)

Requirements

• Browser environment — Works in React, Vue, Angular, Vite, Webpack, etc.
• Does not work in Node.js (backend), React Native, or during server-side rendering. Call karibPayOpen only from client-side code (e.g. in onClick, useEffect, onMounted).