Complete Payment Integration Guide

<!-- Add to your HTML head -->
<script src="https://cdn.waffy.com/sdk/v2/waffy.min.js"></script>

// Initialize Waffy
const waffy = new WaffyPayment({
  merchantId: 'YOUR_MERCHANT_ID',
  testMode: true  // Remove in production
});

// Create payment button
document.getElementById('pay-button').addEventListener('click', function() {
  waffy.pay({
    amount: 299,
    currency: 'SAR',
    description: 'Premium Subscription',
    
    customer: {
      email: 'customer@example.com',
      phone: '+966501234567'
    },
    
    onSuccess: function(payment) {
      console.log('Payment successful!', payment);
      // Redirect to success page
      window.location.href = '/success';
    },
    
    onError: function(error) {
      console.error('Payment failed:', error);
      alert('Payment failed. Please try again.');
    }
  });
});

// Environment-based configuration
const config = {
  development: {
    merchantId: 'test_merchant_123',
    testMode: true,
    apiBase: 'https://api-dev.waffy.com'
  },
  production: {
    merchantId: 'live_merchant_789',
    testMode: false,
    apiBase: 'https://api.waffy.com'
  }
};

const environment = process.env.NODE_ENV || 'development';
const waffyConfig = config[environment];

const waffy = new WaffyPayment(waffyConfig);

function processCheckout(cartItems, customerInfo) {
  // Calculate total
  const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  
  waffy.pay({
    amount: total,
    currency: 'SAR',
    description: `Order with ${cartItems.length} items`,
    
    // Required for Tabby installments
    items: cartItems.map(item => ({
      name: item.name,
      description: item.description,
      quantity: item.quantity,
      price: item.price,
      category: item.category
    })),
    
    customer: {
      email: customerInfo.email,
      phone: customerInfo.phone,
      firstName: customerInfo.firstName,
      lastName: customerInfo.lastName,
      address: {
        address: customerInfo.address,
        city: customerInfo.city,
        zip: customerInfo.zip,
        country: 'SA'
      }
    },
    
    // Custom metadata for order tracking
    metadata: {
      orderId: generateOrderId(),
      source: 'website',
      campaign: getCampaignCode(),
      items: cartItems.length
    },
    
    onSuccess: function(payment) {
      // Clear cart
      clearCart();
      
      // Track conversion in analytics
      gtag('event', 'purchase', {
        transaction_id: payment.transactionId,
        value: payment.amount,
        currency: payment.currency,
        items: cartItems
      });
      
      // Redirect to success page
      window.location.href = `/success?order=${payment.transactionId}`;
    }
  });
}

function setupSubscription(planDetails) {
  waffy.pay({
    amount: planDetails.price,
    currency: 'SAR',
    description: `${planDetails.name} - Monthly Subscription`,
    
    customer: {
      email: user.email,
      phone: user.phone
    },
    
    // Subscription metadata
    metadata: {
      type: 'subscription',
      planId: planDetails.id,
      frequency: 'monthly',
      customerId: user.id
    },
    
    onSuccess: function(payment) {
      // Create subscription record in your backend
      fetch('/api/subscriptions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customerId: user.id,
          planId: planDetails.id,
          transactionId: payment.transactionId,
          status: 'active',
          nextBilling: calculateNextBilling()
        })
      }).then(() => {
        showSubscriptionWelcome(planDetails);
      });
    }
  });
}

const waffy = new WaffyPayment({
  merchantId: 'YOUR_MERCHANT_ID',
  
  // Mobile-optimized appearance
  appearance: {
    theme: 'light',
    variables: {
      fontSize: window.innerWidth < 768 ? '18px' : '16px',
      borderRadius: '12px'
    },
    button: {
      height: window.innerWidth < 768 ? '52px' : '48px'
    }
  }
});

// Handle viewport changes
window.addEventListener('resize', () => {
  waffy.updateAppearance({
    variables: {
      fontSize: window.innerWidth < 768 ? '18px' : '16px'
    }
  });
});

// Check if Apple Pay is available
if (waffy.isApplePayAvailable()) {
  const applePayButton = waffy.createApplePayButton({
    amount: 99,
    currency: 'SAR',
    countryCode: 'SA',
    
    // Required merchant information
    merchantInfo: {
      displayName: 'Your Store Name',
      domainName: 'yourstore.com'
    },
    
    // Payment request
    paymentRequest: {
      supportedNetworks: ['visa', 'masterCard', 'mada'],
      merchantCapabilities: ['supports3DS'],
      requiredBillingContactFields: ['email', 'phone'],
      requiredShippingContactFields: ['name', 'phone', 'email']
    },
    
    onSuccess: (payment) => {
      console.log('Apple Pay successful:', payment);
      processOrder(payment);
    },
    
    onCancel: () => {
      console.log('Apple Pay cancelled');
    }
  });
  
  document.getElementById('apple-pay-container').appendChild(applePayButton);
}

import React, { useEffect, useState } from 'react';
import WaffyPayment from '@waffy/payment-sdk';

