News

Facebook Canvas Payments in Unity3d

By 8 abril, 2020septiembre 24th, 2020No Comments

Introduction

In todays  post, we will learn how to integrate Facebook Canvas Payments in Unity3d. If you are not familiar with the concept, this is a payment system provided by Facebook, to be able to do in-app purchases inside games hosted in the Facebook Canvas.

The canvas payment API is essential to monetize your games if you upload them to Facebook. With a simple call to a method, you will prompt the user with various payment methods to be made directly on the platform (via SMS, Paypal, credit card, etc), and earn some money from your games!

Facebook Canvas Payment

Like the other posts in these series, for this to work you will need to have access to a server to upload some files with the correct metadata.

Server side

The first thing we need to do, is create a new .html file to put all the metadata needed for Facebook to read all your payment information. Open up your favorite text editor, and copy the following:

<!DOCTYPE html>
<html>
<head prefix=
“og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
product: http://ogp.me/ns/product#”>
<meta property=”og:type” content=”og:product” />
<meta property=”og:title” content=”Coin” />
<meta property=”og:plural_title” content=”Coins” />
<meta property=”og:image” content=”https://www.yourserver.com/images/coins.png” />
<meta property=”og:description” content=”Get Coins, and buy lots of cool items!” />
<meta property=”og:url” content=”https://www.yourserver.com/opengraph/coins.html” />
<meta property=”product:price:amount” content=”0.99″/>
<meta property=”product:price:currency” content=”USD”/>
</head>

</html>
view raw gistfile1.txt hosted with ? by GitHub

Now, lets fill in the corresponding values for the properties:

? type – Leave it as is. This will be the identifier of the type of Object you are creating.
? title – The title to display if only one item is bought.
? plural_title – The title to display if more than one item is bought.
? image – The URL to the image that you want to display.
? description – A short description of the product.
? url – This should be the URL of where you will upload THIS file (points to itself).
? product:price:amount – The price for the item you wish to sell
? product:price:currency – The currency in which you wish to sell the item

Save up the file, upload it to your server, and copy the final URL of the .html file (Should be the same you put in the URL property above).

Unity integration

Now, inside Unity, you need to tell the browser that you wish to purchase the item you just uploaded. I will tell this again, this only works for games uploaded in the Facebook Canvas. It won’t work on your own website, Android, iOS, etc.

Create a simple C# script, and copy the following:

public class FacebookPay : MonoBehaviour{

public string ProductURL;

public int Quantity;

void OnMouseDown()
{
#if !UNITY_EDITOR
FB.Canvas.Pay(product: ProductURL,
action: “purchaseitem”,
quantity: 1,
callback: PayCallback);
#else
MockResponse();
#endif
}

void MockResponse()
{
Invoke(“GiveItem”,1.5f);
}

void PayCallback(FBResult result)
{
if (result != null)
{
var response = Json.Deserialize(result.Text) as Dictionary<string, object>;
if(Convert.ToString(response[“status”]) == “completed”)
{
GiveItem();
}
else
{
// Payment Failed
}
}
}

void GiveItem()
{
// Implement your give item here
}

}

view raw gistfile1.txt hosted with ? by GitHub

If you take a look at the script, you can see that it’s really simple to tie it up with your own code to give the item to the user, or handle an error in case one arises. Also, this simple script has a mock functionality, so if you want to test the payments in the editor (not the actual payment, but the functionality after it is successfully bought), you can do it seamlessly.

And that’s it! Just throw this script into your button, put the URL to the file you uploaded to the server, the amount of items you wish to buy, and you already have setup the Canvas Payment system inside your game!

Make sure to subscribe to the blog, and leave us a comment if you have any doubts, questions or future topics to these series of post about how to integrate Facebook & Unity.

Also, if you haven’t checked out our other posts on how to integrate the Facebook SDK into your games, be sure to check out the following posts: