Google In-app purchases Integration for Cocos2d-JS 3.x on Android using plugin-x

Google In-app purchases Integration for Cocos2d-JS 3.x on Android using plugin-x

I will take you through all the steps for that are required to add the plugin in your cocos2d-js project, considering that you have all development environment setup ready which I wont go in much detail in this tutorial 

Note: 

- Using cocos2d-js 3.2 which is just released.

Step 1. Before you proceed , setup the In-app purchases in your google developers account we will need  License Base64-encoded RSA public key for the application which you can find under Services & API section inside your application on google play developer console and also get SKU codes for your Inapp purchases (Note: for that you have to upload the apk in alpha./beta and publish, it takes several hours to update)

Step 2. Now after finishing all android related stuff , now its time to add plugin in your cocos2d-js project for that first thing you will do is Add Plugin-x libraries in your project 

Add the following lines in your  ProjectRoot/frameworks/runtime-src/proj.android/jni/Android.mk.

LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static
$(call import-module,cocos2d-x/plugin/jsbindings)

Here's the sample of that.

LOCAL_STATIC_LIBRARIES := cocos_jsb_static

LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static

LOCAL_EXPORT_CFLAGS := -DCOCOS2D_DEBUG=2 -DCOCOS2D_JAVASCRIPT

include $(BUILD_SHARED_LIBRARY)

$(call import-module,bindings)

$(call import-module,cocos2d-x/plugin/jsbindings)

Step 3. Now in the same jni directory i.e. ProjectRoot/frameworks/runtime-src/proj.android/jni/ you will find  hellojavascript/main.cpp

• Add the import lines at the top
  #include "PluginJniHelper.h"
• Add the following code under cocos_app_init function

           JavaVM* vm;
           env->GetJavaVM(&vm);
           PluginJniHelper::setJavaVM(vm);

           your function should look like this

          void cocos_android_app_init (JNIEnv* env, jobject thiz) {
           LOGD("cocos_android_app_init");
           AppDelegate *pAppDelegate = new AppDelegate();
   JavaVM* vm;
           env->GetJavaVM(&vm);
           PluginJniHelper::setJavaVM(vm);
          }

Step 4. Now go to this directory ProjectRoot/frameworks/runtime-src/Classes/AppDelegate.cpp

•  Add the following code at the top to #include the two files

       #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)

       #include "jsb_cocos2dx_pluginx_auto.hpp"

       #include "jsb_pluginx_extension_registration.h"

       #endif

• This is very important step , see the below code which you need to add inside the function
  bool AppDelegate::applicationDidFinishLaunching() but remember to add before js_register as shown below.

    #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)

  sc->addRegisterCallback(register_all_pluginx_protocols);

  sc->addRegisterCallback(register_pluginx_js_extensions);

 #endif

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)

  sc->addRegisterCallback(JavascriptJavaBridge::_js_register);

#elif (CC_TARGET_PLATFORM == CC_PLATFORM_IOS|| CC_TARGET_PLATFORM == CC_PLATFORM_MAC)

    sc->addRegisterCallback(JavaScriptObjCBridge::_js_register);

#endif

Step 5. Add the following lines in the  ProjectRoot/frameworks/runtime-src/proj.android/build-cg.json

basically copy the protocols src and googlelPlay src to the project

"copy_resources": [
        {
            "from": "../../../src",
            "to": "src"
        },
        {
            "from": "../../../res",
            "to": "res"
        },
        {
            "from": "../../../main.js",
            "to": ""
        },
{
    "from": "../../js-bindings/cocos2d-x/plugin/jsbindings/script",
    "to": ""
},
{
    "from": "../../js-bindings/cocos2d-x/plugin/protocols/proj.android/src",
    "to": "../src"
},
{
    "from": "../../js-bindings/cocos2d-x/plugin/plugins/googleplay/proj.android/src",
    "to": "../src"
}
    ],

Step 6. Now add the following lines in the  ProjectRoot/frameworks/runtime-src/proj.android/src/org/cocos2dx/javascript/AppActivity.java

• Import at the top  (It's better to use eclipse so that you can see error if not things imported properly:
   import org.cocos2dx.plugin.PluginWrapper;
  import android.content.Intent;
• Add the following code 

              @Override

    public Cocos2dxGLSurfaceView onCreateView() {

        Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);

        // TestCpp should create stencil buffer

        glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);

PluginWrapper.init(this);

        PluginWrapper.setGLSurfaceView(glSurfaceView);

        return glSurfaceView;

    }

      And add onActivityResult ...

  @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        if(!PluginWrapper.onActivityResult(requestCode, resultCode, data))

        {

            super.onActivityResult(requestCode, resultCode, data);

        }

    }

