ProBuy Payment Option Widget

Complete copy-paste ready code and design guidelines for integrating ProBuy as a payment method in your checkout flow. Get your payment UI live in minutes with our production-ready markup and styles.

Universal Integration

These guidelines apply to all integration methods:

✅ Direct API Integration
✅ Backend SDK (Node.js)
✅ Frontend SDK (Browser)
✅ Custom Implementations
✅ Any E-commerce Platform (Shopify, WooCommerce, Magento, etc.)

🚀Quick Start - 3 Simple Steps

Download the ProBuy logo (PNG or SVG format below)
Copy the HTML + CSS from the complete example
Connect your checkout logic to handle ProBuy selection

Step 1: Download ProBuy Brand Assets

First, download the official ProBuy logo. Use these exact assets to maintain brand consistency across all merchant integrations.

ProBuy Logo (PNG)

Use for web integration. Recommended size: 32x32px or 64x64px

Download PNG

ProBuy

ProBuy Logo Path

Reference this path in your HTML: /store/favicon-32x32.png

/store/favicon-32x32.png

💡 Pro Tip: For best results, use a 32x32px or 64x64px PNG with transparent background. The logo will be displayed in a 48x48px container with proper padding.

Step 2: Live Preview - Payment Method Selection

When offering multiple payment methods, ProBuy should be prominently displayed as a primary option. The payment method selection allows customers to choose ProBuy installments before proceeding to your checkout button.

Recommended Payment Selection Design

💳

Credit or Debit Card

Pay with Visa, Mastercard, or Mada

ProBuy - Pay in Installments

Split in up to 12 payments

0.05% CommissionSharia Compliant

👛

Digital Wallet

Apple Pay, Google Pay, or STC Pay

💡 Pro Tip: ProBuy option should always be highlighted with border, background, and badges to increase conversion rates.

Step 3: Copy-Paste Ready HTML Implementation

This is production-ready HTML markup for the payment method selection. Copy this entire code block and paste it into your checkout page.

Ready to Use

This markup includes all three payment options with ProBuy pre-selected and properly highlighted. Just update the logo path and onclick handlers to match your implementation.

<div class="payment-methods">
  <!-- Credit Card Option -->
  <div class="payment-method-option" onclick="selectPaymentMethod('card')">
    <input type="radio" name="payment-method" id="payment-card" value="card" />
    <div class="payment-method-icon">💳</div>
    <div class="payment-method-details">
      <div class="payment-method-title">Credit or Debit Card</div>
      <div class="payment-method-subtitle">Pay with Visa, Mastercard, or Mada</div>
    </div>
  </div>

  <!-- ProBuy Option - Highlighted -->
  <div class="payment-method-option selected" onclick="selectPaymentMethod('probuy')">
    <input type="radio" name="payment-method" id="payment-probuy" value="probuy" checked />
    <div class="payment-method-icon">
      <img src="/path/to/probuy-logo.png" alt="ProBuy" />
    </div>
    <div class="payment-method-details">
      <div class="payment-method-content">
        <div>
          <div class="payment-method-title">ProBuy - Pay in Installments</div>
          <div class="payment-method-subtitle">Split in up to 12 payments</div>
        </div>
        <div class="payment-method-badges">
          <span class="payment-method-badge">0.05% Commission</span>
          <span class="payment-method-badge sharia">Sharia Compliant</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Digital Wallet Option -->
  <div class="payment-method-option" onclick="selectPaymentMethod('wallet')">
    <input type="radio" name="payment-method" id="payment-wallet" value="wallet" />
    <div class="payment-method-icon">👛</div>
    <div class="payment-method-details">
      <div class="payment-method-title">Digital Wallet</div>
      <div class="payment-method-subtitle">Apple Pay, Google Pay, or STC Pay</div>
    </div>
  </div>
</div>

<!-- Your Checkout Button -->
<button class="checkout-btn" onclick="handleCheckout()">
  Proceed to Checkout
</button>

