Integrating CdvPurchase.Store in Angular 15: A Complete Guide (2026)

In this tutorial, we will walk you through the steps of integrating the Cordova plugin, cordova-plugin-purchase (v13), with Angular 15. This integration allows for seamless in-app purchase functionality within your Angular applications, leveraging the power of Cordova's plugin ecosystem.

Key Takeaways

• Learn how to configure cordova-plugin-purchase with Angular 15.
• Understand the setup of CdvPurchase.Store for in-app purchases.
• Discover troubleshooting tips for common integration issues.
• Gain insights into managing purchases and handling transactions.

As mobile applications grow in complexity, integrating functionalities like in-app purchases becomes crucial. This capability can enhance user experience and generate revenue for app developers. With the release of Cordova-plugin-purchase v13, new features and improvements make it easier to manage in-app purchases. This tutorial is designed to help you effectively implement this plugin within an Angular 15 project.

Prerequisites

• Basic knowledge of Angular and Cordova.
• Node.js and npm installed on your system.
• An existing Angular 15 project.
• Cordova CLI installed.
• Familiarity with TypeScript and dependency injection in Angular.

Step 1: Install Cordova and Cordova Plugin Purchase

First, ensure that you have Cordova installed on your system. If not, you can install it using npm:

npm install -g cordova

Next, navigate to your Angular project directory and add the Cordova plugin:

cordova plugin add cordova-plugin-purchase

This command will add the necessary files and configurations to your project, enabling in-app purchase capabilities.

Step 2: Configure Angular Project for Cordova

To integrate Cordova with Angular, you need to ensure that your Angular project is configured to work as a Cordova application. Add the following script to your package.json to build the Angular app for Cordova:

"scripts": {
  "build-cordova": "ng build --prod && cordova prepare"
}

This script builds your Angular app and prepares it for deployment with Cordova.

Step 3: Set Up the Payment Service

Next, you'll set up a service to handle the purchase logic using the CdvPurchase.Store interface. Here is a basic implementation:

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import 'cordova-plugin-purchase';

@Injectable({
  providedIn: 'root'
})
export class PaymentService {
  constructor(private readonly platform: Platform) {
    this.platform.ready().then(() => {
      // Initialize the store
      CdvPurchase.Store.initialize({
        applicationUsername: 'your-username',
        autoFinishTransactions: true
      });
      this.setupListeners();
    });
  }

  private setupListeners() {
    CdvPurchase.Store.when('product').approved((product) => {
      // Handle approved purchase
      product.finish(); // Finish the transaction
    });

    CdvPurchase.Store.when('purchase').error((error) => {
      console.error('Purchase error: ', error);
    });
  }
}

This service sets up listeners for purchase events and handles transaction approval and errors.

Step 4: Add Purchase Buttons to Your Angular Component

Create a component where users can make purchases. You can add buttons to initiate the purchase process:

Buy Product

In the component TypeScript file, call the purchase function from your service:

import { Component } from '@angular/core';
import { PaymentService } from './payment.service';

@Component({
  selector: 'app-purchase',
  templateUrl: './purchase.component.html'
})
export class PurchaseComponent {
  constructor(private paymentService: PaymentService) {}

  purchase(productId: string) {
    this.paymentService.purchase(productId);
  }
}

Common Errors/Troubleshooting

Here are some common errors and their solutions:

• Error: 'CdvPurchase.Store is undefined'
  Solution: Ensure that the plugin is correctly installed and Cordova is initialized before using the store.
• Error: 'Platform not ready'
  Solution: Use the Platform.ready() method to ensure Cordova is fully loaded before accessing its features.
• Error: 'Product not found'
  Solution: Verify that the product ID is correctly configured and available in the store listing.

Frequently Asked Questions

Do I need an app store account to use in-app purchases?

Yes, you must configure your app and products in the respective app stores to enable in-app purchases.

Can I test purchases without a real transaction?

Yes, both Google Play and Apple App Store provide testing environments for in-app purchases.

How do I handle refunds in my app?

Refunds are generally managed through the app store, but you can listen for refund events in your application using the plugin's API.

Frequently Asked Questions

Do I need an app store account to use in-app purchases?

Yes, you must configure your app and products in the respective app stores to enable in-app purchases.

Can I test purchases without a real transaction?

Yes, both Google Play and Apple App Store provide testing environments for in-app purchases.

How do I handle refunds in my app?

Refunds are generally managed through the app store, but you can listen for refund events in your application using the plugin's API.