Ionic 4 - 在应用内购买之前无法显示产品信息

Question

Ionic 4 - 在应用内购买之前无法显示产品信息

3

我已经使用谷歌并遵循在线教程进行应用内购买。我已经完成了苹果平台上的所有设置，现在正在测试应用内购买函数。这个函数似乎可以正常工作，但是我现在遇到了两个问题。

首先，我使用store.refresh()和store.get()命令从Apple的服务器获取数据。然而，在我按下“购买”按钮之前，我只能看到获取的产品信息。从Xcode控制台，我可以看到产品信息（如定价等）已经被加载，但就是不能在我按下购买按钮之前显示在我的视图页面上。我错过了什么吗？

其次，如果我有多个应用内购买产品，如何修改我的代码？我已经看到一些在线资源，但似乎没有针对ionic和in-app-purchase2的可用资源。

我已经致力于这个应用内购买项目2周，特别是在苹果方面耗费了大量时间。任何关于上述问题的帮助都将非常重要和受到高度赞赏！ upgrade.ts文件

 import { NavController, Platform } from '@ionic/angular';
 import { InAppPurchase2, IAPProduct } from '@ionic-native/in-app-purchase-2/ngx';

 @Component({
   selector: 'app-upgrade',
   templateUrl: './upgrade.page.html',
   styleUrls: ['./upgrade.page.scss'],
 })

 export class UpgradePage {

   setupReady = 'Not yet';
   public prod: any = {};

   public product: any = {
       name: 'Upgrade to Premium 12 months',
       appleProductId: 'upgrade_12months',
       googleProductId: 'android.test.purchased'
   };

  constructor(private store: InAppPurchase2,
            public platform: Platform,
             ) {
    this.platform.ready().then(() => {
        this.configurePurchasing();
        this.setupReady = 'Ready';
    });
  }

  ionViewDidEnter() {
    this.prod = this.store.get('upgrade_12months');
  }

configurePurchasing() {
  if (!this.platform.is('cordova')) { return; }
  let productId;
  try {
    if (this.platform.is('ios')) {
      productId = this.product.appleProductId;
    } else if (this.platform.is('android')) {
      productId = this.product.googleProductId;
    }

    // Register Product
    // Set Debug High
    this.store.verbosity = this.store.DEBUG;

    // Register the product with the store
    this.store.register({
        id: 'upgrade_12months',
        alias: 'upgrade_12months',
        type: this.store.PAID_SUBSCRIPTION
    });

    this.registerHandlers(productId);
    this.store.refresh();
    this.prod = this.store.get(productId);

    InAppPurchase2.getPlugin().ready().then((status) => {
      console.log(JSON.stringify(this.store.get(productId)));
      console.log('Store is Ready: ' + JSON.stringify(status));
      console.log('Products: ' + JSON.stringify(this.store.products));
    });

    // Errors On The Specific Product
    this.store.when(productId).error( (error) => {
      alert('An Error Occured' + JSON.stringify(error));
    });
    // Refresh Always
    console.log('Refresh Store');
    this.store.refresh();
  } catch (err) {
    console.log('Error On Store Issues' + JSON.stringify(err));
  }
}

 registerHandlers(productId) {
  // Handlers
  this.store.when(productId).approved( (product: IAPProduct) => {
    alert('Approved!');
    // Purchase was approved
    product.finish();
  });

  this.store.when(productId).registered( (product: IAPProduct) => {
    console.log('Registered: ' + JSON.stringify(product));
    console.log(` Registered2 ${product.owned}`);
  });

  this.store.when(productId).updated( (product: IAPProduct) => {
    console.log('Loaded' + JSON.stringify(product));
  });

  this.store.when(productId).cancelled( (product) => {
    alert('Purchase was Cancelled');
  });

  // Overall Store Error
  this.store.error( (err) => {
    console.log('Store Error ' + JSON.stringify(err));
  });
 }


async purchase() {
  if (!this.platform.is('cordova')) { return; }
  let productId;

  if (this.platform.is('ios')) {
    productId = this.product.appleProductId;
  } else if (this.platform.is('android')) {
    productId = this.product.googleProductId;
  }

  this.registerHandlers(productId);
  try {
    const product = this.store.get(productId);
    console.log('Product Info: ' + JSON.stringify(product));
    this.store.order(productId).then((p) => {
      alert('Purchase Action Detected');
      this.registerHandlers(productId);
    }).catch((e: string) => {
      alert('Error Ordering From Store' + e);
    });
  } catch (err) {
    console.log('Error Ordering ' + JSON.stringify(err));
  }
}

restore() {
    this.store.refresh();
}

upgrade.html

 <ion-content padding>
   <ion-row text-center>
     <ion-col>Status:  <b>{{ this.setupReady }}</b></ion-col>
   </ion-row> 

 <br>
 {{ ' Description: '}} {{ this.prod.description }}
 <br>
 {{ 'Price:' }} {{ this.prod.price }}
 <br>
 <div margin-vertical text-center>

          {{ this.prod.title }}
     <ion-button (click)='purchase()' expand="block">

        {{ ' Buy now - ' }} 
        {{ this.prod.price }}

     </ion-button>
 </div>   

   <ion-button full icon-left color="secondary" (click)="restore()">
       <ion-icon name="refresh"></ion-icon>Restore Purchases
   </ion-button>
 </ion-content>

- Kwong

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kwong · Accepted Answer

我最终解决了这个问题，因为在线的应用内购买教程中可能没有提到这些关键点。

首先，必须在应用启动时注册产品和处理程序，即在启动页面上注册，而不是在向客户展示应用内购买产品的页面上注册。

其次，只需注册产品一次，永远不要注销它们。不要尝试在另一页中再次注册产品。

这些应该解决您在应用内购买集成中遇到的许多问题。希望这可以帮助许多其他在应用内购买编码方面挣扎的人。