Open Source & Developer Tools•Open-Source Developer SDK

WizPay

Open-source payment integration tools and developer checkout component SDK.

Role

Full-Stack Developer & Maintainer

Organization

Oz Tech / Open Source

Timeframe

2023 — Present

Status

Active Development

TypeScript (Strict)ReactNode.jsZod Schema ValidationTailwind CSSVite / Turbopack

Executive Summary & Strategic Overview

Open-source developer SDK providing drop-in payment form components, gateway adapters, and deterministic webhook verification.

Verified Performance Metrics & Business Impact

Multi-Gateway

Payment Adapters

Modular checkout forms and webhook verification for PayMongo and custom payments

Zero Config

React Components

Pre-built React checkout components with client-side Zod schema validation

Open Source

Developer SDK

Public TypeScript library and interactive sandbox for custom payment workflows

The Engineering Challenge

Integrating multi-gateway payments for custom client web apps requires repetitive boilerplate code, error-prone payload parsing, and complex state handling.

The Architectural Solution

Built a reusable, type-safe SDK featuring schema-validated checkout forms, customizable UI components, and clean gateway adapters.

Core Technical & Architectural Highlights

01

Type-Safe Form & Gateway Adapters

Zod-validated payload contracts ensuring consistent client validation across different payment provider APIs.

02

Drop-In UI Component Architecture

Headless and styled React components designed for frictionless embedding with minimal bundle footprint.

03

Extensible Webhook Verification

Deterministic signature verification helpers for secure transaction confirmation across distributed backends.

Agentic AI Pair Programming & Antigravity Acceleration

Engineered using TDD in Antigravity to achieve comprehensive test coverage across tokenization, form validation states, and API error simulations.

INTERACTIVE SANDBOXLIVE SIMULATOR

WizPay Checkout & API Simulator

Test checkout payloads and examine generated SDK integration code in real time.

PAYLOAD PARAMETERS

SANDBOX
$
checkout.ts•WizPay SDK
import { WizPay } from '@wizpay/sdk';

// Initialize WizPay Client
const wizpay = new WizPay({
  apiKey: process.env.WIZPAY_SECRET_KEY,
  environment: 'sandbox',
});

// Execute Checkout Charge
const charge = await wizpay.charges.create({
  amount: 1500,
  currency: 'USD',
  description: 'Web Application Build',
  customer: {
    email: 'client@company.com',
  },
  metadata: {
    contractRef: 'Q3_2026_CONTRACT',
  },
});

console.log('Payment Completed:', charge.id);

Click “Process Payment” above to execute a simulated WizPay transaction payload.