Payments Lite (serverless): first purchase works, but the second always fails – Facebook api

I am answering my own question to share the complete source code needed to sell consumable virtual goods via Facebook Payments Lite, based on Alexey Mukhin's helpful reply -

JavaScript code in your Facebook Canvas app (assign to a button-ONCLICK):

function buyItemLite() { 
        var payDialog = {
                method: "pay",
                action: "purchaseiap",
                product_id: "test1"
        };

        FB.ui(payDialog, function(payResponse) {
                FB.getLoginStatus(function(loginResponse) {
                        if (loginResponse.status === "connected") {
                                $.post("/payment-lite.php", {
                                        signed_request: payResponse.signed_request,
                                        access_token: loginResponse.authResponse.accessToken 
                                })
                                .done(function(consumeResponse) {
                                        location.reload();
                                });
                        }
                });
        });
}

PHP code in the payment-lite.php script hosted at your web server:

const APP_ID              = 'replace by your app id';
const APP_SECRET          = 'replace by your app secret';
const SIGNED_REQUEST      = 'signed_request';
const STATUS              = 'status';
const COMPLETED           = 'completed';
const PRODUCT_ID          = 'product_id';
const PURCHASE_TOKEN      = 'purchase_token';
const ACCESS_TOKEN        = 'access_token';
const CONSUME_URL         = 'https://graph.facebook.com/%d/consume';

$request = parse_signed_request($_REQUEST[SIGNED_REQUEST], APP_SECRET);
error_log('pay dialog request: ' . print_r($request, TRUE));

if ($request[STATUS] === COMPLETED && $request[PRODUCT_ID] === 'test1') {
        # perform POST request to consume the purchase_token
        $url = sprintf(CONSUME_URL, $request[PURCHASE_TOKEN]);
        $fields = array(ACCESS_TOKEN => $_REQUEST[ACCESS_TOKEN]);
        $client = curl_init($url);
        curl_setopt($client, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($client, CURLOPT_POSTFIELDS, $fields);
        $response = curl_exec($client);
        curl_close($client);
        error_log('consume response: ' . print_r($response, TRUE));
        # TODO give the player the newly purchased consumable "test1" product
}

function parse_signed_request($signed_request, $secret) {
        list($encoded_sig, $payload) = explode('.', $signed_request, 2);
        $sig = base64_url_decode($encoded_sig);
        $data = json_decode(base64_url_decode($payload), TRUE);
        if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
                error_log('Unknown algorithm. Expected HMAC-SHA256');
                return NULL;
        }

        $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = TRUE);
        if ($sig !== $expected_sig) { // or better use hash_equals
                error_log('Bad Signed JSON signature!');
                return NULL;
        }
        return $data;
}

function base64_url_decode($input) {
        return base64_decode(strtr($input, '-_', '+/'));
}

NOTE: If you happen to have a recent PHP version, then better use hash_equals in the above code, to mitigate timing attacks.

Do not forget to enable Payments Lite in the Facebook Dashboard of your app and also add a "test1" product there:

If you follow the above instructions you will be able to purchase the "test1" item multiple times and the output you will get in the PHP logs will look like:

pay dialog request: Array
(
    [algorithm] => HMAC-SHA256
    [amount] => 0.01
    [app_id] => 376218039240910
    [currency] => EUR
    [issued_at] => 1501674845
    [payment_id] => 1041009052696057
    [product_id] => test1
    [purchase_time] => 1501674843
    [purchase_token] => 499658830375336
    [quantity] => 1
    [status] => completed
)

consume response: {"success":true}

Finally, I will share below my webhook code for non-lite Facebook Payments, because that is what I actually have ended up using (it handles chargebacks and does not need to mark items consumable after purchases) -

JavaScript code in your Facebook Canvas app (assign to a button-ONCLICK):

function buyItemFull() { 
        var payDialog = {
                method:  "pay",
                action:  "purchaseitem",
                product: "https://myserver/test1.html"
        };

        FB.ui(payDialog, function(data) {
                location.reload();
        });
}

PHP code in the payment-full.php script hosted at your web server:

