پلاگین خرید درون‌برنامه‌ای React Native

برنامه نمونه

نمونه‎‌ پیاده‌سازی شده‌ پرداخت درون‌برنامه‌ای مایکت در React Native را از اینجا می‌توانید دانلود کنید.

پیاده‌سازی

ابتدا در پنل توسعه‌دهنده‌های مایکت package name برنامه خود را رزرو نمایید.

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

react-native init <REACT_APP_NAME>

یا

npx create-new-react-app <REACT_APP_NAME>
توصیه: می‌توانید مراحل را با محتویات پروژه تستی که در ابتدای آموزش گذاشته شده است مقایسه کنید تا مشکلی در روند کار پیش نیاید.
توجه: تاکید بر آن است که بخش‌های مربوط به کدهای native را با استفاده از android studio انجام دهید. فولدر android را در android studio باز کرده و در پایان تغییرات پروژه را build بگیرید. در این صورت اگر به مشکلی در هنگام بیلد گرفتن برخوردید راحت‌تر می‌توانید آن را برطرف کنید. (در صورتی که build با موفقیت انجام شد شما می‌توانید از پرداخت درون برنامه‌ای استفاده کنید.)
توصیه: در همان ابتدای کار یک build بگیرید و مطمئن شوید مشکلی از همان ابتدا وجود ندارد.

Permission خرید درون‌برنامه‌ای را در Manifest قرار دهید.

<uses-permission android:name="ir.mservices.market.BILLING" />

در build.gradle و در قسمت dependencies کتابخانه gson را اضافه نمایید.

dependencies {
....
    implementation 'com.google.code.gson:gson:2.8.6'
}
توجه: در این جا نیز یک بار پروژه را sync with gradle files کنید و پروژه را build کنید و مطمئن شوید تا اینجا مشکلی پیش نیامده است.

این فایل حاوی یکسری فایل‌های جاوا است که درون دو پوشه‌ myketiab و android قرار دارند. شما باید پوشه android و myketiab را در مسیر زیر قرار دهید. (دقت کنید که حتی اگر پوشه com را نداشتید آن را بسازید)

YOUR_PROJECT\android\app\src\main\java\com\

همچنین public key خود را در فایل /myketiab/MyketIap.java و در متغییر base64EncodedPublicKey قرار دهید.

توصیه: پروژه را build کنید و مطمئن شوید مشکلی با فایل‌های اضافه شده پیش نیامده است.

در انتها باید دو تغییر در فایل های MainApplication.java و MainActivity.java ایجاد نمایید. که در مسیر /java/com/your-app قرار دارند. پکیج MyketIapPackage را باید در فایل MainApplication.java و در لیست پکیج‌ها قرار دهید.

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage())
		  packages.add(new MyketIapPackage());
          return packages;
        }
توصیه: پروژه را build کنید و مطمئن شوید مشکلی با پکیج اضافه شده پیش نیامده است.

مرحله پایانی، پیاده‌سازی یکسری callback های MainActivity.java است. تنها دو متد زیر را در انتهای کلاس MainActivity.java قرار دهید. این کار برای برگردان نتیجه پرداخت درون برنامه‌ای به شما است.

public class MainActivity extends ReactActivity {
  static final String TAG = "Myket_Iap";

.....
.....
.....

  @Override
  public void onActivityResult(int requestCode, int resultCode, Intent data) {
    Log.d(TAG, "onActivityResult(" + requestCode + "," + resultCode + "," + data);

    IabHelper helper = MyketIap.getInstance().getHelper();

    if (helper == null) return;

    // Pass on the activity result to the helper for handling
    if (!helper.handleActivityResult(requestCode, resultCode, data)) {
      // not handled, so handle it ourselves (here's where you'd
      // perform any handling of activity results not related to in-app
      // billing...
      super.onActivityResult(requestCode, resultCode, data);
    } else {
      Log.d(TAG, "onActivityResult handled by IABUtil.");
    }
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();

    // very important:
    if (MyketIap.getInstance().getBroadcastReceiver() != null) {
      unregisterReceiver(MyketIap.getInstance().getBroadcastReceiver());
    }

    // very important:
    Log.d(TAG, "Destroying helper.");
    if (MyketIap.getInstance().getHelper() != null) {
      MyketIap.getInstance().getHelper().dispose();
      MyketIap.getInstance().setHelper(null);
    }

  }

}

توجه: در انتها حتما از پروژه خود build گرفته و مطمئن شوید این مراحل با موفقیت طی شده است. اگر در هنگام اجرا برنامه $ react-native run-android به مشکل از نوع build failed برخورد کردید یا در انجام یکی از مراحل قبل مشکلی وجود داشته‌است یا در انتها build نگرفته‌اید.

حال قادر خواهید بود از پرداخت درون‌برنامه استفاده کنید. فایل‌های js را از اینجا دانلود کنید. فایل MyketIap.js و فولدر IapModels را کنار App.js قرار می‌دهیم و از آن‌ها استفاده می‌کنیم. می‌توانید محتویات App.js برنامه تستی را در App.js قرار دهید تا نتیجه را مشاهده کنید.

// Myket Iap
import MyketIap from './MyketIap';
import Inventory from './IapModels/Inventory';
import IabResult from './IapModels/IabResult';
import Purchase from './IapModels/Purchase';

نمونه فایل app.js و برنامه پرداخت‌درون‌برنامه‌ای را می‌توانید از اینجا دانلود کنید.

آشنایی با توابع

    • MyketIap.initializeHelper(onGotInventoryListener, onReceivedListener):
        ◦ onGotInventoryListener: js callback
        ◦ onReceivedListener: js callback

    • MyketIap.consumeAsync(JSON.stringify(purchaseObj), onConsumeFinishedListener)
        ◦ purchaseObj: Purchase Model (IapModels/Purchase.Js)
        ◦ onConsumeFinishedListener: js callback

    • MyketIap.launchPurchaseFlow(SKU_NAME, REQUEST_CODE, onPurchaseFinishedListener)
        ◦ SKU_NAME: string
        ◦ REQUEST_CODE: int
        ◦ onPurchaseFinishedListener: js callback
توجه: بلافاصله بعد از initializeHelper قادر به استفاده از آن نیستیم و این موضوع چند لحظه‌ای طول می‌کشد. با استفاده از callback‌ها می‌توانید از آماده‌ شدن پلاگین با خبر شوید.

آشنایی با Callbackها

    • onPurchaseFinished(purchase, result)
        ◦ purchase: string (json-format)
        ◦ result: string (json-format)
          
    • onGotInventory(inventory, result)
        ◦ inventory: string (json-format)
        ◦ result: string (json-format)
          
    • onConsumeFinished(purchase, result)
        ◦ purchase: string (json-format)
        ◦ result: string (json-format)
Was this article helpful?
Dislike 0
قبلی: پلاگین خرید درون‌برنامه‌ای مایکت برای یونیتی
بعدی: پلاگین خرید درون‌برنامه‌ای فلاتر (Flutter)