Step 7. Now add this in your ProjectRoot/framework/runtime-src/proj.android/Androidmanifest.xml

      <uses-permission android:name="com.android.vending.BILLING" />

So if you have followed all the steps correctly we are ready to use google In-app API's ,

Step 8.  Compile using cocos command i.e. cocos compile -p android , After compiling go to Cocos Code IDE build for runtime also once. After getting build successful let's move now to how to use it in javascript

Step 9. In your app.js , or Wherver you want to use it 

var s_googleAPIKEY ={"GooglePlayAppKey":"your api key"};

var g_pIAP = null;      

if (!plugin) {                          // Check if plugin 

var plugin = {};

}

var HelloWorldLayer = cc.Layer.extend({

    sprite:null,

    IAPtext:null,

    ctor:function () {

        //////////////////////////////

        // 1. super init first

        this._super();

        

        if(plugin){

        cc.log("Pluginis not null")

        }

        var pluginManager = plugin.PluginManager.getInstance();

        if(pluginManager){

        cc.log("Plugin manager is not null");

        }

        

        g_pIAP = pluginManager.loadPlugin("IAPGooglePlay");

        if(g_pIAP===null){

        cc.log("Android g_pIAP is null");

        }

        g_pIAP.configDeveloperInfo(s_googleAPIKEY);

        g_pIAP.setListener(this);

        /////////////////////////////

        // 2. add a menu item with "X" image, which is clicked to quit the program

        //    you may modify it.

        // ask the window size

        var size = cc.winSize;

        

        

        this.IAPtext = new cc.LabelTTF("Press Test IAP...", "Arial", 15);

        // position the label on the center of the screen

        this.IAPtext.setAnchorPoint(cc.p(0.5, 0));

        this.IAPtext.x = size.width / 2;

        this.IAPtext.y = 400;

        // add the label as a child to this layer

        this.addChild(this.IAPtext, 5);

        // add a "close" icon to exit the progress. it's an autorelease object

        var testIAP = new cc.MenuItemImage(

            "res/TestIAP.png",

            "res/TestIAP.png",

            function () {

                cc.log("Menu is clicked!");

                this.IAPtext.setString("Processing...");

                var prod ={"IAPId":"com_smit_test",

                "IAPSecKey":""};

                g_pIAP.payForProduct(prod);

            }, this);

        testIAP.attr({

            x: size.width/2,

            y: 500,

            anchorX: 0.5,

            anchorY: 0

        });

        

        var closeItem = new cc.MenuItemImage(

        res.CloseNormal_png,

        res.CloseSelected_png,

        function () {

        cc.director.end();

        }, this);

        closeItem.attr({

        x: size.width/2,

        y: 300,

        anchorX: 0.5,

        anchorY: 0

        });

        var menu = new cc.Menu(testIAP,closeItem);

        menu.x = 0;

        menu.y = 0;

        this.addChild(menu, 1);

        /////////////////////////////

        // 3. add your codes below...

        // add a label shows "Hello World"

        // create and initialize a label

        var helloLabel = new cc.LabelTTF("Cocos2d-JS v3.2 Google IAP Test", "Arial", 25);

        helloLabel.setAnchorPoint(0.5, 0);

        // position the label on the center of the screen

        helloLabel.x = size.width / 2;

        helloLabel.y = 700  ;

        // add the label as a child to this layer

        this.addChild(helloLabel, 5);

      

        return true;

    },

onPayResult: function (ret, msg, productInfo) {

cc.log("onPayResult ret is " + ret);

var str = "";

if (ret == 0){//plugin.ProtocolIAP.PayResultCode.PaySuccess) {

str = "payment Success pid is " + productInfo.productId;

} else if (ret == 1){//plugin.ProtocolIAP.PayResultCode.PayFail) {

str = "payment fail";

}

cc.log("onPayResult" + str +"msg:" +JSON.stringify(msg) + "prod:"+JSON.stringify(productInfo));

this.IAPtext.setString(JSON.stringify(msg));

}

});

var HelloWorldScene = cc.Scene.extend({

    onEnter:function () {

        this._super();

        var layer = new HelloWorldLayer();

        this.addChild(layer);

    }

});

 You can find source code here : GitHub
 You can find the demo app on google store: Here


The same way you can add admob,flurry and other libraries too which are there in plugin folder but not all are updated to its latest version so you need to update them or else wait for my next week tutorial I am coming up with admob updated plugin which will have admbs interstitial support too.