Clean Architecture v2.0

JavaScript SDK v2.0

Clean separation between frontend display and backend generation. Use them together or independently for maximum flexibility.

Quick Start Guide

CDN Link (Display Module):

https://sdkv2.waffyapp.com/waffy-payment-display.min.js

Clean Architecture

Two independent modules that work together seamlessly

Display Module

Frontend-only payment display with no backend required

No backend needed
Multiple display modes
Perfect for static sites
Event system

Generator Module

Backend-powered payment link generation with full API access

Creates new payments
Secure API communication
Multiple payment types
Batch operations

Display Modes

Choose the perfect display mode for your use case

Popup

Opens in new browser window (default)

mode: "popup"

Modal

Overlay on same page (mobile-friendly)

mode: "modal"

Iframe

Embedded in container

mode: "iframe"

Quick Start

Get started with just a few lines of code

1
Display Only (No Backend Required)

Perfect when you already have payment URLs

<!-- Load display module from CDN -->
<script src="https://sdkv2.waffyapp.com/waffy-payment-display.min.js"></script>

<script>
    // Display existing payment URL
    WaffyPaymentDisplay.show({
        paymentUrl: "https://app-dev.waffyapp.com/external/UXFmUCaG?client_id=...",
        userToken: "optional-token",
        mode: "popup"
    });
</script>

2
Generate + Display (Backend Required)

For creating new payments dynamically

<!-- Load display and generator modules from CDN -->
<script src="https://sdkv2.waffyapp.com/waffy-payment-display.min.js"></script>
<script src="https://sdkv2.waffyapp.com/waffy-payment-generator.min.js"></script>

<script>
    // Create and display new payment
    const generator = new WaffyPaymentGenerator({
        backendUrl: "/api/waffy"
    });
    
    const result = await generator.createSimplePayment({
        amount: 100,
        customerPhone: "+966555555555",
        providerPhone: "+966555555556"
    });
    
    // Display the payment
    WaffyPaymentDisplay.show({
        paymentUrl: result.paymentUrl,
        mode: "popup"
    });
</script>

3
Web Components

Custom HTML elements for easy integration

<script src="https://sdkv2.waffyapp.com/modules/payment-button.min.js"></script>

<!-- Simple payment button -->
<waffy-payment-button 
    payment-url="https://app-dev.waffyapp.com/external/UXFmUCaG?client_id=..."
    user-token="optional-token"
    display-mode="popup"
    text="Pay Now"
    size="large">
</waffy-payment-button>

Payment Types

Support for multiple payment scenarios

💳
Simple Payment

Direct customer to provider payment

createSimplePayment()

🏢
Broker Payment

Payment with platform fee

createPaymentWithBroker()

📋
Service Payment

Project-based with milestones

createServicePayment()

Framework Integration

Works seamlessly with popular frameworks

⚛️
React Integration

import { useEffect, useState } from 'react';

const PaymentComponent = ({ paymentUrl, userToken }) => {
    const [display, setDisplay] = useState(null);

    useEffect(() => {
        if (window.WaffyPaymentDisplay) {
            const instance = new window.WaffyPaymentDisplay();
            setDisplay(instance);

            instance.on('success', (data) => {
                console.log('Payment successful:', data);
            });
        }
    }, []);

    const handlePayment = () => {
        if (display) {
            display.show({
                paymentUrl,
                userToken,
                mode: 'popup'
            });
        }
    };

    return <button onClick={handlePayment}>Pay Now</button>;
};

🔧
Vue Integration

<template>
    <button @click="showPayment">Pay Now</button>
</template>

<script>
export default {
    props: ['paymentUrl', 'userToken'],
    methods: {
        showPayment() {
            if (window.WaffyPaymentDisplay) {
                window.WaffyPaymentDisplay.show({
                    paymentUrl: this.paymentUrl,
                    userToken: this.userToken,
                    mode: 'popup'
                });
            }
        }
    }
};
</script>

Key Features

Everything you need for modern payment integration

Modular

Use components independently

Secure

OAuth2 & token-based auth

Universal

Works with any framework

Fast

Optimized for performance

Browser Support

Compatible with all modern browsers and devices

✅ Chrome 60+

✅ Firefox 60+

✅ Safari 12+

✅ Edge 79+

✅ iOS Safari 12+

✅ Android Chrome 60+

✅ PWA Support

✅ Mobile Responsive

Ready to Get Started?

Start integrating Waffy payments in minutes with our clean v2.0 architecture

Quick Start Guide View v1.0 Docs

Need Help?

Check out our examples and documentation

View Examples Contact Support