این پروژه یک نمونه اپلیکیشن وب (PWA) است که نحوه استفاده از سیستم لاگین و پرداخت درونبرنامهای کافهبازار را با استفاده از دیپلینکها نمایش میدهد.
- لاگین با حساب کافهبازار: کاربران میتوانند با حساب کافهبازار خود وارد شوند.
- پرداخت درونبرنامهای: امکان شروع فرآیند خرید یک محصول (SKU) از طریق دیپلینک کافهبازار.
- مصرف خرید (Consume): پس از پرداخت موفق، توکن خرید به سرور کافهبازار ارسال میشود تا خرید نهایی و مصرف شود.
- ردیابی بازدید: تعداد دفعات بازدید کاربر از صفحه با استفاده از کوکیها شمرده میشود.
برای استفاده از این پروژه، ابتدا باید مقادیر ثابت را در فایل src/App.tsx با اطلاعات اپلیکیشن خود جایگزین کنید.
۱. کلون کردن پروژه:
git clone <repository-url>
cd embedded-pwa۲. نصب وابستگیها:
npm install۳. پیکربندی مقادیر ثابت:
فایل src/App.tsx را باز کرده و مقادیر زیر را با اطلاعات صحیح جایگزین کنید:
const PACKAGE_NAME = "YOUR_PACKAGE_NAME_HERE"; // پکیج نیم اپلیکیشن شما در کافهبازار
const API_SECRET = "YOUR_API_SECRET_HERE"; // کلید API از پنل توسعهدهندگان کافهبازار
const SKU = "YOUR_SKU_HERE"; // شناسه محصولی که قصد فروش آن را دارید
const DEALER_PACKAGE_NAME = "YOUR_DEALER_PACKAGE_NAME_HERE"; // پکیج نیم فروشنده (معمولاً مشابه پکیج نیم اصلی)
const REDIRECT_URL = "YOUR_PWA_URL_HERE"; // آدرس صفحهای که کاربر پس از عملیات به آن بازمیگردد۴. اجرای پروژه:
npm startاین اپلیکیشن بر اساس دیپلینکهای کافهبازار برای لاگین و پرداخت عمل میکند.
- کاربر روی دکمه "open login link" کلیک میکند.
- تابع
openLoginDeepLinkیک دیپلینک با فرمتbazaar://inapplogin?...ایجاد میکند. - این دیپلینک اپلیکیشن کافهبازار را باز کرده و کاربر را به صفحه لاگین هدایت میکند.
- پس از لاگین موفق، کافهبازار کاربر را به
REDIRECT_URLبازمیگرداند و اطلاعاتی مانندresponse=okرا در URL ارسال میکند.
- کاربر روی دکمه "open payment link" کلیک میکند.
- تابع
openPaymentDeepLinkابتدا بررسی میکند که آیاaccountIdکاربر موجود است یا خیر.- اگر کاربر لاگین نکرده باشد (
accountIdوجود ندارد): ابتدا فرآیند لاگین از طریقopenLoginDeepLinkاجرا میشود. پس از لاگین موفق و بازگشت به اپلیکیشن، فرآیند پرداخت به صورت خودکار شروع میشود. - اگر کاربر لاگین کرده باشد: دیپلینک پرداخت با فرمت
bazaar://in_app?...اجرا میشود.
- اگر کاربر لاگین نکرده باشد (
- پس از پرداخت موفق در اپلیکیشن کافهبازار، کاربر به
REDIRECT_URLبازمیگردد و یکpurchaseTokenدر پارامترهای URL ارسال میشود. - اپلیکیشن توکن را دریافت کرده و تابع
paymentConsumingرا فراخوانی میکند تا خرید را در سرورهای کافهبازار ثبت و "مصرف" کند. این کار برای جلوگیری از خریدهای تکراری ضروری است.
این پروژه با استفاده از create-react-app ساخته شده است.