Step 4: Complete CSS Styles (with Dark Mode Support)

Apply these styles to create the ProBuy payment option with proper highlighting, hover effects, and automatic dark mode support.

Dark Mode Included

These styles include both light and dark mode variants using CSS media queries. The payment options will automatically adapt to your users' system preferences.

/* Payment Methods Container */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 2rem 0;
}

/* Payment Option Base Styles */
.payment-method-option {
  display: flex;
  align-items: flex-start;
  padding: 1.25rem;
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
}

/* Hover Effect */
.payment-method-option:hover {
  border-color: #bf86ff;
  background: #fafbff;
  box-shadow: 0 2px 8px rgba(191, 134, 255, 0.08);
}

/* Selected State (ProBuy Highlighted) */
.payment-method-option.selected {
  border-color: #8d65ff;
  background: linear-gradient(
    135deg,
    rgba(191, 134, 255, 0.06) 0%,
    rgba(65, 82, 234, 0.04) 100%
  );
  box-shadow: 0 4px 16px rgba(191, 134, 255, 0.12);
}

/* Radio Button Styling */
.payment-method-option input[type="radio"] {
  width: 22px;
  height: 22px;
  margin-right: 1.25rem;
  margin-top: 0.25rem;
  cursor: pointer;
  accent-color: #8d65ff;
  flex-shrink: 0;
}

/* Icon Container */
.payment-method-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9ff;
  border-radius: 12px;
  margin-right: 1rem;
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Logo Image Inside Icon */
.payment-method-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Payment Details Container */
.payment-method-details {
  flex: 1;
  min-width: 0;
}

/* Content Layout (Title + Badges) */
.payment-method-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Payment Method Title */
.payment-method-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.375rem;
  color: #1a1a1a;
  line-height: 1.3;
}

/* Payment Method Subtitle */
.payment-method-subtitle {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
}

