Payaza Web SDK
Note: This was built as part of my work at Payaza Africa. I focused on the SDK design, integration ergonomics, and developer documentation—not the entire Payaza product.
Overview
The Payaza Web SDK provides a straightforward way to embed Payaza checkout into web apps, handling configuration, initialization, and event hooks with a clean API. Built during my tenure at Payaza to improve developer onboarding and accelerate integrations. My contributions included building the embeddable Vue checkout application loaded by the SDK, implementing a Node.js reverse proxy that adds real‑time communication via Socket.IO to the backend, and designing/publishing the @payaza/web-sdk NPM package.
Highlights
SDK Features
- Lightweight, simple initialization
- Configurable callbacks and events
- Seamless checkout invocation
- Clear error states and typed payloads
Developer Experience
- Usage guides and examples
- Minimal setup steps
- Works with modern frameworks (Nuxt/Vue, React)
- Focus on integration ergonomics
My Contribution
- Built the embeddable checkout application (Vue) loaded by the SDK package
- Implemented a Node.js reverse proxy to add real‑time communication via Socket.IO
- Designed and published the @payaza/web-sdk NPM package
Outcome
- Faster onboarding for partners
- Reduced integration friction
- Consistent checkout experiences across apps
Code Snippets
Initialize and Invoke Checkout
<script src="https://cdn.payaza.africa/sdk/web.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const payaza = PayazaWebSDK.init({
publicKey: 'pk_test_XXXXXXXXXXXXXXXX',
customer: { email: 'user@example.com' },
amount: 5000, // in NGN kobo
currency: 'NGN',
onSuccess: (ref) => console.log('Success:', ref),
onClose: () => console.log('Closed'),
onError: (err) => console.error('Error:', err),
});
document.getElementById('pay-button').addEventListener('click', () => {
payaza.checkout();
});
});
</script>
<button id="pay-button">Pay with Payaza</button>
Gallery
Other Projects
Laye
Framework-agnostic RBAC library for Rust with composable AccessPolicy rules and plug-and-play middleware for actix-web and tower/axum.
Trypema Rate Limiter
High-performance Rust rate limiting primitives with local, Redis-backed, and hybrid providers, atomic Redis enforcement, and absolute/suppressed strategies.
Auth module for Nuxt server apps
Auth module for Nuxt 3 server apps with local and social providers, tokens, middlewares, and typed composables.