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 design, integration ergonomics, and developer documentation—not the entire Payaza product.

SDKJavaScriptPaymentsNuxt.jsWeb

NPM Package

Visit Payaza

Try Checkout

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

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>