R
R
Roman Khegay2020-08-04 19:39:08
Angular
Roman Khegay, 2020-08-04 19:39:08

How to catch native modal window event with authorization in cordova-plugin-purchase?

The problem is this:
When the user opens the subscription page, a native modal epla window pops up - in which you need to enter icloud / itunes connect login and password. No matter what action the user performs: enters or cancels, the plugin does not catch this event and the endless loading freezes on the page. And the buy button does not appear.
Because of this, the app is constantly rejected with the reason: app loaded indefinitely in the subscription

page


Ionic 5.1.1
Capacitor 2.3.0
Device: iPhone 6S iOS 13.5.1
cordova-plugin-purchase: 10.2.0


Application initialization:
app.component.ts
this.platform.ready().then(() => {
    this.registerProducts()
 })

registerProducts() {
    this.store.register([
        {
            id: 'premium1',
            alias: 'premium',
            type: this.store.PAID_SUBSCRIPTION,
        },
        {
            id: 'product1',
            alias: 'product1',
            type: this.store.CONSUMABLE,
        },
        {
            id: 'product2',
            alias: 'product2',
            type: this.store.CONSUMABLE,
        },
    ])
    this.store.refresh()
}


Main page (the first one when the application starts):
home.ts
this.platform.ready().then(() => {
    let m = this.store.get('premium')
        if (!m.owned) {
            this.setPremium(false)
            this.cdref.detectChanges() // Angular ChangeDetectorRef
        }
})


Subscription page :
page.ts
this.platform.ready().then(() => {
    this.registerProducts()
    this.setupListeners()
    this.store.update()
 })

registerProducts() {
    let product = this.store.get('premium')
    
    if (!product) {
        this.loading = false
        this.productError = true
    } else if (product.state === this.store.INVALID) {
        this.loading = false
        this.productError = true
    } else {
        this.loading = false
        this.product = product
    }

    this.cdref.detectChanges()
}

setupListeners() {
    this.store.when('premium')
        .error(e => {
            this.dissmissAlert()
            this.presentAlert(e.code, e.message)
        })
        .finished(() => {
            this.loading = false
            this.restoreLoading = false
        })
        .expired(() => {
            this.loading = false
            this.productError = true
        })
        .approved((p: IAPProduct) => {
            p.verify()
            this.cdref.detectChanges()
        })
        .verified((p: IAPProduct) => {
            this.setPremium(true)
            p.finish()
            this.cdref.detectChanges()
        })
}

purchase() {
    this.btnLoading = true
    
    try {
        this.store.order('premium').then(() => {
            this.btnLoading = false
        }).catch((err) => {
            this.presentAlert('', err)
        })
    } catch (error) {
        this.presentAlert('', error)
    }
}

restore() {
        this.restoreLoading = true
        this.store.refresh()
        this.cdref.detectChanges()
}

page.html
<ng-container *ngIf="productError">
    <div class="wait">
            <span class="text">Error with Subcription. Try again later.</span>
    </div>
</ng-container>

 <ng-container *ngIf="!productError">
    <ng-container *ngIf="loading">
        <div class="wait">
            <span class="text">Loading...</span>
            <ion-spinner class="spinner" name="crescent"></ion-spinner>
        </div>
    </ng-container>

    <ng-container *ngIf="!loading">
        <p class="act" *ngIf="product.owned">Subscribed</p>

        <button class="sub-btn" (click)="purchase()" *ngIf="!product.owned">
            <ion-spinner class="spinner" name="crescent" *ngIf="btnLoading"></ion-spinner>

            <ng-container *ngIf="!btnLoading">
                <span class="text">Subscribe {{ product.price }} / {{ product.billingPeriod }} мес.</span>
                <ion-icon class="icon" name="arrow-forward-circle" slot="end"></ion-icon>
            </ng-container>
        </button>
    </ng-container>
</ng-container>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question