برنامه نمونه

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

نصب

ابتدا در پنل توسعه‌‌دهندگان مایکت، package name برنامه خود را رزرو نمایید و کلید رمز عمومی خود را از پنل توسعه‌‌دهندگان دریافت نمایید. سپس با کمک دستور زیر ماژول پرداخت درون‌برنامه‌ای مایکت را روی پروژه‌ی خود نصب کنید:

npm install iab-myket-reactnative

در صورتی که از yarn استفاده می‌کنید، می‌توانید از دستور زیر استفاده کنید:

yarn add iab-myket-reactnative

توجه داشته باشید که پس از اجرای دستور بالا، dependency این ماژول، باید در فایل package.json پروژه‌ی شما به شکل زیر اضافه شده باشد:

"dependencies": {
    "iab-myket-reactnative": "^1.0.15"
}

دقت کنید که package name ماژول اندروید پروژه‌ی شما باید با package name رزرو شده در پنل توسعه‌دهندگان مایکت مطابقت داشته باشد.

ساخت پوشه plugins در پروژه

 اگر پوشه plugins در پوشه‌ی root پروژه‌ی شما وجود دارد، از همان استفاده کنید. در غیر این صورت پوشه را بسازید:

your-project/
 └── plugins/

ساخت فایل withMarketPlace.js در پوشه plugins

 فایل را در مسیر plugins/withMarketPlace.js ایجاد کنید و کد زیر را داخل آن قرار دهید:

const { withAppBuildGradle } = require('@expo/config-plugins');

const addMarketPlaceToGradle = (config, values) => {
  return withAppBuildGradle(config, config => {
    if (config.modResults.language === 'groovy') {
      let gradleContent = config.modResults.contents;
      const placeholdersString = `
        manifestPlaceholders = [
          marketApplicationId: "${values.marketApplicationId}",
          marketBindAddress: "${values.marketBindAddress}",
          marketPermission: "${values.marketPermission}"
        ]
      `;
      const defaultConfigPattern = /defaultConfig\s*\{/;

      if (!gradleContent.includes(placeholdersString)) {
        gradleContent = gradleContent.replace(
          defaultConfigPattern,
          match => `${match}\n        ${placeholdersString}`
        );
      }

      config.modResults.contents = gradleContent;
    }
    return config;
  });
};

const withMarketPlace = (config, options = {}) => {
  const { marketApplicationId, marketBindAddress, marketPermission } = options;

  if (!marketApplicationId || !marketBindAddress || !marketPermission) {
    throw new Error("withMarketPlace plugin requires all 3 values");
  }
  return addMarketPlaceToGradle(config, {
    marketApplicationId,
    marketBindAddress,
    marketPermission
  });
};

module.exports = withMarketPlace;

اضافه یا ساخت فایل app.config.js

اگر فایل app.config.js موجود است، پلاگین را به بخش plugins اضافه کنید و پلاگین‌های قبلی را تغییر ندهید:

plugins: [
  ...(config.plugins || []),
  [
    withMarketPlace,
    {
      marketApplicationId: "ir.mservices.market",
      marketBindAddress: "ir.mservices.market.InAppBillingService.BIND",
      marketPermission: "ir.mservices.market.BILLING"
    }
  ] ]

اگر فایل app.config.js وجود ندارد، آن را در پوشه‌ی root پروژه ایجاد کنید و محتوای زیر را قرار دهید:

const fs = require('fs');
let baseConfig = {};
if (fs.existsSync('./app.json')) {
  const appJson = require('./app.json');
  baseConfig = appJson.expo || {};
}
const withMarketPlace = require('./plugins/withMarketPlace');
export default ({ config }) => ({
  ...baseConfig,
  ...config,
  plugins: [
    ...(config.plugins || []),
    [
      withMarketPlace,
      {
        marketApplicationId: "ir.mservices.market",
        marketBindAddress: "ir.mservices.market.InAppBillingService.BIND",
        marketPermission: "ir.mservices.market.BILLING"
      }
    ]
  ]
});

اجرای Prebuild

 برای اولین بار که پلاگین اضافه می‌کنید دستور زیر را اجرا کنید:

npx expo prebuild

در صورتی که از yarn استفاده می‌کنید، می‌توانید از دستور زیر استفاده کنید:

yarn expo prebuild

اجرای لوکال روی دستگاه یا امولاتور

 برای تست سریع برنامه روی دستگاه یا امولاتور دستور زیر را اجرا کنید:

npx expo run:android

در صورتی که از yarn استفاده می‌کنید، می‌توانید از دستور زیر استفاده کنید:

yarn expo run:android

بیلد نهایی روی EAS (اختیاری)

در صورتی که نیاز دارید نسخه نهایی پروژه را برای انتشار بسازید، می‌توانید دستور زیر را اجرا کنید:

eas build -p android --profile production

پس از بیلد، پروژه باید بدون مشکل نصب شده و پرداخت درون‌برنامه‌ای مایکت را پشتیبانی کند.

توجه: این مرحله فقط در صورتی لازم است که بخواهید نسخه نهایی یا Production پروژه را منتشر کنید.

پیاده‌سازی

اگر در پیاده‌سازی Component‌های خود در React native از روش Functional استفاده کردید می‌توانید از تابع useMyket به شکل زیر استفاده کنید:

import {useMyket} from "iab-myket-reactnative/src/index";

function MyComponent() {
  const myketInstance = useMyket(myInAppBillingKey);
  // ...
  const someHandler = async () => {
    const inventory = await myketInstance.queryPurchaseProduct(true, productIds);
    console.log(JSON.JSON.stringify(inventory));
  };
  // …
}

اما اگر پیاده‌سازی خود را به روش Class Component انجام دادید می‌توانید به روش زیر عمل کنید:

import myket from 'iab-myket-reactnative';
class  App extends Component 
	componentDidMount() {
		this.didMount = true;
			myket.connect(base64RSA).catch((error) => {
				/**
				* myket is not installed or RSA public key is null or empty
				*/

				this.log(error)
		    }).then(this.retrieverProducts);

	}
	componentWillUnmount() {
		myket.disconnect().catch(() =>  this.log);
	}
}

