How Axon Can Help You Integrate In-App Purchase Into Application?

Step 4. Create BLoC

Well, let's now create our BLoC in which all our logic for In-App Purchase will be implemented.

To begin with, we will implement a State with two fields. The first field will be status. With the help of this field, we will change our View depending on the needs. For example, when we have a status like loading, we will show the loader, and when we have a status like success, we will show a list of products.

enum IAPStatus { initial, loading, success, failure }


@freezed
class IAPState with _$IAPState {
 const factory IAPState({
   @Default(IAPStatus.initial) IAPStatus status,
   @Default([]) List<ProductDetails> productOfStore
 }) = _Initial;
}

Now that we have State, we need to implement the Events collection. We will need two events: getProductsByIds and purchaseProduct.

enum IAPTypeProduct { renewal, nonRenewal }

@freezed
class IAPEvent with _$IAPEvent {
 const factory IAPEvent.getProductsByIds(
  Set<String> ids,
 ) = _GetProductsByIds;
 const factory IAPEvent.purchaseProduct(
   ProductDetails product,
   IAPTypeProduct type,
 ) = _PurchaseProduct;
}

Well, now that we have both State and Events we can get down to the fun part, which is implementing our BLoC logic for In-App Purchase. Let's take a look at this logic and break it down step by step.

Our BLoC class will have three public methods that will be exposed in our View.

Using the getProductsByIds method, we will retrieve our products that will be available to the user for purchase. As we can see, we have created a unique list of data that represents the product IDs. We will need this data to get exactly those products specified in the list.

Also, as we can see throughout this in app purchase tutorial, we have methods like purchaseProductRenewal and purchaseProductNonRenewal, these methods will serve us so that we can request the purchase of a renewing product or a non-renewing product (i.e. subscription or non-subscription).

extension IAPBlocExt on IAPBloc {
 /// Public user methodes
 void getProductsByIds() {
   final ids = <String>{ 
     'premium_30_days', 
     'premium_60_days', 
     'premium_90_days', 
   };


   add(_GetProductsByIds(ids));
 }


 void purchaseProductRenewal(ProductDetails product) {
   add(_PurchaseProduct(product, IAPTypeProduct.renewal));
 }


 void purchaseProductNonRenewal(ProductDetails product) {
   add(_PurchaseProduct(product, IAPTypeProduct.nonRenewal));
 }
}

Well, now let's take a look at our BLoC. As we can see, we are handling our getProductsByIds and purchaseProduct events.

class IAPBloc extends Bloc<IAPEvent, IAPState> {
 IAPBloc() : super(const _Initial()) {
   _listeningPurchase();


   on<IAPEvent>(_onIAPHandler);
 }


 /// Handler for events
 Future<void> _onIAPHandler(IAPEvent event, Emitter<IAPState> emit) async {
   await event.map(
     getProductsByIds: (event) => _onGetProductsByIds(event, emit),
     purchaseProduct: (event) => _onPurchaseProduct(event, emit),
   );
 }


 // ...
}

Now let's look at how these events are handled in more detail. First, we will look at the _onGetProductsByIds handler that allows us to get the available products that we are requesting.

Future<void> _onGetProductsByIds(
 _GetProductsByIds event,
 Emitter<IAPState> emit,
) async {
 final items = await InAppPurchase.instance.queryProductDetails(event.ids);


 emit(state.copyWith(
   status: IAPStatus.success,
   productOfStore: items,
 ));
}

As we can see, the event handler for getting products looks very simple. All we do in this handler is query the AppStore or Google in-app purchase Android for products and add them to our state.

Now, let's look at another handler _onPurchaseProduct that we use to make a purchase request.

Important note: You also need to complete all previous transactions for the iOS system, if any. As you can see, this is exactly what we do in the _finishedPreviewsTransactions method.

