Non-receipt payment flow causes most browsers to eat the Facebook Payments pop-up
The non-receipt flow for Facebook Payments, as described by the tutorial, is StartPayment->FB.ui()->PayForPurchase->ConfirmPurchase. The FB.ui() call is supposed to show a pop-up window that allows the user to confirm the purchase.
Our game triggers this flow when the user clicks a purchase button. However, because FB.ui() can be called only after StartPayment has completed, Chrome prevents the Facebook Payments dialog from ever appearing. (For a pop-up window to be shown, it must happen from inside an onClick handler.)
What is the best way to remedy this issue? I don't believe that FB.ui() can be called first, and I would prefer not to do something hacky like calling StartPayment before the user even clicks the purchase button.
Best Answer
The Facebook payment dialog is normally a rendered overlay within the game (using an iframe is the default behavior). What's the context in which you're required to have it be a separate popup window?
An iframe is no longer the default behavior, and manually specifying display: "iframe" causes an AppInvalidItemParam error. It appears that Facebook made this change to prevent clickjacking.
For reference, this is the object I'm passing into FB.ui():
{
method: "pay",
action: "purchaseitem",
product: productURL,
request_id: i_startResult.OrderId,
// Causes the callback to be called with an AppInvalidItemParam error
/* display: "iframe" */
}
That makes this difficult. It's not possible for you to call FB.ui first, as you must have the Order ID you get from StartPurchase. What you may want to do is call StartPurchase when they add things to the "cart", so that you already have the Order ID when they click the purchase button in the game.
