نحوه پیاده‌سازی درگاه پرداخت بازارپی (BazaarPay) در اپلیکیشن‌های وب‌ویو

نحوه پیاده‌سازی درگاه پرداخت بازارپی (BazaarPay) در اپلیکیشن‌های وب‌ویو

نحوه پیاده‌سازی درگاه پرداخت بازارپی (BazaarPay) در اپلیکیشن‌های وب‌ویو

اگر اپلیکیشن خود را به صورت «وب‌ویو» (WebView) پیاده‌سازی کرده‌اید و به دنبال یک روش استاندارد، رسمی و بدون دردسر برای دریافت پرداخت‌های درون‌برنامه‌ای هستید، استفاده از بازارپی (BazaarPay) بهترین و تنها راهکار رسمی کافه بازار است. در این مقاله جامع، نحوه پیاده‌سازی این درگاه را به همراه نمونه کدهای جاوااسکریپت و منطق سمت سرور بررسی می‌کنیم.


چرا روش‌های قدیمی اینتنت دیگر در وب‌ویو کار نمی‌کنند؟

در گذشته، بسیاری از توسعه‌دهندگان از اکشن‌های اختصاصی اینتنت (مثل اکشن‌های خرید مستقیم) برای ارتباط با بازار استفاده می‌کردند. اما با تغییرات امنیتی اندروید و سیاست‌های جدید کافه بازار، این روش‌ها منسوخ شده و روی اپلیکیشن‌های وب‌ویو خطای No Activity Found یا عدم دسترسی صادر می‌کنند.

پشتیبانی کافه بازار رسماً اعلام کرده است که برای ساختارهای وب‌ویو، باید از بازارپی (BazaarPay) استفاده شود. بازارپی ساختاری کاملاً وب‌پایه دارد و دقیقاً مانند یک درگاه پرداخت اینترنتی عمل می‌کند.

معماری کلی پرداخت در بازارپی

فرایند خرید در این روش به شکل زیر انجام می‌شود:

  • کاربر روی دکمه خرید در سایت (داخل اپلیکیشن) کلیک می‌کند.
  • اسکریپت سمت فرانت‌اند درخواست را به سرور سایت ارسال می‌کند.
  • سرور شما با استفاده از توکن و API رسمی بازارپی، لینک پرداخت (Checkout URL) را دریافت می‌کند.
  • کاربر به صفحه امن پرداخت بازارپی هدایت شده و پس از پرداخت به سایت شما برمی‌گردد.

آموزش پیاده‌سازی فرانت‌اند (کد جاوااسکریپت)

برای اینکه دکمه‌های پرداخت سایت شما به صورت هوشمند به بازارپی متصل شوند، می‌توانید اسکریپت زیر را در قالب سایت خود (یا از طریق پنل مدیریت اپلیکیشن‌ساز) تزریق کنید:


(function() {
    'use strict';

    const CONFIG = {
        buttonClass: 'bazaar-pay-btn', // کلاس دکمه پرداخت در سایت
        apiUrl: 'https://yourwebsite.com/api/create-bazaarpay.php' // آدرس سرور شما
    };

    function initBazaarPay() {
        const buttons = document.querySelectorAll('.' + CONFIG.buttonClass);
        if (!buttons.length) return;

        buttons.forEach(btn => {
            if (btn.getAttribute('data-init') === 'true') return;
            btn.setAttribute('data-init', 'true');

            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const productId = this.getAttribute('data-product-id') || '';
                const amount = this.getAttribute('data-amount') || 0;

                const originalText = this.innerHTML;
                this.disabled = true;
                this.innerHTML = '⏳ در حال اتصال به درگاه بازارپی...';

                fetch(CONFIG.apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_id: productId, amount: amount })
                })
                .then(res => res.json())
                .then(data => {
                    if (data && data.payment_url) {
                        window.location.href = data.payment_url;
                    } else {
                        alert('خطا در ایجاد تراکنش: ' + (data.message || 'پاسخ نامعتبر'));
resetBtn(this, originalText);
                    }
                })
                .catch(err => {
                    console.error('Error:', err);
                    alert('خطای ارتباط با سرور.');
                    resetBtn(this, originalText);
                });
            });
        });
    }

    function resetBtn(btn, text) {
        btn.disabled = false;
        btn.innerHTML = text;
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initBazaarPay);
    } else {
        initBazaarPay();
    }
})();

منطق سمت سرور و تشخیص کاربر وب‌ویو

یکی از مهم‌ترین بخش‌ها، تفکیک کاربران اپلیکیشن از کاربران مرورگرهای معمولی است. سرور شما می‌تواند به راحتی از طریق هدر User-Agent متوجه شود که درخواست از داخل اپلیکیشن ارسال شده است یا مرورگر کروم/سفری.

تمام وب‌ویوهای استاندارد عبارت wv را در User-Agent خود دارند. سرور شما پس از دریافت درخواست، با استفاده از کلیدهای احراز هویت بازارپی، تراکنش را ایجاد کرده و لینک پرداخت را به فرانت‌اند برمی‌گرداند.

نکات مهم پایانی

  • حتماً در فاز تست از توکن‌های تستی رسمی مستندات بازارپی استفاده کنید.
  • نام بسته (Package Name) اپلیکیشن شما باید دقیقاً با اطلاعات ثبت‌شده در پنل توسعه‌دهندگان بازار همخوانی داشته باشد.
  • با این روش، نیازی به کدهای پیچیده بومی در اندروید نخواهید داشت و کل فرآیند روی بستر وب مدیریت می‌شود.

لطفا مستنداتی که در ادامه قرار می‌دهم را مطالعه کنید تا پاسخ به سوالات خود را در رابطه با پیاده‌سازی را بیابید: پیاده‌سازی پرداخت بازارپی پرداخت دایرکت دبیت و پرداخت کیف پول پرداخت خودکار دایرکت پی در مرحله‌ی اولیه پیاده‌سازی بازارپی:

۱. لطفا ابتدا از توکن تستی استفاده کنید تا کدها را بررسی و عملکرد درگاه را در برنامه تست کنید. نمونه‌ی توکن و پاسخ‌های دریافتی صحیح در مستندات رسمی بازارپی قابل مشاهده است.

۲. پس از اتمام پیاده‌سازی و تست موفق، به بازار اطلاع دهید تا توکن و Destination Name اصلی را برای‌تان ایجاد کرده و در اختیارتان قرار دهند.

۳. از این طریق، احراز هویت درگاه شما تایید می‌شود و زمانی که کاربر به درگاه منتقل می‌شود و پرداخت را انجام می‌دهد، گزارش تراکنش در پیشخان توسعه‌دهندگی شما ثبت خواهد شد. نکته‌ی مهمی که لازم است، توجه داشته باشید، توکن و Destination Name اصلی تنها برای نام بسته‌ی (PackageName) برنامه‌ای که بازارپی را پیاده‌سازی کرده باشد، ارائه می‌شود.

پیام یا نظرات خود را برای ما ارسال کنید.

آخرین مقالات

یکشنبه ۸ شهریور سال ۱۴۰۵

ساخت اپلیکیشن با هوش مصنوعی

چهارشنبه ۱۰ تیر سال ۱۴۰۵

مزیت‌های سامانه website2app.ir

جمعه ۲۳ آبان سال ۱۴۰۴

فعال سازی deeplink سایت در اندروید

یکشنبه ۲۰ شهریور سال ۱۴۰۱

تبدیل سایت به وب ویو