Facebook Canvas Payments in Unity3d

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:

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:

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:

Facebook Open Graph Objects in Unity3d 
Integrate Facebook Achievements in Unity3d

Gaston Claret

Gaston Claret

Hard worker, truly passionate, and really efficient programmer. Problem solver by nature, and with the coding philosophy: the simpler, the better.

28 thoughts on “Facebook Canvas Payments in Unity3d

  1. get 2 errors:

    error CS0103: The name `Convert’ does not exist in the current context

    error CS0103: The name `Json’ does not exist in the current context

    any ideas?

    1. Hello Dietmar,

      You need to add some using statements to the top of your script.

      For Convert, you need to add ‘using System;’, and for Json ‘using Facebook.MiniJSON;’.

      As a heads up, you can probably right click on the line where the error is thrown, and an option with Resolve should appear, where it hints you to add the using statement required.

      Let me know if it solves your issue.

  2. hi, i got a exception dialogue from fb canvas.
    “Couldn’t Complete Purchase: We didn’t receive all the information we needed from this app to complete your purchase. You haven’t been charged for this purchase, so please try again. If you keep seeing this error, contact the app developer.”

    i did exactly what u specified above.but not working.please specify what are the other things i need to set up in game.please help me.i am a noob in fb api.

    1. Hello Nidhin…

      Please make sure in your admin panel inside Facebook Developers (https://developers.facebook.com), under ‘Canvas Payments’, that you create a new company, and that you put a callback url, and test it before proceeding.

      If you feel like this is too much work, I’ll add it to the guide.

      1. Hi,
        thanks for the earliest reply.i updated company details and callback url.then i tested .It is working fine as tester mode.I got payment details from facebook too..
        This is a receipt for your payment of ₹63.92 to Facebook for Coin.
        Payment Details
        Item: Coin
        Date: Tuesday, August 11, 2015 at 7:51pm
        Payment ID: 671202383017064
        App: testapp
        Purchased With: Dummy Method
        Total: ₹63.92 INR

        But now my problem is when i tested as normal user,i am getting another error..
        “There Was a Problem Processing Your Payment: Sorry, but we’re having trouble processing your payment. You have not been charged for this transaction. Please try again.”
        advanced thankssss ..

      2. Hello Gaston,

        I tried hooking the payment on my FB canvas app. Actually, I created a new company.
        When I wan’t to save that page it’s asking for webhooks callbak. Is it mandatory? If so please do you have an exemple setup for a webhook callback?

        Thanks in advance

  3. Hi,
    hoooray problem solved.actually that was my problem,i forgot to change the appid in unity facebook setting.not its working fine..
    thanks alot bro….

    1. Thank you for the kind words!

      As far as I know, you can’t have multiple items in one HTML page (which kind of sucks, but it’s the way open graph works).

  4. Hi Gaston,

    I got a problem:
    hi, i got a exception dialogue from fb canvas.
    “Couldn’t Complete Purchase: We didn’t receive all the information we needed from this app to complete your purchase. You haven’t been charged for this purchase, so please try again. If you keep seeing this error, contact the app developer.”

    But as you told earlier i implemented callback url and company details but still getting the same error.
    and please tell how to create a tester and how i can test using my account.

    1. Hello Nishank…

      Like you mentioned, either create a Tester (you can do so in the configuration dashboard at developers.facebook.com, by adding your facebookId to the tester list), or you can make the app live, and test it there.

      Good luck, and let me know if it works out for you

  5. Gaston,

    Is there a way to use Graph Api to check the payment history for a user or for an app? Facebook analytic does not show any information about the origin of a payment.

    Thanks !

    1. Hello Milos…

      Try the following:

      First, log into the developer dashboard at facebook, and head onto the Graph API Explorer.
      Then, select your application from the dropdown, and click on Get App Token (this way, if you make the call to the API, you are using an ADMIN token)
      And in the query, just input ‘/payment’

      This should bring up a list of payments for the app…

      I cant test this at the moment, but let me know if this works out for you, or make any progress

  6. Any chance to get this updated to reflect the changes with Facebook SDK 7.X? That would be greatly appreciated. Thanks in advance.

  7. I Have Implement this way for fb payment and it work fine but problem is it work after second pack.
    i want to say:-
    following is my packages

    1 => 10 coins —- not working
    (i got a exception dialogue from fb canvas. :- ” Couldn’t Complete Purchase: We didn’t receive all the information we needed from this app to complete your purchase. You haven’t been charged for this purchase, so please try again. If you keep seeing this error, contact the app developer”.)

    2 => 25 coins —- not working

    but after it working fine
    like.

    3 => 50 coins —- working fine
    and so on..working..
    please help me..!

    1. hi kachhad,

      first of all: you ´ve set up all products? (for each product extra file on your server!!)

      if you ´ve set up all products next step: at app settings (on your facebook developer page) there is somewhere a tab called “tools and support” (somewhere top right); open and a list of tools are shown; use “sharing debugger”; a input mask opens, put the FULL link of your product pages (one after another) and test them! do the same with your product images; after the whole process is done close your browser, reopen und clear your browser cache (unity caches files localy on your computer, for this reason its a good idea cleaning your browsers cache every time you upload a new build)
      hope this helps!

      dietmar

  8. Thank you DIETMAR for your fast response..
    I’ve set up all the things and it working. but the problem was in only first two package.
    after that third,fourth,fifth,etc working fine.
    So problem in only first two packages.

  9. Hi,

    I understand, but there must be a Void of payment Check, How should this method? Use a string parameter ID of payment with return a bool:

    private static bool VerifyPayment (string paymentID)
    {
    // Payment verification is not implemented in this sample game
    return true;
    }

    Regards,

    Jaime

  10. Hi..,
    I Have create some tester for test facebook payment.
    but when i click on buy button,
    it return this error :-
    “Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 536870912, (2) compile with ALLOW_MEMORY_GROWTH which adjusts the size at runtime but prevents some optimizations, or (3) set Module.TOTAL_MEMORY before the program runs.”

    i have set 512 memory in player setting.

    Please anybody help me.

    Regards,
    Kachhad Jagdish

  11. Hi I am trying to make a facebook multiplayer game for webgl .using unet but the thing is that browsers don’t support hosting in unity , if you can write a blog post regarding it would be very helpful.

  12. Is there a way to check the payment history for a user or for an app? Facebook analytic does not show any information about the origin of a payment.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>