اتصال به درگاه پرداخت در پروژه فروشگاه اینترنتی

🎯 اهداف یادگیری

• آشنایی با مفاهیم پایه درگاه پرداخت
• پیاده سازی سبد خرید و محاسبات مالی
• اتصال به درگاه پرداخت زرین پال
• مدیریت وضعیت پرداخت و خطاها
• پیاده سازی برگشت از درگاه پرداخت

📌 مقدمه ای بر درگاه های پرداخت

در این بخش می‌خواهیم سیستم پرداخت را به پروژه فروشگاه اینترنتی اضافه کنیم. درگاه پرداخت واسطه ای بین فروشگاه و بانک است که تراکنش‌های مالی را مدیریت می‌کند.

// مراحل کلی پرداخت در فروشگاه اینترنتی
1. کاربر روی دکمه پرداخت کلیک می‌کند
2. اطلاعات سبد خرید و مبلغ نهایی محاسبه می‌شود
3. اتصال به درگاه پرداخت و ارسال اطلاعات
4. کاربر پرداخت را در درگاه انجام می‌دهد
5. بازگشت به سایت و بررسی وضعیت پرداخت

انواع درگاه های پرداخت:

• زرین پال: یکی از محبوب‌ترین درگاه‌های پرداخت ایرانی
• پی‌پال: برای پرداخت‌های بین‌المللی
• درگاه بانکی مستقیم: اتصال مستقیم به بانک‌های ایرانی

📌 پیاده سازی سبد خرید

قبل از اتصال به درگاه پرداخت، نیاز داریم سبد خرید کاربر را مدیریت کنیم:

class Cart {
  constructor() {
    this.items = [];
    this.total = 0;
  }
  addItem(product, quantity) {
    // افزودن محصول به سبد خرید
    const item = { ...product, quantity };
    this.items.push(item);
    this.calculateTotal();
  }
  calculateTotal() {
    this.total = this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }
}

📌 اتصال به درگاه پرداخت زرین پال

برای اتصال به زرین پال ابتدا نیاز به ثبت نام و دریافت API Key دارید:

async function initiatePayment() {
  try {
    // ارسال درخواست به سرور برای ایجاد تراکنش
    const response = await fetch('/api/payment/request', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: cart.total,
        callback: `${window.location.origin}/verify-payment`,
        description: 'خرید از فروشگاه اینترنتی',
      }),
    });
    const data = await response.json();
    if (data.success) {
      // هدایت کاربر به درگاه پرداخت
      window.location.href = data.payment_url;
    } else {
      alert(data.message);
    }
  } catch (error) {
    console.error('خطا در اتصال به درگاه پرداخت:', error);
    alert('خطایی در ارتباط با درگاه پرداخت رخ داده است');
  }
}

پارامترهای مهم درگاه پرداخت:

• amount: مبلغ تراکنش به ریال
• callback: آدرس بازگشت پس از پرداخت
• description: توضیح کوتاه درباره تراکنش
• mobile: شماره موبایل کاربر (اختیاری)
• email: ایمیل کاربر (اختیاری)

📌 مدیریت بازگشت از درگاه پرداخت

پس از پرداخت، کاربر به آدرس callback هدایت می‌شود. باید وضعیت پرداخت را بررسی کنیم:

async function verifyPayment() {
  const urlParams = new URLSearchParams(window.location.search);
  const authority = urlParams.get('Authority');
  const status = urlParams.get('Status');
  if (status === 'OK') {
    // ارسال درخواست به سرور برای بررسی نهایی پرداخت
    const response = await fetch(`/api/payment/verify?authority=${authority}`);
    const data = await response.json();
    if (data.success) {
      showSuccessMessage(data.message);
      clearCart();
    } else {
      showErrorMessage(data.message);
    }
  } else {
    showErrorMessage('پرداخت با شکست مواجه شد یا توسط کاربر لغو شد');
  }
}

وضعیت‌های ممکن پرداخت:

📌 نکات امنیتی در پرداخت اینترنتی

• هرگز API Key را در سمت کلاینت قرار ندهید: تمام ارتباطات با درگاه پرداخت باید از طریق سرور انجام شود
• تأیید مبلغ پرداخت در سرور: قبل از تأیید نهایی پرداخت، مبلغ را با مبلغ سفارش مقایسه کنید
• استفاده از HTTPS: برای جلوگیری از حملات Man-in-the-middle
• لاگ گیری از تراکنش‌ها: برای پیگیری مشکلات احتمالی
• اعتبارسنجی ورودی‌ها: بررسی صحت پارامترهای دریافتی از درگاه پرداخت

📌 تمرین عملی

صفحه پرداخت را با ویژگی‌های زیر تکمیل کنید:

class PaymentPage {
  constructor() {
    // 1. نمایش خلاصه سفارش
    // 2. افزودن امکان انتخاب روش پرداخت
    // 3. پیاده سازی اعتبارسنجی فرم پرداخت
    // 4. مدیریت رویداد کلیک روی دکمه پرداخت
    // 5. نمایش وضعیت پرداخت به کاربر
  }
}

راهنمای تمرین:

1. صفحه‌ای طراحی کنید که خلاصه سفارش (محصولات، تعداد، مبلغ کل) را نمایش دهد
2. امکان انتخاب روش پرداخت (زرین پال، کارت به کارت، پرداخت در محل) را اضافه کنید
3. اطلاعات کاربر (نام، آدرس، تلفن) را دریافت و اعتبارسنجی کنید
4. پس از کلیک روی دکمه پرداخت، کاربر را به درگاه هدایت کنید
5. پس از بازگشت از درگاه، نتیجه پرداخت را به کاربر نمایش دهید

📌 قدم بعدی

در بخش بعدی با سیستم احراز هویت کاربران در پروژه فروشگاه اینترنتی آشنا خواهیم شد!