/* Badges Container */
.payment-method-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Badge Styles (Commission) */
.payment-method-badge {
  background: linear-gradient(129.26deg, #bf86ff 0%, #4152ea 62.38%, #1b00a5 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

/* Sharia Compliant Badge */
.payment-method-badge.sharia {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Checkout Button */
.checkout-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(129.26deg, #bf86ff 0%, #4152ea 62.38%, #1b00a5 100%);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 1.5rem;
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(191, 134, 255, 0.3);
}

.checkout-btn:active {
  transform: translateY(0);
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  .payment-method-option {
    background: #1f2937;
    border-color: #374151;
  }

  .payment-method-option:hover {
    background: #111827;
    border-color: #bf86ff;
  }

  .payment-method-option.selected {
    background: linear-gradient(
      135deg,
      rgba(191, 134, 255, 0.1) 0%,
      rgba(65, 82, 234, 0.08) 100%
    );
    border-color: #8d65ff;
  }

  .payment-method-icon {
    background: #374151;
  }

  .payment-method-title {
    color: #f9fafb;
  }

  .payment-method-subtitle {
    color: #9ca3af;
  }
}

/* ============================================
   RESPONSIVE DESIGN (Mobile)
   ============================================ */
@media (max-width: 768px) {
  .payment-method-content {
    flex-direction: column;
    gap: 0.75rem;
  }

  .payment-method-badges {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .checkout-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }
}

/* ============================================
   ACCESSIBILITY & FOCUS STATES
   ============================================ */
.payment-method-option:focus-within {
  outline: 2px solid #8d65ff;
  outline-offset: 2px;
}

.payment-method-option input[type="radio"]:focus {
  outline: 2px solid #8d65ff;
  outline-offset: 2px;
}

Step 5: JavaScript Payment Logic

Add these JavaScript functions to handle payment method selection and checkout. This includes error handling and loading states.

Basic Vanilla JavaScript

// Payment method selection handler
function selectPaymentMethod(method) {
  // Remove selected class from all options
  document.querySelectorAll('.payment-method-option').forEach((option) => {
    option.classList.remove('selected');
  });

  // Add selected class to clicked option
  const selectedOption = document.querySelector(`#payment-${method}`).parentElement;
  selectedOption.classList.add('selected');

  // Check the radio button
  document.getElementById(`payment-${method}`).checked = true;

  console.log(`Selected payment method: ${method}`);
}

// Main checkout handler
async function handleCheckout() {
  // Get selected payment method
  const selectedMethod = document.querySelector('input[name="payment-method"]:checked');

  if (!selectedMethod) {
    alert('Please select a payment method');
    return;
  }

  const method = selectedMethod.value;

  // Disable checkout button during processing
  const checkoutBtn = document.querySelector('.checkout-btn');
  checkoutBtn.disabled = true;
  checkoutBtn.textContent = 'Processing...';

  try {
    if (method === 'probuy') {
      await initializeProBuyCheckout();
    } else if (method === 'card') {
      await handleCardPayment();
    } else if (method === 'wallet') {
      await handleWalletPayment();
    }
  } catch (error) {
    console.error('Checkout error:', error);
    alert('Payment Error: ' + error.message);

    // Re-enable checkout button
    checkoutBtn.disabled = false;
    checkoutBtn.textContent = 'Proceed to Checkout';
  }
}

// ProBuy checkout initialization
async function initializeProBuyCheckout() {
  // Example: Using ProBuy SDK
  const sdk = new ProBuyCheckoutSDK({
    apiToken: 'your-api-token',
    environment: 'production' // or 'sandbox' for testing
  });

  // Prepare order data from your checkout
  const orderData = {
    order_number: 'ORD-' + Date.now(),
    total_amount: parseFloat(document.getElementById('total-amount').value),
    currency: 'SAR',
    customer: {
      first_name: document.getElementById('first-name').value,
      last_name: document.getElementById('last-name').value,
      email: document.getElementById('email').value,
      phone: document.getElementById('phone').value,
    },
    items: [
      {
        name: 'Product Name',
        quantity: 1,
        price: 1500
      }
    ]
  };

  try {
    // Get checkout URL from ProBuy
    const checkoutUrl = await sdk.checkout(orderData);

    // Redirect to ProBuy checkout page
    window.location.href = checkoutUrl;
  } catch (error) {
    throw new Error(`ProBuy initialization failed: ${error.message}`);
  }
}

// Placeholder for card payment
async function handleCardPayment() {
  // Implement your card payment logic here
  console.log('Processing card payment...');
}

// Placeholder for wallet payment
async function handleWalletPayment() {
  // Implement your wallet payment logic here
  console.log('Processing wallet payment...');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  // Pre-select ProBuy as default
  const probuyOption = document.getElementById('payment-probuy');
  if (probuyOption) {
    probuyOption.checked = true;
    selectPaymentMethod('probuy');
  }
});

Framework-Specific Implementations

If you're using a modern JavaScript framework, here are ready-to-use component examples for React, Vue, and Angular.

React Component

import { useState } from 'react';
import { ProBuyCheckoutSDK } from '@probuy/checkout-sdk-core';

interface PaymentMethodProps {
  onCheckout: (method: string) => void;
}

export default function PaymentMethodSelector({ onCheckout }: PaymentMethodProps) {
  const [selectedMethod, setSelectedMethod] = useState<string>('probuy');
  const [isProcessing, setIsProcessing] = useState<boolean>(false);

  const handleMethodChange = (method: string) => {
    setSelectedMethod(method);
  };

  const handleCheckout = async () => {
    setIsProcessing(true);

    try {
      if (selectedMethod === 'probuy') {
        const sdk = new ProBuyCheckoutSDK({
          apiToken: process.env.NEXT_PUBLIC_PROBUY_API_TOKEN!,
          environment: 'production'
        });

        const orderData = {
          order_number: 'ORD-' + Date.now(),
          total_amount: 1500,
          currency: 'SAR',
          customer: {
            first_name: 'John',
            last_name: 'Doe',
            email: '[email protected]',
            phone: '+966500000000'
          },
          items: [
            {
              name: 'Product Name',
              quantity: 1,
              price: 1500
            }
          ]
        };

        const checkoutUrl = await sdk.checkout(orderData);
        window.location.href = checkoutUrl;
      } else {
        // Handle other payment methods
        onCheckout(selectedMethod);
      }
    } catch (error) {
      console.error('Checkout error:', error);
      alert(`Payment Error: ${(error as Error).message}`);
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className="payment-methods">
      {/* Credit Card Option */}
      <div
        className={`payment-method-option ${
          selectedMethod === 'card' ? 'selected' : ''
        }`}
        onClick={() => handleMethodChange('card')}
      >
        <input
          type="radio"
          name="payment-method"
          value="card"
          checked={selectedMethod === 'card'}
          onChange={() => handleMethodChange('card')}
        />
        <div className="payment-method-icon">💳</div>
        <div className="payment-method-details">
          <div className="payment-method-title">Credit or Debit Card</div>
          <div className="payment-method-subtitle">
            Pay with Visa, Mastercard, or Mada
          </div>
        </div>
      </div>

      {/* ProBuy Option - Highlighted */}
      <div
        className={`payment-method-option ${
          selectedMethod === 'probuy' ? 'selected' : ''
        }`}
        onClick={() => handleMethodChange('probuy')}
      >
        <input
          type="radio"
          name="payment-method"
          value="probuy"
          checked={selectedMethod === 'probuy'}
          onChange={() => handleMethodChange('probuy')}
        />
        <div className="payment-method-icon">
          <img src="/store/favicon-32x32.png" alt="ProBuy" />
        </div>
        <div className="payment-method-details">
          <div className="payment-method-content">
            <div>
              <div className="payment-method-title">
                ProBuy - Pay in Installments
              </div>
              <div className="payment-method-subtitle">
                Split in up to 12 payments
              </div>
            </div>
            <div className="payment-method-badges">
              <span className="payment-method-badge">0.05% Commission</span>
              <span className="payment-method-badge sharia">
                Sharia Compliant
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Digital Wallet Option */}
      <div
        className={`payment-method-option ${
          selectedMethod === 'wallet' ? 'selected' : ''
        }`}
        onClick={() => handleMethodChange('wallet')}
      >
        <input
          type="radio"
          name="payment-method"
          value="wallet"
          checked={selectedMethod === 'wallet'}
          onChange={() => handleMethodChange('wallet')}
        />
        <div className="payment-method-icon">👛</div>
        <div className="payment-method-details">
          <div className="payment-method-title">Digital Wallet</div>
          <div className="payment-method-subtitle">
            Apple Pay, Google Pay, or STC Pay
          </div>
        </div>
      </div>

      {/* Checkout Button */}
      <button
        className="checkout-btn"
        onClick={handleCheckout}
        disabled={isProcessing}
      >
        {isProcessing ? 'Processing...' : 'Proceed to Checkout'}
      </button>
    </div>
  );
}

Vue 3 Component

<template>
  <div class="payment-methods">
    <!-- Credit Card Option -->
    <div
      :class="['payment-method-option', { selected: selectedMethod === 'card' }]"
      @click="handleMethodChange('card')"
    >
      <input
        type="radio"
        name="payment-method"
        value="card"
        v-model="selectedMethod"
      />
      <div class="payment-method-icon">💳</div>
      <div class="payment-method-details">
        <div class="payment-method-title">Credit or Debit Card</div>
        <div class="payment-method-subtitle">
          Pay with Visa, Mastercard, or Mada
        </div>
      </div>
    </div>

    <!-- ProBuy Option - Highlighted -->
    <div
      :class="['payment-method-option', { selected: selectedMethod === 'probuy' }]"
      @click="handleMethodChange('probuy')"
    >
      <input
        type="radio"
        name="payment-method"
        value="probuy"
        v-model="selectedMethod"
      />
      <div class="payment-method-icon">
        <img src="/store/favicon-32x32.png" alt="ProBuy" />
      </div>
      <div class="payment-method-details">
        <div class="payment-method-content">
          <div>
            <div class="payment-method-title">ProBuy - Pay in Installments</div>
            <div class="payment-method-subtitle">Split in up to 12 payments</div>
          </div>
          <div class="payment-method-badges">
            <span class="payment-method-badge">0.05% Commission</span>
            <span class="payment-method-badge sharia">Sharia Compliant</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Digital Wallet Option -->
    <div
      :class="['payment-method-option', { selected: selectedMethod === 'wallet' }]"
      @click="handleMethodChange('wallet')"
    >
      <input
        type="radio"
        name="payment-method"
        value="wallet"
        v-model="selectedMethod"
      />
      <div class="payment-method-icon">👛</div>
      <div class="payment-method-details">
        <div class="payment-method-title">Digital Wallet</div>
        <div class="payment-method-subtitle">
          Apple Pay, Google Pay, or STC Pay
        </div>
      </div>
    </div>

    <!-- Checkout Button -->
    <button
      class="checkout-btn"
      @click="handleCheckout"
      :disabled="isProcessing"
    >
      {{ isProcessing ? 'Processing...' : 'Proceed to Checkout' }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ProBuyCheckoutSDK } from '@probuy/checkout-sdk-core';

const selectedMethod = ref<string>('probuy');
const isProcessing = ref<boolean>(false);

const handleMethodChange = (method: string) => {
  selectedMethod.value = method;
};

const handleCheckout = async () => {
  isProcessing.value = true;

  try {
    if (selectedMethod.value === 'probuy') {
      const sdk = new ProBuyCheckoutSDK({
        apiToken: import.meta.env.VITE_PROBUY_API_TOKEN,
        environment: 'production'
      });

      const orderData = {
        order_number: 'ORD-' + Date.now(),
        total_amount: 1500,
        currency: 'SAR',
        customer: {
          first_name: 'John',
          last_name: 'Doe',
          email: '[email protected]',
          phone: '+966500000000'
        },
        items: [
          {
            name: 'Product Name',
            quantity: 1,
            price: 1500
          }
        ]
      };

      const checkoutUrl = await sdk.checkout(orderData);
      window.location.href = checkoutUrl;
    } else {
      // Handle other payment methods
      console.log(`Selected: ${selectedMethod.value}`);
    }
  } catch (error) {
    console.error('Checkout error:', error);
    alert(`Payment Error: ${(error as Error).message}`);
  } finally {
    isProcessing.value = false;
  }
};
</script>

<style scoped>
/* Include the CSS styles from Step 4 here */
</style>

Complete Standalone HTML File

Download this complete HTML file that you can open directly in a browser to test the payment UI. Perfect for prototyping or static sites.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ProBuy Payment Integration</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #f5f5f5;
      padding: 2rem;
      min-height: 100vh;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    h1 {
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .subtitle {
      color: #666;
      margin-bottom: 2rem;
    }

    /* Include all CSS from Step 4 here */
    .payment-methods {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin: 2rem 0;
    }

    .payment-method-option {
      display: flex;
      align-items: flex-start;
      padding: 1.25rem;
      border: 2px solid #e8e8e8;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      background: #ffffff;
    }

    .payment-method-option:hover {
      border-color: #bf86ff;
      background: #fafbff;
      box-shadow: 0 2px 8px rgba(191, 134, 255, 0.08);
    }

    .payment-method-option.selected {
      border-color: #8d65ff;
      background: linear-gradient(135deg, rgba(191, 134, 255, 0.06) 0%, rgba(65, 82, 234, 0.04) 100%);
      box-shadow: 0 4px 16px rgba(191, 134, 255, 0.12);
    }

    .payment-method-option input[type="radio"] {
      width: 22px;
      height: 22px;
      margin-right: 1.25rem;
      margin-top: 0.25rem;
      cursor: pointer;
      accent-color: #8d65ff;
      flex-shrink: 0;
    }

    .payment-method-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9ff;
      border-radius: 12px;
      margin-right: 1rem;
      font-size: 1.5rem;
      flex-shrink: 0;
      margin-top: 0.125rem;
    }

    .payment-method-icon img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    .payment-method-details {
      flex: 1;
      min-width: 0;
    }

    .payment-method-content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .payment-method-title {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 0.375rem;
      color: #1a1a1a;
      line-height: 1.3;
    }

    .payment-method-subtitle {
      font-size: 0.875rem;
      color: #666;
      line-height: 1.4;
    }

    .payment-method-badges {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex-shrink: 0;
    }

    .payment-method-badge {
      background: linear-gradient(129.26deg, #bf86ff 0%, #4152ea 62.38%, #1b00a5 100%);
      color: white;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1;
    }

    .payment-method-badge.sharia {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .checkout-btn {
      width: 100%;
      padding: 1rem 2rem;
      background: linear-gradient(129.26deg, #bf86ff 0%, #4152ea 62.38%, #1b00a5 100%);
      color: white;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-top: 1.5rem;
    }

    .checkout-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(191, 134, 255, 0.3);
    }

    .checkout-btn:active {
      transform: translateY(0);
    }

    .checkout-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Checkout</h1>
    <p class="subtitle">Select your payment method</p>

    <div class="payment-methods">
      <!-- Credit Card Option -->
      <div class="payment-method-option" onclick="selectPaymentMethod('card')">
        <input type="radio" name="payment-method" id="payment-card" value="card" />
        <div class="payment-method-icon">💳</div>
        <div class="payment-method-details">
          <div class="payment-method-title">Credit or Debit Card</div>
          <div class="payment-method-subtitle">Pay with Visa, Mastercard, or Mada</div>
        </div>
      </div>

      <!-- ProBuy Option - Highlighted -->
      <div class="payment-method-option selected" onclick="selectPaymentMethod('probuy')">
        <input type="radio" name="payment-method" id="payment-probuy" value="probuy" checked />
        <div class="payment-method-icon">
          <img src="/store/favicon-32x32.png" alt="ProBuy" />
        </div>
        <div class="payment-method-details">
          <div class="payment-method-content">
            <div>
              <div class="payment-method-title">ProBuy - Pay in Installments</div>
              <div class="payment-method-subtitle">Split in up to 12 payments</div>
            </div>
            <div class="payment-method-badges">
              <span class="payment-method-badge">0.05% Commission</span>
              <span class="payment-method-badge sharia">Sharia Compliant</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Digital Wallet Option -->
      <div class="payment-method-option" onclick="selectPaymentMethod('wallet')">
        <input type="radio" name="payment-method" id="payment-wallet" value="wallet" />
        <div class="payment-method-icon">👛</div>
        <div class="payment-method-details">
          <div class="payment-method-title">Digital Wallet</div>
          <div class="payment-method-subtitle">Apple Pay, Google Pay, or STC Pay</div>
        </div>
      </div>
    </div>

    <button class="checkout-btn" onclick="handleCheckout()">
      Proceed to Checkout
    </button>
  </div>

  <script>
    // Include all JavaScript from Step 5 here
    function selectPaymentMethod(method) {
      document.querySelectorAll('.payment-method-option').forEach((option) => {
        option.classList.remove('selected');
      });

      const selectedOption = document.querySelector(`#payment-${method}`).parentElement;
      selectedOption.classList.add('selected');
      document.getElementById(`payment-${method}`).checked = true;
      console.log(`Selected payment method: ${method}`);
    }

    async function handleCheckout() {
      const selectedMethod = document.querySelector('input[name="payment-method"]:checked');

      if (!selectedMethod) {
        alert('Please select a payment method');
        return;
      }

      const method = selectedMethod.value;
      const checkoutBtn = document.querySelector('.checkout-btn');
      checkoutBtn.disabled = true;
      checkoutBtn.textContent = 'Processing...';

      try {
        if (method === 'probuy') {
          // Initialize ProBuy checkout
          alert('Initializing ProBuy checkout... (Replace with actual SDK call)');
          // window.location.href = checkoutUrl;
        } else {
          alert(`Processing ${method} payment...`);
        }
      } catch (error) {
        console.error('Checkout error:', error);
        alert('Payment Error: ' + error.message);
      } finally {
        checkoutBtn.disabled = false;
        checkoutBtn.textContent = 'Proceed to Checkout';
      }
    }

    document.addEventListener('DOMContentLoaded', () => {
      selectPaymentMethod('probuy');
    });
  </script>
</body>
</html>

💾 Save This File: Copy the code above and save it as checkout.html. Open it in your browser to see the payment UI in action. Perfect for testing before integration!

Official ProBuy Brand Identity

Use these exact colors and design elements to maintain ProBuy's brand consistency across all merchant integrations.

Primary Gradient

ProBuy Official Gradient:

ProBuy Brand Gradient

background: linear-gradient(129.26deg, #BF86FF 0%, #4152EA 62.38%, #1B00A5 100%);

#BF86FF

Start (0%)

#4152EA

Middle (62.38%)

#1B00A5

End (100%)

ProBuy Value Propositions

Always highlight these key differentiators to help customers understand ProBuy's unique advantages:

☪

100% Sharia Compliant

All transactions follow Islamic finance principles (Murabaha). No interest, fully compliant with Islamic banking regulations.

💰

Transparent Merchant Fees

Low merchant commission rates (as low as 0.05%). Competitive pricing with full transparency.

⚡

Instant Approval

Real-time credit decisions in seconds. Split payments into 3, 6, or 12 months instantly.

Payment Option Text Guidelines

Use clear, action-oriented text that communicates the payment method. Here are recommended labels:

Language	Payment Title	Payment Subtitle
English	✅ "ProBuy - Pay in Installments" ✅ "ProBuy Installments"	• "Split in up to 12 payments" • "Pay over 3, 6, or 12 months" • "0% interest installments"
Arabic	✅ "بروباي - الدفع بالتقسيط" ✅ "تقسيط بروباي"	• "قسّط على 12 دفعة" • "ادفع على 3 أو 6 أو 12 شهر" • "تقسيط بدون فوائد"

Language

English

Payment Title

✅ "ProBuy - Pay in Installments"

✅ "ProBuy Installments"

Payment Subtitle

• "Split in up to 12 payments"

• "Pay over 3, 6, or 12 months"

• "0% interest installments"

Language

Arabic

Payment Title

✅ "بروباي - الدفع بالتقسيط"

✅ "تقسيط بروباي"

Payment Subtitle

• "قسّط على 12 دفعة"

• "ادفع على 3 أو 6 أو 12 شهر"

• "تقسيط بدون فوائد"

Accessibility Requirements

✅ Must Have

Keyboard Navigation: Accessible via Tab and Enter keys
Focus Indicator: Visible outline on radio button focus
ARIA Labels: Proper labels for screen readers
Color Contrast: WCAG AA compliant (4.5:1 minimum)
Touch Target: Minimum 44x44px for mobile
Clear Selection: Visual feedback on selection

🎯 Best Practices

Mobile Responsive: Stack options on small screens
Loading States: Disable during processing
Error Handling: Clear messages for issues
Default Selection: Pre-select ProBuy when appropriate
Visual Hierarchy: ProBuy should stand out
RTL Support: Works with Arabic layouts

Brand Guidelines

Important: Brand Consistency

To maintain ProBuy's brand identity across all merchant integrations, please follow these rules:

✅ Always use the exact gradient values provided
✅ Include badges for "Commission Rate" and "Sharia Compliant"
✅ Use ProBuy logo in the payment icon area
✅ Highlight selection with purple border and gradient background
❌ Don't modify gradient colors or angles
❌ Don't use generic icons instead of ProBuy logo

Testing Checklist

☐ Payment option displays correctly on desktop (Chrome, Safari, Firefox)
☐ Payment option displays correctly on mobile (iOS, Android)
☐ Selection state is clearly visible
☐ Hover effects work smoothly
☐ Radio button is keyboard accessible
☐ Badges are readable in both light and dark modes
☐ ProBuy logo displays properly
☐ Layout works in RTL (Arabic) mode
☐ Gradient renders correctly (not pixelated)
☐ Checkout flow works when ProBuy is selected

Common Issues & Troubleshooting

Solutions to common integration problems developers encounter when implementing the ProBuy payment option.

❌Logo Not Displaying

Problem: The ProBuy logo image is broken or not showing

Solution: Verify the image path is correct. Update the src attribute to match your server structure. Use an absolute path like /images/probuy-logo.png or download the logo and host it locally.

❌Selection State Not Working

Problem: Clicking payment options doesn't change the selected state

Solution: Make sure the JavaScript is loaded after the DOM elements. Move your script tag to the bottom of the body or wrap it in DOMContentLoaded event listener.

❌Gradient Not Rendering

Problem: The ProBuy gradient appears solid or pixelated

Solution: Copy the exact CSS gradient code from this guide. Ensure you're using the correct linear-gradient syntax with all three color stops and the correct angle (129.26deg).

❌Dark Mode Not Working

Problem: Payment options look incorrect in dark mode

Solution: Include the @media (prefers-color-scheme: dark) styles from Step 4. Test on browsers that support this media query.

❌Mobile Layout Issues

Problem: Payment badges overflow or layout breaks on mobile

Solution: Include the responsive CSS media query from Step 4 (@media (max-width: 768px)). Test on actual mobile devices or use browser dev tools.

✅ProBuy SDK Not Initializing

Problem: SDK throws errors or checkout doesn't redirect

Solution: Verify your API token is correct and you're using the right environment (sandbox vs production). Check the SDK documentation for setup instructions.

Quick Reference Guide

Keep this reference handy while implementing the ProBuy payment option.

🎨 Brand Colors

Primary Gradient:
#BF86FF → #4152EA → #1B00A5

Border (Selected):
#8D65FF

Sharia Badge:
#10B981 → #059669

📏 Layout Specs

Logo Size: 28x28px (in 48x48px container)

Border Radius: 16px (options), 12px (badges)

Padding: 1.25rem (20px)

Gap Between Options: 0.75rem (12px)

📱 Mobile Breakpoint

Media Query:
@media (max-width: 768px)

Changes: Stack badges horizontally, reduce padding

⌨️ Accessibility

Min Touch Target: 44x44px

Color Contrast: WCAG AA (4.5:1)

Keyboard Nav: Tab + Enter support

Focus Outline: 2px solid #8d65ff

Need Help?

If you have questions about implementing the ProBuy payment option or need custom design approval, reach out to our team:

📧 Email: [email protected]
📖 Documentation: Getting Started
🔗 Integration Guides: Direct API | Backend SDK

Ready to integrate ProBuy?

Start accepting installment payments today with our flexible integration options.

View Integration Guide Test Your Integration

TL;DR - Quick Implementation Summary

Get ProBuy payment option live in 5 minutes:

1.Download logo: Grab the ProBuy PNG from Step 1 above

2.Copy HTML: Use the complete standalone HTML file or copy the payment options markup

3.Add CSS: Include the complete CSS with dark mode and responsive styles

4.Add JavaScript: Copy the payment selection and checkout handlers

5.Test: Use the testing checklist to verify everything works

💡 Key Requirements:

Use exact ProBuy gradient: #BF86FF → #4152EA → #1B00A5
Display "0.05% Commission" and "Sharia Compliant" badges
Logo size: 28x28px in a 48x48px container
Pre-select ProBuy as default option
Support keyboard navigation and dark mode

🚀 Framework Users: Skip to the React or Vue components for ready-to-use code.