Привет, меня зовут Алексей. Сегодня я расскажу про внедрение внутренних покупок в мобильное приложение на Flutter с помощью плагина In-App Purchase.

Сначала расскажу немного о самих предметах которые мы можем продавать чтоб потом не было вопросов.

Есть 3 типа платного контента:

1. Расходуемые предметы (монеты, кристаллы, патроны и тп).
2. Нерасходуемые предметы (аватары, костюмы, и тп. т.е. все то что можно купить только один раз).
3. Подписки (ну тут все и так понятно).

Настройка iOS

Можете начать работу с изучения офф документации эпл, но она максимально не понятна для меня, поэтому я расскажу что надо сделать из своего опыта)

Первым делом идем в AppstoreConnect, там в верхнем меню выбираем agreements(Соглашения) и принимаем соглашение о "Платных приложениях и покупках в них". п.с. соглашение может принять только владелец аккаунта!

Далее мы едем на страницу приложения в сторе и в боковом меню выбираем пункт In-App Purchases или Subscriptions в зависимости от того какой продукт мы хотим продавать.
Я буду показывать на примере монет.
Выбираем пункт In-App Purchases и в открывшемся окне нажимаем + и видим такую картину.

Type - это расходуемый или нерасходуемый материал
Name - название отображаемое именно в AppStoreConnect
Id - уникальный идентификатор продукта для этого приложения

Нажимаем создать и видим окно с нашим продуктом, теперь нам надо добавить цену и названия отображаемое в самом приложении.

По цене ничего сложного просто в этом поле из дропдауна выбираем нужную и все (если надо можно добавить скидку на определенный период нажав + в этом поле)

Теперь переводы и названия нажимаем добавить локализацию

Видим такое меню

Localization - ну собственно для какого языка перевод
Display Name - это поле мы потом получим в нашем приложении как название
Description - это поле мы потом получим в нашем приложении как описание продукта

Все далее нажимаем сохранить в верхнем правом углу и готово мы создали наш продукт!
Можем повтотрить все действия и добавить нужные нам предметы!

Настройка Android

Все тоже самое что и для iOS только проще )

Заходим на https://play.google.com/console/ выбираем нужное приложение далее в правом меню выбираем продукты->продукты в приложении и нажимаем создать новый продукт.

В открывшемся окне вводим ID нового продукта, название ,описание, и устанавливаем цену.

Все! На этом со сторами мы закончили.

Настройка самого приложения

Для начала установим пакет для платежей

flutter pub add in_app_purchase

Далее создадим сервис который будет обрабатывать все наши манипуляции со стором
и добавим в него все необходимое.

class InAppPurchaseService {
  final InAppPurchase _inAppPurchase = InAppPurchase.instance;
  final Stream<List<PurchaseDetails>> _storeSubscription =
      InAppPurchase.instance.purchaseStream;

  InAppPurchase get instance => _inAppPurchase;
}

Также нам нужно создать списки с айдиншиками наших объектов в сторе чтобы запрашивать их из стора.

 static const Set<String> coins = {
    '70_coins',
    '350_coins',
    '700_coins',
    '1400_coins',
    '3500_coins',
    '7000_coins',
    '17500_coins',
  };

Далее добавим метод для получения продуктов из стора

Future<List<ProductDetails>> getProductsByType(StoreItemType type) async {
    final Set<String> productsIds;

    switch (type) {
      case StoreItemType.coins:
        productsIds = StoreProductsIds.coins;
        break;
      case StoreItemType.subscription:
        productsIds = StoreProductsIds.subscriptions;
        break;
    }

    final bool isAvailable = await _inAppPurchase.isAvailable();
    if (!isAvailable) {
      return [];
    }

    final ProductDetailsResponse productDetailResponse =
        await _inAppPurchase.queryProductDetails(productsIds);

    if (productDetailResponse.error != null ||
        productDetailResponse.productDetails.isEmpty) {
      return [];
    }

    return productDetailResponse.productDetails;
  }

После вызова этого метода мы получим список продуктов в таком объекте.

class ProductDetails {
  /// Creates a new product details object with the provided details.
  ProductDetails({
    required this.id,
    required this.title,
    required this.description,
    required this.price,
    required this.rawPrice,
    required this.currencyCode,
    this.currencySymbol = '',
  });

  /// The identifier of the product.
  ///
  /// For example, on iOS it is specified in App Store Connect; on Android, it is specified in Google Play Console.
  final String id;

  /// The title of the product.
  ///
  /// For example, on iOS it is specified in App Store Connect; on Android, it is specified in Google Play Console.
  final String title;

