[Huawei Developers] John Wo:
Introduction:

In this article, we will cover the Integration of IAP kit in Cocos Project using Official Plugin (Huawei HMS Core App Services).

Requirements:

1. Cocos Creator

Make sure to configure NDK Root and Android SDK Root in Cocos Creator under File>Settings>Select Native Develop.

2. Huawei device

3. Visual Studio Code

Follow the steps.

Step 1. Create Cocos project.

· Click on CocosDashboard, click New.

· Select empty Name and then click Create and Open.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124040.19491137066789501014792844345704:50511112015809:2800:FAC340E0D973D7D993B90D35C9E66A3208F67D5A743772B4443405C5FE453074.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124040.19491137066789501014792844345704:50511112015809:2800:FAC340E0D973D7D993B90D35C9E66A3208F67D5A743772B4443405C5FE453074.png[/IMG]

Step 2: Enable Cocos SDKHub

Choose Panel > Service in the menu bar to open the Service panel. After setting Cocos AppID, select Cocos SDKHub to enter the Cocos SDKHub service panel.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124416.80719735560836216309392413203646:50511112015809:2800:220816B35A603DA262234730043E53ABA6D7D0781A8CCE35E614056820E18AFA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124416.80719735560836216309392413203646:50511112015809:2800:220816B35A603DA262234730043E53ABA6D7D0781A8CCE35E614056820E18AFA.png[/IMG]

Click the Enable button on the upper right to activate the Cocos SDKHub service, as shown below.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124747.66105031602296661690900628170411:50511112015809:2800:E9C977005691CE9BA99E72F35C734FA0AF32B1B5BB88430A300461657C575EB0.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124747.66105031602296661690900628170411:50511112015809:2800:E9C977005691CE9BA99E72F35C734FA0AF32B1B5BB88430A300461657C575EB0.png[/IMG]

Click on IAP option to enable IAP, as shown below.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124853.14890472467403582060435695269065:50511112015809:2800:A4D87A73CC54FD60410D912CC5C55557DAB6ECC9F373B428D126A15DD6609977.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124853.14890472467403582060435695269065:50511112015809:2800:A4D87A73CC54FD60410D912CC5C55557DAB6ECC9F373B428D126A15DD6609977.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124853.62353502401444650724557796720765:50511112015809:2800:A0B0A581DE994EF44EDAFE57ED2A0BC7DAC57417D2EB4718141617D90FB73FCA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030124853.62353502401444650724557796720765:50511112015809:2800:A0B0A581DE994EF44EDAFE57ED2A0BC7DAC57417D2EB4718141617D90FB73FCA.png[/IMG]

Step 3: Create an app in Huawei AppGallery Connect.

1. Configure IAP in Huawei AGC Console and place agconnect-services.json file in game project under setting folder.

2. Choose Project settings > Manage APIs, and enable In-App Purchases.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125142.45197993915424773197085971482214:50511112015809:2800:5FE804EE992273623652C498B649497044C645342CE515B78345D09F04ADAB82.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125142.45197993915424773197085971482214:50511112015809:2800:5FE804EE992273623652C498B649497044C645342CE515B78345D09F04ADAB82.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125308.00925222764132025652748419969312:50511112015809:2800:6D4A6B3A635524863FBDDDAC929CE527B4662A5CE47ABF6B5160E9F5AE8E7CE5.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125308.00925222764132025652748419969312:50511112015809:2800:6D4A6B3A635524863FBDDDAC929CE527B4662A5CE47ABF6B5160E9F5AE8E7CE5.png[/IMG]

· Configure IAP products in AGC Console.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125341.79925345882048711914282777027079:50511112031328:2800:0E0ADA7E7CD535DAA7C5201B02275AA46872DAD5AD6072AF7379D2D5BB8C9859.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125341.79925345882048711914282777027079:50511112031328:2800:0E0ADA7E7CD535DAA7C5201B02275AA46872DAD5AD6072AF7379D2D5BB8C9859.png[/IMG]

Step 4: Open Cocos creator.

1. Right-click on the assets folder and select Scene under File and name it. This file will contain all information inside your scene.

2. Right-click on the assets folder and select JavaScript under File and name it. This file will contain functions to perform some operation.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125433.17068979705813084296829664214885:50511112031328:2800:45F2937276E8187CC6D921D615759ECD2B2A4B6DD6958C85EE912A7E496F22D7.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125433.17068979705813084296829664214885:50511112031328:2800:45F2937276E8187CC6D921D615759ECD2B2A4B6DD6958C85EE912A7E496F22D7.png[/IMG]

Step 5: Open the IapScript file and add a function to call the equivalent method of createPurchaseIntent() of java in Cocos and save the file. Use the below code.

payForProduct() {

var params = {

Product_Id: "product_id", // Product ID. Each product must have a unique ID

EXT: "Cocos Consumables Product 1", //Information stored on the merchant side, which is passed by the app when the payment API is called

};

sdkhub.getFeePlugin().feeForProduct(params);

},

