Getting Started With Facebook Credits API
November 22, 2011

This guide walks you through in getting the Facebook Credits Sample running in test mode.

1. Download the official sample code from: https://github.com/facebook/credits-api-sample

2. Read the overview.

3. Copy the files into your server into a subfolder (your server must support PHP):
– callback.php
– index.php
– xdreceiver.html

4. Create a test application. Fill out the fields marked green. For the Canvas URL, Enter the URL where you copied the files into in Step 3. The Secure Canvas URL is optional and you can leave it blank if you don’t have a secure site. Facebook now requires all Apps On Facebook (ie: Canvas app) to support https:// so it’s a good idea to have it eventually.

5. Enter the Credits tab shown below, then enter the fields marked green.

The Credits Callback URL should be where you copied the files into in step 3.
Ie: http://www.example.com/fb-credit-example/callback.php

For testing the app, you should add a Credit Testers, and make sure to use that account for testing. See here if you need help finding your Numeric Facebook ID.

6. Open index.php and edit the $APP_ID — set it to your App Id (see the screen on Step 4).
There’s missing quotes in this file (at least in the version that I downloaded), in this line:

    FB.init({appId: <?php echo APP_ID; ?>, status: true, cookie: true});

You should change that line to below (note the newly added quote signs around the appId.

    FB.init({appId: '<?php echo APP_ID; ?>', status: true, cookie: true});

7. Edit callback.php.
Find the line that says

$app_secret = '<app_secret>';

Put your App Secret (this is found in your Application’s Settings tab shown in the screen on Step 4). I.e.:

$app_secret = 'abcdefabcdef12312312346112511135';

8. Test your app by opening it from the Canvas Page (this is found on the screen on Step 4).
Make sure to login as Credit Tester you specified in Step 3 when you are testing. The result should be something like this:

If you encounter errors such as this, make sure you have entered all the information in Step 4 and 5 correctly and that all the green-marked fields are not empty.

Clicking the Pay With Facebook button will pop up a dialog like this:

Why doesn’t this match the page? For some reasons, index.php refers to a Locket but if you look at the callback.php, you’ll see that the code checks for $item_info==”abc123″. I’m guessing this is to encourage you to always check the validity of the item by some means. The sample’s README says this:
“For purposes of clarity and ease, this example passes critical parameters such as a price in the transaction directly. In order to prevent users from manipulating these fields through Firebug, you should only pass an internal key that points to a products table in your database that stores information such as price and product type. For example, if you pass “332” your callback.php script would perform a lookup of that value to return the proper item information.”

    // remove escape characters
    $order_info = stripcslashes($payload['order_info']);
    $item_info = json_decode($order_info, true);
    if ($item_info == "abc123") {

      // Per the credits api documentation, you should pass in an item
      // reference and then query your internal DB for the proper
      // information. Then set the item information here to be
      // returned to facebook then shown to the user for confirmation.
      $item['title'] = 'BFF Locket';
      $item['price'] = 1;
      $item['description'] = 'This is a BFF Locket...';
      $item['image_url'] = 'http://www.facebook.com/images/gifts/21.png';
      $item['product_url'] = 'http://www.facebook.com/images/gifts/21.png';
    } else {

      // For the sake of the sample, we will default to this item if
      // the `order_info` reference passed from your JS call is not matched
      // above.
      $item['title'] = 'A Facebook Hat';
      $item['price'] = 1;
      $item['description'] = 'The coolest hat you've ever seen.';
      $item['image_url'] = 'http://www.facebook.com/images/gifts/740.png';
      $item['product_url'] = 'http://www.facebook.com/images/gifts/740.png';

Clicking Buy A Facebook Hat returns something like this:

Links to read:

API Documentation

A How To Walktrhough

Information on Customizing the Pay Dialog

The version of the sample code that I use: https://www.permadi.com/tutorial/fb-credits-api-example/facebook-credits-api-sample-a3d9791.zip. This is for debugging purpose only, you should always get their latest from https://github.com/facebook/credits-api-sample