  /// The description of the product.
  ///
  /// For example, on iOS it is specified in App Store Connect; on Android, it is specified in Google Play Console.
  final String description;

  /// The price of the product, formatted with currency symbol ("$0.99").
  ///
  /// For example, on iOS it is specified in App Store Connect; on Android, it is specified in Google Play Console.
  final String price;

  /// The unformatted price of the product, specified in the App Store Connect or Sku in Google Play console based on the platform.
  /// The currency unit for this value can be found in the [currencyCode] property.
  /// The value always describes full units of the currency. (e.g. 2.45 in the case of $2.45)
  final double rawPrice;

  /// The currency code for the price of the product.
  /// Based on the price specified in the App Store Connect or Sku in Google Play console based on the platform.
  final String currencyCode;

  /// The currency symbol for the locale, e.g. $ for US locale.
  ///
  /// When the currency symbol cannot be determined, the ISO 4217 currency code is returned.
  final String currencySymbol;
}

Так продукты получить получили, но надо теперь как-то их купить.

Тут я использую класс прослойку для хендлинга всех движений со стором. Дело вот в чем после вызова метода о покупке нам надо завершить покупку после. проверки подлинности платежа на бэке! Если мы не завершим покупку деньги вернуться покупателю через 3 дня. И транзакция будет считаться отмененной.

Для этого мы создаем класс который хэндлит все стейты платежей:


class PurchaseDetailsStreamSubscription {
  final InAppPurchaseService inAppPurchaseService = Get.find<InAppPurchaseService>();
  final Function()? onPending;
  final Function(PurchaseDetails purchaseDetails)? onPurchased;
  final Function()? onError;
  final Function()? onRestored;
  final Function()? onCanceled;

  StreamSubscription<List<PurchaseDetails>>? _streamSubscription;
  PurchaseDetailsStreamSubscription({
    this.onPending,
    this.onPurchased,
    this.onError,
    this.onRestored,
    this.onCanceled,
  });

  Future<void> init() async {
    _streamSubscription = inAppPurchaseService.getStoreSubscription().listen(
      (List<PurchaseDetails> events) {
        Future.forEach(
          events,
          (PurchaseDetails purchaseDetails) async {
            if (purchaseDetails.pendingCompletePurchase) {
              await inAppPurchaseService.completePurchase(purchaseDetails);
            }
            switch (purchaseDetails.status) {
              case PurchaseStatus.pending:
                onPending?.call();
                break;
              case PurchaseStatus.purchased:
                onPurchased?.call(purchaseDetails);
                break;
              case PurchaseStatus.error:
                onError?.call();
                break;
              case PurchaseStatus.restored:
                onRestored?.call();
                break;
              case PurchaseStatus.canceled:
                onCanceled?.call();
                break;
            }
          },
        );
      },
    );
  }

  void close() {
    _streamSubscription?.cancel();
  }
}

Далее создаем еще два метода в нашем сервисе для покупок.

Future<bool> buyItemInStore(ProductDetails product) async {
    final PurchaseParam purchaseParam = PurchaseParam(productDetails: product);
    return InAppPurchase.instance.buyConsumable(purchaseParam: purchaseParam);
  }

  Future<void> completePurchase(PurchaseDetails purchaseDetails) async {
    await InAppPurchase.instance.completePurchase(purchaseDetails);
  }

Первый как понятно инициализирует покупку на стороне платформы, второй завершает покупку.

Далее в BloC или где вам там удобнее инициализируем наш класс прослойку и передаем в него такое

purchaseDetailsStreamSubscription = PurchaseDetailsStreamSubscription(
      onCanceled: closeLoader,
      onError: closeLoader,
      onPurchased: (PurchaseDetails purchaseDetails) async {
        closeLoader();
        try {
          // тут мы проверяем наш платеж на стороне сервера передав данные о платеже , 
          // и если все ок завершаем  покупку
          final bool res = await transactionRepository
              .createTransaction(purchaseDetails.verificationData.serverVerificationData);
          if (res) {
            await inAppPurchaseService.completePurchase(purchaseDetails);
            await updateBalance();
          }
        } catch (_, __) {}
      },
    )..init();

Все можем пробовать совершить покупку просто вызвав этот метод!

inAppPurchaseService.buyItemInStore(item);

С подписками история такая же история, а вот с не расходуемыми продуктам надо вызывать метод .

buyNonConsumable

Как-то так! Всем спасибо за внимание!

P.S. если что не так, поправьте плиз в комментах!) спасибо)

Flutter + In-App Purchases