Add below code inside onLoad() function. Call to the above function will give a callback to onFeeResult method that we need to define in the IapScript file.

onLoad(){

sdkhub.getFeePlugin().setListener(this.onFeeResult, this);

},

Step 6: Drag a Button from the Node Library panel to canvas and increase the Click Events to 1.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125649.94691596325801775248781392739425:50511112015809:2800:207A74A738A8FEF21EA486A59967CD9883E1495D652151F2179FFF0E5AB7FABF.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125649.94691596325801775248781392739425:50511112015809:2800:207A74A738A8FEF21EA486A59967CD9883E1495D652151F2179FFF0E5AB7FABF.png[/IMG]

Step 7: Drag the script file to the Node tree.

Step 8: Select the button and drag the script file from the Node tree to cc.Node under Properties and select function which needs to be called from the script file.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125757.83159170694334403534119945335983:50511112015809:2800:F1D58B1BF386BBC4EE1073728C76CD968B89BE4FA37FAFEDAC77E156B7697364.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030125757.83159170694334403534119945335983:50511112015809:2800:F1D58B1BF386BBC4EE1073728C76CD968B89BE4FA37FAFEDAC77E156B7697364.png[/IMG]

Step 9: Once the product is purchased, they need to be consumed after that consumable product is successfully delivered.

When sdkhub.getFeePlugin().feeForProduct(params) is called gives a callback to onFeeResult.

onFeeResult: function (code, msg) {

if (code == 30104) {

console.log("Product consumed - "+ msg) // product consumed successfully

}

var params = JSON.parse(msg);

switch (code) {

// Process the "consumeOwnedPurchase" method logic, pay succeed

case sdkhub.FeeResultCode.kFeeSucceed:

sdkhub.getFeePlugin().callFuncWithParam("consumeOwnedPurchase", params.inAppPurchaseData); // consume Owned product Purchase

break;

}

},

Step 10: Click on Build under the Project tab to generate APK file. Build project, and then click Compile. Once code compile is done, click Play to run APK on connected phone.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130003.74896744587061769804032392491439:50511112015809:2800:82C4B3B76DFFEB3D748DF0464E35EFDE933DEE49DF38E256560ED4BB01A8CF81.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130003.74896744587061769804032392491439:50511112015809:2800:82C4B3B76DFFEB3D748DF0464E35EFDE933DEE49DF38E256560ED4BB01A8CF81.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130023.10809554353435326000872047110907:50511112015809:2800:97CE94244CE5946A737A20C58CC8CB79BEDB0905126415606A54EDB1C152002B.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130023.10809554353435326000872047110907:50511112015809:2800:97CE94244CE5946A737A20C58CC8CB79BEDB0905126415606A54EDB1C152002B.png[/IMG]

Make sure to keep the same package name as kept in the Huawei AppGallery Connect project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130100.70415551173270477799968993743593:50511112015809:2800:63FC6AAABAE308FAE973D6E2AFF46E869AD5F77DE7EFA3E7F4F2A3570E8EEB5C.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130100.70415551173270477799968993743593:50511112015809:2800:63FC6AAABAE308FAE973D6E2AFF46E869AD5F77DE7EFA3E7F4F2A3570E8EEB5C.jpg[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.58426651328510635946525172007885:50511112015809:2800:FFDCD43D95C33AC1D55A5DD2E851E23EBD253E5129253FC6AC4F735E89B1F479.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.58426651328510635946525172007885:50511112015809:2800:FFDCD43D95C33AC1D55A5DD2E851E23EBD253E5129253FC6AC4F735E89B1F479.jpg[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.02538399562962234858738513583371:50511112015809:2800:506445BA94B3B5C31EEB3A46799E44E79B3EE0F66B2AD2B1E39A2D209715E002.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.02538399562962234858738513583371:50511112015809:2800:506445BA94B3B5C31EEB3A46799E44E79B3EE0F66B2AD2B1E39A2D209715E002.jpg[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.56362810123302638218926436603994:50511112015809:2800:84FAF3D03C73FF64774E2A8B0F698B5D1F0C660FF2CB77DD163B5485784AF094.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/107/656/2640091000002107656.20201030130119.56362810123302638218926436603994:50511112015809:2800:84FAF3D03C73FF64774E2A8B0F698B5D1F0C660FF2CB77DD163B5485784AF094.jpg[/IMG]

Conclusion:

In-app purchases are one of the main sources of revenue for game apps and is a very important feature that aggregates global mainstream payment methods, covering more than 178 countries and regions. In-app purchase provides a product management system (PMS) for managing the prices and languages of products in apps (including gaming apps) in multiple locations.

References:

https://docs.cocos.com/creator/manual/en/cocos-service/sdkhub-plugins/sdkhub-hms.html

https://developer.huawei.com/consumer/en/hms/huawei-iap/