MirPayJS – React uchun to‘lov integratsiyasi

MirPayJS – bu React ilovasida MirPay to‘lov tizimi bilan ishlashni soddalashtiruvchi kutubxona. U token olish, to‘lov yaratish va to‘lov holatini avtomatik kuzatish (polling) kabi imkoniyatlarni taqdim etadi.

📦 Talablar

• Node.js v12 yoki undan yuqori
• React v16.8 yoki undan yuqori (hooks bilan ishlash uchun)
• axios va form-data kutubxonalari

⚙️ O‘rnatish

Terminalda quyidagi buyruqni bajaring:

npm install mirpayjs axios form-data

🚀 Foydalanish

Quyidagi kod MirPay kutubxonasi bilan ishlovchi namunaviy React komponentni ko‘rsatadi:

import React, { useState, useEffect, useRef } from 'react';
import MirPay from 'mirpayjs'; // Yoki lokal fayl: './index.js'

const mirpay = new MirPay('SIZNING_KASSAID', 'SIZNING_APIKEY');

export default function PaymentComponent() {
  const [token, setToken] = useState(null);
  const [payment, setPayment] = useState(null);
  const [status, setStatus] = useState(null);
  const [error, setError] = useState(null);

  const checksRef = useRef(0);
  const intervalIdRef = useRef(null);

  useEffect(() => {
    async function startPaymentProcess() {
      try {
        const token = await mirpay.getToken();
        setToken(token);

        const payment = await mirpay.createPayment(1000, 'Buyurtma ID: 22');
        setPayment(payment);

        intervalIdRef.current = setInterval(async () => {
          checksRef.current++;
          try {
            const statusData = await mirpay.checkStatus(payment.id);
            const currentStatus = statusData.payinfo.status;
            setStatus(currentStatus);

            const lowerStatus = currentStatus.toLowerCase();
            if (['muvaffaqiyatli', 'rad etilgan', 'bekor qilingan'].includes(lowerStatus)) {
              clearInterval(intervalIdRef.current);
            }

            if (checksRef.current >= 20) {
              clearInterval(intervalIdRef.current);
            }
          } catch (err) {
            setError('Status tekshirishda xatolik: ' + err.message);
            clearInterval(intervalIdRef.current);
          }
        }, 3000);
      } catch (err) {
        setError('Xatolik: ' + err.message);
      }
    }

    startPaymentProcess();

    return () => {
      if (intervalIdRef.current) clearInterval(intervalIdRef.current);
    };
  }, []);

  return (
    <div>
      <h1>MirPay To‘lov</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {token && <p>Token: {token}</p>}
      {payment && <p>To‘lov yaratildi (ID: {payment.id})</p>}
      {status && <p>To‘lov holati: {status}</p>}
      {!payment && !error && <p>To‘lov yaratilmoqda...</p>}
    </div>
  );
}

📌 Parametrlar

| Parametr | Turi | Tavsif | |--------------|----------|-----------------------------------------------------------| | kassaid | string | MirPay hisobingiz identifikatori | | apiKey | string | Sizga berilgan API kalit | | summa | string | To‘lov summasi, tiyinlarda (masalan, 1000 = 10 000 so‘m) | | Buyurtma ID:| string | Tushundiz (masalan, 1 yokida 2 shu id orqali tolov status tekshirasiz) | | infoPay | string | To‘lov haqida izoh (masalan, buyurtma ID yoki izoh) |

🔁 To‘lov holatini kuzatish (Polling)

• Har 3 soniyada to‘lov holati checkStatus orqali tekshiriladi.
• Maksimal 20 ta urinish qilinadi.
• Quyidagi holatlardan biri qayd etilsa, kuzatish avtomatik to‘xtaydi:
  • muvaffaqiyatli
  • rad etilgan
  • bekor qilingan
• Agar xatolik yuz bersa, polling avtomatik to‘xtatiladi va xatolik ko‘rsatiladi.

❗ Muhim Eslatma

Ushbu kutubxona axios va form-data kutubxonalariga tayanadi. Iltimos, mirpayjs bilan ishlashdan oldin ularni o‘rnating.

📄 Litsenziya

MIT – Ochiq manbali, bemalol foydalanishingiz mumkin!

👨‍💻 Muallif

Xusanboy – xusanboy-dev.uz

Agar sizga yordam kerak bo‘lsa yoki xatoliklar topsangiz, Telegramda yozib qoldiring.