Make your first plugin - Facebook Payments

4

Index

Tagged

Stats

10,031 visits, 23,916 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 17 Aug, 2015. Last updated 19 Feb, 2019

RUNTIME.JS

Open the runtime.js file. This is the file where the magic happens.

Lines 11 and 21 both have a listed item called MyPlugin, this is the plugin ID from our edittime file. Change both of those to FB_Pay or you will generate an error.

Line 31-33 should look like this

    var typeProto = pluginProto.Type.prototype;

// called on startup for each object type

Change it to the following then I'll explain why.

        var typeProto = pluginProto.Type.prototype;
                var fbRuntime = null;
        	var fbInst = null;
        	var Payment_ID = "";
        	var  Payment_Amount = "";
        	var  Payment_Currency = "";
        	var  Payment_Quantity = "";
        	var  Payment_RID = "";
        	var  Payment_Status = "";
        	var Error_Code = "";
                var  Error_Message = "";
                var   Error_Type = "";
        	// called on startup for each object type

What we just did was create a place to store all the data we will be using in our plugin.

Now see where it says:

        instanceProto.onCreate = function()
        	{
                
                }

change that to 

        instanceProto.onCreate = function()
        	{
        		fbRuntime = this.runtime;
        	         fbInst = this;
        	};

I'm going to try and write this for new programmers, so seasoned people can probably giggle or glance over this part quickly. :) The quickest way to describe this is would be

this = contains all of the data used by our plugin.

this.runtime = contains a more defined section of this.

Just know that these two variables will be used when calling our two trigger conditions. If you really want to see what this is, add a line in there between the { and }; that says the following console.log(this); and console.log(this.runtime); When you run the app later on, check out the browsers console(usually found in developer tools). You can see everything contained in this and this.runtime.

Moving on find:

    function Cnds() {};
    
    	// the example condition
    	Cnds.prototype.MyCondition = function (myparam)
    	{
    		// return true if number is positive
    		return myparam >= 0;
    	};
    	
    	// ... other conditions here ...
    	
    	pluginProto.cnds = new Cnds();

This is where our conditions are actually coded. Let's replace it with the following:

    function Cnds() {};
    
    	// the example condition
    	Cnds.prototype.Onpurchsuccess = function (){return true;};
    	Cnds.prototype.Onpurchfail = function (){return true;};
    	
    	
    	// ... other conditions here ...
    	
    	pluginProto.cnds = new Cnds();

This creates the code for our conditions from the edittime file. Because it's only a trigger event for each, the only thing that the condition could return is true. Other conditions might require different code between the { and }; Either way I believe it must always return something.

Moving on find the following:

    Acts.prototype.MyAction = function (myparam)
    	{
    		// alert the message
    		alert(myparam);
    	};
    	
    	// ... other actions here ...
    	
    	pluginProto.acts = new Acts();

Let's replace it with the following. It's lengthy so scroll through it until you see me writing sentences again. Make sure to skim through it to kind of get a n understanding. I'll explain better after.

    function Acts() {};
    
    	// the example action
    	Acts.prototype.Paydialog = function (quan,qmin,qmax,rid,pid,tc,purl)
    	{
    	 var d = new Date();
             var n = d.getTime();
    	 if (rid == "") {rid = n;}
    	 FB.ui(
             {
              "method": 'pay',
    	  "action": 'purchaseitem',
                "product": purl,
    	    "quantity": quan,
    	    "quantity_min": qmin,
    	    "quantity_max": qmax,
    	    "request_id": rid,
    	    "pricepoint_id": pid,
    	    "test_currency": tc
             },
             function(response) {
             if (response && !response["error_code"])
    	 {
    	  Payment_ID = response["payment_id"];
    	  Payment_Amount = response["amount"];
    	  Payment_Currency = response["currency"];
    	  Payment_Quantity = response["quantity"];
    	  Payment_RID = response["request_id"];
    	  Payment_Status = response["status"];
              fbRuntime.trigger(cr.plugins_.FB_Pay.prototype.cnds.Onpurchsuccess, fbInst);
             } else
    	 {
              Error_Code = "Actions";
              Error_Message = "Paydialog has failed or been cancelled.";
              Error_Type = "Paydialog";
    	  fbRuntime.trigger(cr.plugins_.FB_Pay.prototype.cnds.Onpurchfail, fbInst);
    	  console.log("ACTS -- (Paydialog) Error using Pay Dialog");		
             }
             });
    	};
    	
    	// ... other actions here ...
    	
    	pluginProto.acts = new Acts();

Ok so here is the code for our payment dialog action. See where the action starts, next to it says function followed by (quan,qmin,qmax,rid,pid,tc,purl). Well those are our paramaters from the edittime file. quan being the left most is parameter 0 from our edittime file while purl was position 6 from our edittime(remember all those descriptions, they reference these)

Ok see the following

    var d = new Date();
             var n = d.getTime();
    	 if (rid == "") {rid = n;}

That means if rid(the unique identifier parameter from edittime) isn't filled in the we will generate a unique id based on the date and time of the action. Makes it a bit more user friendly.

Ok see the following

    FB.ui(
             {
              "method": 'pay',
    	  "action": 'purchaseitem',
                "product": purl,
    	    "quantity": quan,
    	    "quantity_min": qmin,
    	    "quantity_max": qmax,
    	    "request_id": rid,
    	    "pricepoint_id": pid,
    	    "test_currency": tc
             },

This sends a message to Facebook that they should open up a payment dialog using the information from our parameters in the edittime. For more information refer to Facebook Pay Dialog

Ok see the following

        function(response) {
                 if (response && !response["error_code"])
        	 {
        	  Payment_ID = response["payment_id"];
        	  Payment_Amount = response["amount"];
        	  Payment_Currency = response["currency"];
        	  Payment_Quantity = response["quantity"];
        	  Payment_RID = response["request_id"];
        	  Payment_Status = response["status"];
                  fbRuntime.trigger(cr.plugins_.FB_Pay.prototype.cnds.Onpurchsuccess, fbInst);
                 }

This means that if we get a response from Facebook and it doesn't contain an error we should fill our storage space with all of the information Facebook gave us. The .trigger line means that as soon as our information is save the on success condition we created above will be triggered. Failure to add this line will keep the condition from ever happening.

Ok see the following:

    else
    	     {
                  Error_Code = "Actions";
                  Error_Message = "Paydialog has failed or been cancelled.";
                  Error_Type = "Paydialog";
        	  fbRuntime.trigger(cr.plugins_.FB_Pay.prototype.cnds.Onpurchfail, fbInst);
        	  console.log("ACTS -- (Paydialog) Error using Pay Dialog");		
                 }

This just means if an error occurs that we should fill the error variable with some data and then trigger the on error handler. Notice both triggers contain the Plugin ID from our edittime. If you changed the editime ID then you will need to change these as well.

Finally find the following:

    function Exps() {};
    	
    	// the example expression
    	Exps.prototype.MyExpression = function (ret)	// 'ret' must always be the first parameter - always return the expression's result through it!
    	{
    		ret.set_int(1337);				// return our value
    		// ret.set_float(0.5);			// for returning floats
    		// ret.set_string("Hello");		// for ef_return_string
    		// ret.set_any("woo");			// for ef_return_any, accepts either a number or string
    	};
    	
    	// ... other expressions here ...
    	
    	pluginProto.exps = new Exps();

Replace it with:

    function Exps() {};
        	
        	// the example expression
        	Exps.prototype.PaymentSuccessID = function (ret)
        	{ret.set_string(Payment_ID);};
        	Exps.prototype.PaymentSuccessAmount = function (ret)
        	{ret.set_string(Payment_Amount);};
        	Exps.prototype.PaymentSuccessCurrency = function (ret)
        	{ret.set_string(Payment_Currency);};
        	Exps.prototype.PaymentSuccessQuantity = function (ret)
        	{ret.set_string(Payment_Quantity);};
        	Exps.prototype.PaymentSuccessRequestID = function (ret)
        	{ret.set_string(Payment_RID);};
        	Exps.prototype.PaymentSuccessStatus = function (ret)
        	{ret.set_string(Payment_Status);};
        	Exps.prototype.APIErrorCode = function (ret){ret.set_string(Error_Code);};
        	Exps.prototype.APIErrorMessage = function (ret){ret.set_string(Error_Type);};
        	Exps.prototype.APIErrorType = function (ret){ret.set_string(Error_Message);};
        	// ... other expressions here ...
        	
        	pluginProto.exps = new Exps();

This just fills our expressions with the information we received from the pay dialog. The set_string is not the only type of expression. In fact it must match the type from the edittime file. Your choices include

    ret.set_int(1337);				// return an non point integer.
        		// ret.set_float(0.5);			// for returning a decimal place integer
        		// ret.set_string("Hello");		// for ef_return_string of text
        		// ret.set_any("woo");			// for ef_return_any, accepts either a number or string.

  • 0 Comments

Want to leave a comment? Login or Register an account!