const CheckoutComponent = ({ orderTotal, customer }) => {
  const [waffy, setWaffy] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  useEffect(() => {
    const waffyInstance = new WaffyPayment({
      merchantId: process.env.REACT_APP_WAFFY_MERCHANT_ID,
      testMode: process.env.NODE_ENV === 'development'
    });

    waffyInstance.on('paymentProcessing', () => {
      setIsProcessing(true);
    });

    waffyInstance.on('paymentSuccess', (payment) => {
      setIsProcessing(false);
      onPaymentSuccess(payment);
    });

    setWaffy(waffyInstance);
  }, []);

  const handlePayment = async () => {
    if (!waffy) return;

    try {
      await waffy.pay({
        amount: orderTotal,
        currency: 'SAR',
        customer: customer
      });
    } catch (error) {
      console.error('Payment error:', error);
    }
  };

  return (
    <button 
      onClick={handlePayment}
      disabled={isProcessing || !waffy}
    >
      {isProcessing ? 'Processing...' : `Pay ${orderTotal} SAR`}
    </button>
  );
};

<template>
  <div class="payment-component">
    <button 
      @click="processPayment"
      :disabled="processing"
    >
      {{ processing ? 'Processing...' : `Pay ${amount} ${currency}` }}
    </button>
  </div>
</template>

<script>
import WaffyPayment from '@waffy/payment-sdk';

export default {
  data() {
    return {
      waffy: null,
      processing: false
    };
  },
  async mounted() {
    this.waffy = new WaffyPayment({
      merchantId: process.env.VUE_APP_WAFFY_MERCHANT_ID
    });

    this.waffy.on('paymentSuccess', this.onPaymentSuccess);
  },
  methods: {
    async processPayment() {
      this.processing = true;
      
      try {
        await this.waffy.pay({
          amount: this.amount,
          currency: this.currency,
          customer: this.customer
        });
      } catch (error) {
        this.onPaymentError(error);
      }
    }
  }
};
</script>

function validateAndSanitizeInput(input, type) {
  switch (type) {
    case 'email':
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input)) {
        throw new Error('Invalid email format');
      }
      return input.toLowerCase().trim();
      
    case 'phone':
      const cleaned = input.replace(/\D/g, '');
      if (!/^(966|0)?5[0-9]{8}$/.test(cleaned)) {
        throw new Error('Invalid phone number');
      }
      return '+966' + cleaned.slice(-9);
      
    case 'amount':
      const amount = parseFloat(input);
      if (isNaN(amount) || amount <= 0) {
        throw new Error('Invalid amount');
      }
      return Math.round(amount * 100) / 100; // Round to 2 decimals
      
    default:
      return input.replace(/[<>"'&]/g, '').trim().slice(0, 255);
  }
}

// Usage
const paymentData = {
  amount: validateAndSanitizeInput(userAmount, 'amount'),
  customer: {
    email: validateAndSanitizeInput(userEmail, 'email'),
    phone: validateAndSanitizeInput(userPhone, 'phone')
  }
};

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self';
               script-src 'self' https://cdn.waffy.com;
               connect-src 'self' https://api.waffy.com;
               frame-src https://payments.waffy.com;">

<script>
// Validate secure connection
if (location.protocol !== 'https:' && 
    !location.hostname.includes('localhost')) {
  throw new Error('HTTPS required for payment processing');
}
</script>

// Detect user's preferred currency
function getPreferredCurrency(userCountry) {
  const currencyMap = {
    'SA': 'SAR',
    'AE': 'AED',
    'US': 'USD',
    'GB': 'GBP',
    'EU': 'EUR'
  };
  return currencyMap[userCountry] || 'SAR';
}

// Dynamic pricing based on location
const userCurrency = getPreferredCurrency(userLocation.country);
const convertedAmount = convertCurrency(baseAmount, 'SAR', userCurrency);

waffy.pay({
  amount: convertedAmount,
  currency: userCurrency,
  description: 'Premium Service',
  
  // Show pricing in user's preferred format
  displayAmount: formatCurrency(convertedAmount, userCurrency, userLocation.locale)
});

// Multi-language support
const waffy = new WaffyPayment({
  merchantId: 'YOUR_MERCHANT_ID',
  
  // Set interface language
  locale: getUserLocale(), // 'en', 'ar', 'fr', etc.
  
  appearance: {
    // RTL support for Arabic
    direction: getUserLocale() === 'ar' ? 'rtl' : 'ltr',
    
    // Localized styling
    variables: {
      fontFamily: getUserLocale() === 'ar' ? 'Cairo, sans-serif' : 'Inter, sans-serif'
    }
  }
});

// Localized error messages
const errorMessages = {
  'en': {
    'card_declined': 'Your card was declined. Please try another card.',
    'insufficient_funds': 'Insufficient funds. Please check your balance.'
  },
  'ar': {
    'card_declined': 'تم رفض بطاقتك. يرجى تجربة بطاقة أخرى.',
    'insufficient_funds': 'رصيد غير كافٍ. يرجى التحقق من رصيدك.'
  }
};

function getLocalizedError(errorCode, locale = 'en') {
  return errorMessages[locale][errorCode] || errorMessages['en'][errorCode];
}