const APP_ID              = 'replace by your app id';
const APP_SECRET          = 'replace by your app secret';

const HUB_MODE            = 'hub_mode';
const HUB_CHALLENGE       = 'hub_challenge';
const HUB_VERIFY_TOKEN    = 'hub_verify_token';
const SUBSCRIBE           = 'subscribe';

const ENTRY               = 'entry';
const CHANGED_FIELDS      = 'changed_fields';
const ID                  = 'id';
const USER                = 'user';
const ACTIONS             = 'actions';
const ITEMS               = 'items';
const PRODUCT             = 'product';
const AMOUNT              = 'amount';

# payment status can be initiated, failed, completed
const STATUS              = 'status';
const COMPLETED           = 'completed';

# possible payment event types are listed below
const TYPE                = 'type';
const CHARGE              = 'charge';
const CHARGEBACK_REVERSAL = 'chargeback_reversal';
const REFUND              = 'refund';
const CHARGEBACK          = 'chargeback';
const DECLINE             = 'decline';

const GRAPH               = 'https://graph.facebook.com/v2.10/%d?access_token=%s|%s&fields=user,actions,items';
const TEST1               = 'https://myserver/test1.html';

# called by Facebook Dashboard when "Test Callback URL" button is pressed
if (isset($_GET[HUB_MODE]) && $_GET[HUB_MODE] === SUBSCRIBE) {
        print($_GET[HUB_CHALLENGE]);
        exit(0);
}

# called when there is an update on a payment (NOTE: better use hash_equals)
$body = file_get_contents('php://input');
if ('sha1=' . hash_hmac('sha1', $body, APP_SECRET) != $_SERVER['HTTP_X_HUB_SIGNATURE']) {
        error_log('payment sig=' . $_SERVER['HTTP_X_HUB_SIGNATURE'] . ' does not match body=' . $body);
        exit(1);
}

# find the updated payment id and what has changed: actions or disputes
$update         = json_decode($body, TRUE);
error_log('payment update=' . print_r($update, TRUE));
$entry          = array_shift($update[ENTRY]);
$payment_id     = $entry[ID];
$changed_fields = $entry[CHANGED_FIELDS];

if (!in_array(ACTIONS, $changed_fields)) {
        error_log('payment actions has not changed');
        exit(0);
}

# fetch the updated payment details: user, actions, items
$graph   = sprintf(GRAPH, $payment_id, APP_ID, APP_SECRET);
$payment = json_decode(file_get_contents($graph), TRUE);
error_log('payment details=' . print_r($payment, TRUE));

# find the user id who has paid
$uid     = $payment[USER][ID];

# find the last action and its status and type
$actions = $payment[ACTIONS];
$action  = array_pop($actions);
$status  = $action[STATUS];
$type    = $action[TYPE];
$price   = $action[AMOUNT];

# find which product was purchased
$items   = $payment[ITEMS];
$item    = array_pop($items);
$product = $item[PRODUCT];
error_log("payment uid=$uid status=$status type=$type product=$product price=$price");

if ($status != COMPLETED) {
        error_log('payment status is not completed');
        exit(0);
}

# money has been received, update the player record in the database
if ($type === CHARGE || $type === CHARGEBACK_REVERSAL) {
        if ($product === TEST1) {
                # TODO give the player the purchased "test1" product
        }
} else if ($type === REFUND || $type === CHARGEBACK || $type === DECLINE) {
        # TODO take away from the player the "test1" product
}

Do not forget to disable Payments Lite in the Facebook Dashboard of your app and also add the "payment-full.php" webhook there:

Finally add the "test1.html" product file at your web server:

<!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="Test1" />
    <meta property="og:image"               content="https://myserver/icon-50x50.png" />
    <meta property="og:description"         content="Test1" />
    <meta property="og:url"                 content="https://myserver/test1.html" />
    <meta property="product:price:amount"   content="0.01"/>
    <meta property="product:price:currency" content="EUR"/>
  </head>
</html>

There are currently not many Facebook Payment examples to be discovered on the web.

So upvote the question and the answer, if you have found my source code (public domain license) useful, to help other developers to discover it.