FB api 之 js FB.ui pay dialog 支付接口

FB.ui Overview

FB.ui is a generic helper method for triggering Dialogs which allow the user to take some action.

These dialogs include:

The Feed Dialog allows a user to post a story to their Timeline and to their friends' News Feeds
The OAuth Dialog allows a user to authorize an application as part of an authentication flow.
The Add Page Tab Dialog allows a user to add an application to a Facebook Page which they administer.
The Friends Dialog allows a user to send a friend request to another user.
The Pay Dialog allows a user to make a purchase using Facebook Credits.
The Requests Dialog allows a user to send a request to one or more of their friends
The Send Dialog allows a user to send a Facebook Message to one or more of their friends.

网页中中调出fb的支付页面，一般都是使用官方的 js SDK 操作。

简单的调用方法如下：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>Facebook Credits Demo</title>
  </head>
  <body>
    <h2>Buy something...</h2>
    <button onclick="buy()">Buy</button>
    <div id="fb-ui-return-data"></div>
    <div id="fb-root"></div>

    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script> 
　　　 // 这里初始化FB 的 SDK
      FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});　　

      // The dialog only opens if you've implemented the
      // Credits Callback payments_get_items.
      function buy() {
        var obj = {
          method: 'pay', 
          action: 'buy_item',
          // You can pass any string, but your payments_get_items must
          // be able to process and respond to this data.
          order_info: {'item_id': '1a'},  // 这里是支付信息,这里的信息在支付中心与FB的支付协议中有
          dev_purchase_params: {'oscif': true}
        };
　　　　　
　　　　 // 调用 支付页面
        FB.ui(obj, js_callback);
      }

　　　 // 反馈函数，作为调试用很好
      // This JavaScript callback handles FB.ui's return data and differs
      // from the Credits Callbacks.
      var js_callback = function(data) {
        if (data['order_id']) {
          // Facebook only returns an order_id if you've implemented
          // the Credits Callback payments_status_update and settled
          // the user's placed order.

          // Notify the user that the purchased item has been delivered
          // without a complete reload of the game.
          write_callback_data(
                    "<br><b>Transaction Completed!</b> </br></br>"
                    + "Data returned from Facebook: </br>"
                    + "Order ID: " + data['order_id'] + "</br>"
                    + "Status: " + data['status']);
        } else if (data['error_code']) {
          // Appropriately alert the user.
          write_callback_data(
                    "<br><b>Transaction Failed!</b> </br></br>"
                    + "Error message returned from Facebook:</br>"
                    + data['error_code'] + " - "
                    + data['error_message']);
        } else {
          // Appropriately alert the user.
          write_callback_data("<br><b>Transaction failed!</b>");
        }
      };

      function write_callback_data(str) {
        document.getElementById('fb-ui-return-data').innerHTML=str;
      }
    </script>
  </body>
</html>

下面这个是对应的url请求，

https://www.facebook.com/dialog/pay?app_id=YOUR_APP_ID&
                                    redirect_uri=YOUR_REDIRECT_URI&
                                    action=buy_item&
                                    order_info={"item_id":"1a"}&
                                    dev_purchase_params={"oscif":true}

// 这个url字符串写好后， 用urlencode() 编码一下

Properties

`method`	The value `pay`. If using a direct URL, this property and value are not required because the `pay`value is retrieved from the HTTP GET request to the `/dialog/pay` endpoint.
`app_id`	The developer's app id. If using the JavaScript SDK, this property and value are provided when initing the JavaScript SDK.
`redirect_uri`	After the user interacts with the Pay Dialog, redirect the browser to this URI. If using theJavaScript SDK, the value is supplied by the JavaScript SDK.
`action`	One of the values `buy_item`, `buy_credits`, `earn_credits`, `earn_currency`.
`order_info`	Developer provided data containing order information and is passed from the user's client to the developer's server via Facebook's `payments_get_items` request. Note not all usagesresult in Facebook issuing `payments_get_items` requests. If using the JavaScript SDK, the data format is a JavaScript object. If using a direct URL, the data format is a JSON string.
`dev_purchase_params`	Configures whether the Pay Dialog displays prices in local currency (e.g. USD). If `{'oscif': true}` is provided using the JavaScript SDK or `{"oscif": true}` is provided is provided using a direct URL, the Pay Dialog displays prices in local currency. If using the JavaScript SDK, the data format is a JavaScript object. If using a direct URL, the data format is a JSON string. You can also set a `shortcut` parameter here to shortcut directly to a payment flow. Acceptable values - `{shortcut: mobile}`. Learn more in mobile shortcut docs.
`product`	A url to an app currency object instance used for `earn_currency` orders.

Return Data

After a developer settled order, the following data is returned.

`order_id`	A Facebook order id.
`status`	The value `settled`.

After an error, the following data is returned.

`error_code`	An error code identifying the error.
`error_message`	An error message describing the error.