Celeris Realtime
A public-beta, binary-first WebSocket platform built in Rust for high-throughput pub/sub across multiple nodes and regions.
RustWebSocketsDistributed Systems
October 1, 2021 - David Oyinbo
Payaza Web SDK
Note: This was built as part of my work at Payaza Africa. I focused on the SDK, its integration ergonomics, the real-time layer behind it, and developer documentation, not the entire Payaza product.
SDKJavaScriptPaymentsNuxt.jsWeb
Overview
The Payaza Web SDK provides a straightforward way to embed Payaza checkout into web applications, handling configuration, initialization, and events through a clean API.
The Web SDK was a separate npm package, but it worked hand in hand with a TypeScript and Node.js cluster of Socket.IO reverse proxies. The core backend could not provide the real-time behaviour the checkout needed within the launch timeframe, so the SDK used the proxy cluster as both its API and real-time layer. The proxies exposed webhooks to the backend and broadcast updates such as payment statuses to connected SDK clients. I used consistent-hash routing across the cluster and worked with a DevOps engineer to host it on Azure.
The system worked consistently for the problem in front of us. Its traffic pattern was also relatively bounded because each connected client was waiting for a response from one backend. Building it left me interested in how the same idea would behave when many participants were communicating at once, a question I later explored at HeySummit and through Celeris Realtime.
I also built the embeddable Vue checkout application and designed and published the @payaza/web-sdk package. Separately, I created an internal TypeScript package that presented an Axios-like interface over the backend's less direct communication model.
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
- Designed and published the Web SDK as a separate npm package
- Built the TypeScript/Node.js Socket.IO reverse-proxy cluster that supplied the SDK's API and real-time communication
- Used consistent-hash routing and backend webhooks to distribute and broadcast payment-status updates
- Worked with a DevOps engineer to host the services on Azure
- Built a separate internal TypeScript package with an Axios-like interface
Outcome
- One published interface for embedding Payaza checkout into web applications
- Real-time payment-status updates from backend webhooks to connected SDK clients
- A separate internal Axios-like wrapper for frontend-to-backend communication
Code Snippets
Initialize and Invoke Checkout
index.htmlhtml
<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.
RustRBACAccess Control
distkit
A Rust toolkit of distributed systems primitives backed by Redis. Strict and lax counters, instance-aware counters with automatic dead-instance cleanup, distributed locks (Mutex and RwLock), and sliding-window rate limiting.
RustRedisDistributed Systems