Future<void> _onPurchaseProduct(
 _PurchaseProduct event,
 Emitter<IAPState> emit,
) async {
 emit(state.copyWith(status: IAPStatus.loading));


 if (Platform.isIOS) _finishedPreviewsTransactions();


 try {
   final product = event.product;
   final purchaseParam = PurchaseParam(productDetails: product);
   final purchaseType = event.type;


   if (purchaseType == IAPTypeProduct.renewal) {
     await InAppPurchase.instance.buyConsumable(
       purchaseParam: purchaseParam
     );
   } else {
     await InAppPurchase.instance.buyNonConsumable(
       purchaseParam: purchaseParam
     );
   }


   emit(state.copyWith(status: IAPStatus.success));
 } on PlatformException catch (ex) {
   emit(state.copyWith(status: IAPStatus.failure));
 }
}


Future<void> _finishedPreviewsTransactions() async {
 var transactions = await SKPaymentQueueWrapper().transactions();
 for (var skPaymentTransactionWrapper in transactions) {
   SKPaymentQueueWrapper().finishTransaction(skPaymentTransactionWrapper);
 }
}

As we can see in this in app purchase tutorial, the handler responsible for creating the purchase request is also very simple, all we do is get ProductDetails and create the PurchaseParam object with which we will work. Our next step will be to check the request type, it can be renewal or nonRenewal, depending on this type, we will call the method we need from the InAppPurchase class, that is, for the renewal type, we will call the buyConsumable method, and for the nonRenewal type, we will call the buyNonConsumable method.

The buyConsumable and buyNonConsumable methods will call a modal window from your OS that will allow you to purchase the product.

Well, now you probably have a question, how to process the result for the in app purchase? Everything is quite simple, the in_app_purchase plugin provides us with a listener that will listen to events that occur during a transaction.

This is how our listener will look like, which will process transaction events. Depending on the status of the transaction, you can trigger the behavior that will correspond to your flow. This listener should be initialized as soon as our BLoC class is initialized.

Future<void> _listeningPurchase() async {
 InAppPurchase.instance.purchaseStream.listen(
   (events) {
     Future.forEach(events, (purchaseDetails) async {
       if (purchaseDetails.pendingCompletePurchase) {
         log('PENDING-COMPLETE-PURCHASE', name: 'IN-APP-PURCHASE');
	   // ...
   await InAppPurchase.instance.completePurchase(purchaseDetails);
       }


       switch (purchaseDetails.status) {
         case PurchaseStatus.pending:
           log('PENDING', name: 'IN-APP-PURCHASE');
         case PurchaseStatus.purchased:
           log('PURCHASED', name: 'IN-APP-PURCHASE');
         case PurchaseStatus.error:
           log('ERROR', name: 'IN-APP-PURCHASE');
         case PurchaseStatus.restored:
           log('RESTORED', name: 'IN-APP-PURCHASE');
         case PurchaseStatus.canceled:
           log('CANCELED', name: 'IN-APP-PURCHASE');
       }
     });
   },
   onDone: () {
     log('DONE, name: 'IN-APP-PURCHASE');
   },
   onError: (error) {
     log(error.toString(), name: 'IN-APP-PURCHASE');
   },
 );
}

In this blog post, we covered the implementation of In-App Purchases on a mobile client written in Flutter. However, for in-app purchases to operate fully and securely, you will also need to implement a backend part that will implement the behavior for checking and confirming payments in the AppStore.

Conclusion

If you are just at the beginning of the project and are wondering how you can use In-App Purchase in a nice and concise way and, most importantly, professionally, then we recommend that you look at the connection of this type of monetization with the BLoC architecture and the Freezed code generator. In this case, your code will be easy to maintain and fast. This approach combines two good solutions at once, the clean and concise BLoC architecture and the Freezed code generator, which makes our code even better and can easily connect plugins such as In-App Purchase.

At Axon, we understand the vital role that in-app purchases play in the success of mobile apps and games. Integrating these systems can be complex, requiring careful consideration of user experience, security, and seamless functionality. That's why we offer specialized software engineering services (going far beyond in-app purchase Android, iOS, and Flutter)  tailored to help you implement effective in-app purchase systems effortlessly. Contact us today to get a detailed consultation on your project!