در برنامه‌ی نمونه، از روش Class Component استفاده کردیم.

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

Connect(RSAPublicKey :String)

این تابع برای مقداردهی اولیه و initialize کردن پروژه ضروری است. ورودی این تابع همان کلید رمز عمومی است که از پنل توسعه‌دهندگان مایکت دریافت کردید. این تابع یک promise به شما برمی‌گرداند. در صورتی که برنامه مایکت روی گوشی کاربر نصب نباشد، promise بازگردانده شده reject می‌شود و شما با استفاده از catch می‌توانید خطای مناسب را دریافت کنید.

Disconnect()

این تابع اتصال سرویس پرداخت درون‌برنامه‌ای مایکت را قطع و منابع اشغال شده توسط ماژول را آزاد می‌کند.

queryPurchaseProduct(querySkuDetails:Boolean,moreSku:String[])

توصیه می‌شود بعد از initialize  کردن ماژول این تابع را فراخوانی کنید. پس از فراخوانی، این تابع به شما یک promise از جنس Inventory باز می‌گرداند که شامل اطلاعات زیر است:

all Purchases: ممکن است طی فرایند خریدهای قبلی، کاربر از برنامه خارج شده یا به هر صورتی نتیجه‌ی اطلاعات خرید به برنامه‌ی شما نرسد، در این صورت اگر محصولات شما مصرف شدنی (consumable) باشد، باید بلافاصله توسط شما consume شده و به کاربر تحویل گردد.

این تابع به شما لیستی از اطلاعات خرید (Purchase) را باز می‌گرداند که شامل جزییات خریدهای مصرف نشده است.
all Products: لیست محصولات قابل ارائه توسط شما به مشتری را بازمی‌گرداند، در صورتی که می‌خواهید این لیست را دریافت کنید باید هنگام فراخوانی تابع، مقدار querySkuDetails را true بدهید تا سرویس مناسب فراخوانی شود و اطلاعات مناسب را دریافت کنید، در غیر این صورت، مقدار این پارامتر را false بدهید تا از فراخوانی سرویس بیشتر جلوگیری شود.

consumePurchase( purchase ): Promise<Void>

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

enableDebugging(enableLogCat:Boolean)

ماژول پرداخت مایکت لاگ‌های خود را با تگ “IabHelper” در خروجی لاگ‌های اندروید (LogCat) می‌نویسد. شما می‌توانید این لاگ‌ها را با استفاده از تابع زیر، فعال یا غیر فعال نمایید:

myket.enableDebugging(isEnable)

استفاده از callBack

در صورتی که ساختار برنامه‌ی شما به گونه‌ای نیست که بتوانید از promise استفاده کنید یا به هر دلیلی نمی‌خواد از آن استفاده کنید می‌توانید به شکل زیر از ماژول MyketBillingModule استفاده کنید و نتایج را به صورت callback دریافت نمایید:

import { NativeModules } from 'react-native';
const { MyketBillingModule} = NativeModules;