Payment SDK

Initialise, customise, and handle events for the Seev Payment SDK across JavaScript, React, Vue, and React Native.

The Seev Payment SDK provides a ready-made checkout experience — modal, inline, or redirect — that works across every platform. It handles card tokenisation, 3DS authentication, mobile money prompts, and real-time status updates for you.

Installation

Via CDN (script tag)

<script src="https://js.seev.cash/v1/checkout.js"></script>

Via npm

npm install @seev/checkout

npm install @seev/sdk
# or
pnpm add @seev/sdk

npm install @seev/sdk
# or
pnpm add @seev/sdk

npm install @seev/sdk
# or
pnpm add @seev/sdk

Initialise a payment

Every payment flow starts with a payment reference created server-side. Never initialise payments from client code — your secret key must stay on the server.

import SeevCheckout from '@seev/checkout';

const checkout = new SeevCheckout({
  publicKey: 'pk_live_xxxxxxxxxxxx',
  email: 'customer@example.com',
  amount: 5000,       // in lowest currency unit (e.g. pesewas for GHS)
  currency: 'GHS',
  reference: 'your-unique-reference', // generated server-side
  onSuccess(transaction) {
    console.log('Payment successful:', transaction.reference);
  },
  onClose() {
    console.log('Checkout closed');
  },
});

document.getElementById('pay-btn').addEventListener('click', () => {
  checkout.openModal();
});

// app/actions/checkout.ts — server action
'use server';
import Seev from '@seev/sdk';

export async function createCheckout(email: string, amount: number) {
  const charge = await Seev.charge({
    type: 'checkout',
    recipient: { name: 'Customer', email },
    amount,
    currency: 'GHS',
    redirectUrl: `${process.env.APP_URL}/callback`,
  });
  return charge.checkoutUrl;
}

// components/CheckoutButton.tsx — client component
'use client';
import { createCheckout } from '@/actions/checkout';

export default function CheckoutButton() {
  async function handleClick() {
    const url = await createCheckout('customer@example.com', 5000);
    window.location.href = url;
  }
  return <button onClick={handleClick}>Pay GHS 50.00</button>;
}

<!-- Nuxt: server/api/charge.post.ts -->
<!-- import Seev from '@seev/sdk'; -->
<!-- const charge = await Seev.charge({ type: 'checkout', ... }); -->
<!-- return { checkoutUrl: charge.checkoutUrl }; -->

<script setup lang="ts">
async function openCheckout() {
  const { checkoutUrl } = await $fetch('/api/charge', {
    method: 'POST',
    body: { email: 'customer@example.com', amount: 5000, currency: 'GHS' },
  });
  window.location.href = checkoutUrl;
}
</script>

<template>
  <button @click="openCheckout">Pay GHS 50.00</button>
</template>

// Your backend creates the charge with @seev/sdk — never put private keys in the app
import { Linking } from 'react-native';
import { useState } from 'react';

export default function CheckoutScreen() {
  const [loading, setLoading] = useState(false);

  async function openCheckout() {
    setLoading(true);
    const res = await fetch('https://api.myapp.com/charge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: 'customer@example.com', amount: 5000 }),
    });
    const { checkoutUrl } = await res.json();
    await Linking.openURL(checkoutUrl);
    setLoading(false);
  }

  return <Button title={loading ? 'Loading...' : 'Pay GHS 50.00'} onPress={openCheckout} />;
}

Configuration options

Option	Type	Required	Description
`publicKey`	`string`	Yes	Your Seev public key (`pk_live_...` or `pk_test_...`)
`email`	`string`	Yes	Customer's email address
`amount`	`number`	Yes	Amount in the lowest currency unit (e.g. pesewas, kobo, cents)
`currency`	`string`	Yes	ISO 4217 currency code — e.g. `GHS`, `NGN`, `USD`, `KES`
`reference`	`string`	Yes	Unique transaction reference generated server-side
`channels`	`string[]`	No	Restrict to specific channels: `['card', 'mobile_money', 'bank', 'crypto']`
`metadata`	`object`	No	Any extra data you want stored on the transaction
`label`	`string`	No	Customer display name shown inside the checkout modal
`onSuccess`	`function`	No	Callback fired when payment completes successfully
`onClose`	`function`	No	Callback fired when the user closes the modal
`onError`	`function`	No	Callback fired if an error occurs during payment

Events

const checkout = new SeevCheckout({
  // ...config
  onSuccess(transaction) {
    // { reference, status, amount, currency, channel, paid_at }
  },
  onClose() {
    // user dismissed the modal
  },
  onError(error) {
    // { code, message }
  },
});

<SeevCheckout
  // ...config
  onSuccess={(tx) => { /* tx.reference, tx.status */ }}
  onClose={() => { /* modal dismissed */ }}
  onError={(err) => { /* err.code, err.message */ }}
/>

Verify after payment

Always verify a transaction server-side before fulfilling an order. The client-side onSuccess callback is for UX only — it can be spoofed.

// Server-side
import Seev from '@seev/sdk';

const tx = await Seev.transaction(reference);

if (tx.status === 'completed') {
  // fulfil order
}

Never trust the client-side onSuccess callback alone. Always call Verify Payment from your server before releasing goods or access.

Payment SDK

Installation

Initialise a payment

Configuration options

Events

Verify after payment

Next steps

Verify Payments

Webhooks

All SDKs

Payment Channels

On this page