All Collections
Using the Portal
Facebook IAP integration
Facebook IAP integration

Integrate Facebook purchases to brainCloud

Jason Liang avatar
Written by Jason Liang
Updated over a week ago

This article elaborates on the basic steps of how to integrate Facebook IAP into brainCloud with a Unity WebGL example.

Prerequisites

Step 1: Set up web payments

  • Go to the Facebook developer console, open the dashboard of your app which has been implementing Facebook authentication with brainCloud.

  • Click the product + icon from the left panel of your app dashboard.

  • Select the Web Payments product by clicking the Set Up button on the widget.

  • Click the [Create/Select Company] button and follow the instructions to configure a company payment account associate with this app.

  • Add Testers to this app and fill in the Dynamic Pricing Callback URL field with brainCloud Facebook credit service endpoint URL. (e.g. https://sharedprod.braincloudservers.com/fbcreditservice?app_id=2731168760532542, replace the app_id with your Facebook app id)

  • Enable Payment Object and Payment Subscriptions Object, and fill in the Callback URL with brainCloud Facebook update service endpoint URL. (e.g. https://sharedprod.braincloudservers.com/fbupdateservice?gameId=13229, replace the gameId with your brainCloud app id).

  • Fill in the Verification Token field with any string you like, and copy down this string and paste it to brainCloud portal Facebook configurations.

  • Click [Test Callback URL], you should get this pop-up if the configs are all correct.

  • Click Save Changes. Notice the Webhooks product was added to your app since Web Payments will use it for connecting app product payments.

Step 2: Create an application on Unity

  • Open Unity hub and create a new project, implement Facebook authentication with brainCloud in your app. (check out here in case you want to know how)

  • Create a button to retrieve Facebook Products from brainCloud and a button to trigger Facebook Purchase flow. See the example UI elements below.

  • Note, you will need the Facebook product URLs (e.g. fbUrl : "https://sharedprod.braincloudservers.com/fbproductservice?gameId=13229&itemId=barBundle1Imp&priceId=3" )as a parameter to pass into the Facebook purchase call, you can get it by calling brainCloud API _bc.AppStoreService.GetSalesInventory().

     public void GetProduct()

    {    
        string storeId = "facebook"; 
        string userCurrency = "{\"userCurrency\":\"CAD\"}";


        _bc.AppStoreService.GetSalesInventory(platform: storeId, userCurrency, success: peercSuccess_BCcall, failure: peercError_BCcall);
    }

  • The selected product for this example is configured in the brainCloud portal like the image below, its price is CAD $7.99.

  • Functions and its code that linked behind the button [Buy Product] are similar to below. Once Facebook Pay is successfully executed, from the PayCallback function, retrieve "signed_request" and pass it to brainCloud verify purchase method -- VerifyPurchase.

    public void BuyProduct() 
    {

        FB.Canvas.Pay(product: this.productURL, quantity: 2, callback: PayCallback); 
    }
 
    private void PayCallback(IPayResult response) 
    {

        //Debug.Log(response.RawResult);

        //using dictonary instead

        Debug.Log(response.ResultDictionary);

        string responseS = JsonWriter.Serialize(response.ResultDictionary);

        Dictionary<string, object> responseJ = (Dictionary<string, object>)JsonReader.Deserialize(responseS);

        string signedRequest = responseJ["signed_request"].ToString();

        bcreturn.GetComponent<Text>().text = "success \n " + responseJ["signed_request"].ToString();

        //test verify (gtting signed_request from parse) 
        string storeid = "facebook";

        string receiptdata = "{\"signedRequest\":\""+ signedRequest +"\"}";

        _bc.AppStoreService.VerifyPurchase(storeid, receiptdata, peercSuccess_BCcall, peercError_BCcall);

    }

  • Finish the rest necessary code in your script and save it.

  • Test Buy Product button in Unity editor, you should get a Mock dialog response like below:

  • Go ahead to open the build settings window and add scenes to the build window, switch the platform to WebGL, and hit build.

  • Deploy your app to your SSL certificate configured localhost to test. Note: The app object must be served over HTTPS. If you did not add an SSL certificate to your localhost yet, it is time to do now.

Step 3: Test your WebGL app on localhost

  • Make sure you add your WebGL build folder to your local virtual host or move your entire build files to the default localhost folder.

. 
├── Build # Generated floder/files. 
├──UnityLoder.js
├──...
├── TemplateData # Generated floder/files. 
├──favicon.ico
├──...
├── index.html # Generated entry file.

  • Boost up your app on your browser via local web server software, such as Nginx or Apache. After authenticating Facebook end-user by clicking the [Facebook Login&bc Auth] button from your app, then click the [Get Product] button to populate one product URL to your product variable. Then click the [Buy Product] button. You will get a product purchase screen popped up.

(Note: If the Facebook logged in user is not a tester, the user's real payment method will be displayed on the upper left payments drop-down.)

(Addition: If the Facebook logged-in user is not a tester and the payment methods are not set up, the Add Payment Method page will be popped up.)

  • Go ahead to click the Buy button on the screen, the verified purchase response will be returned to your app UI.

  • You are successfully made a Facebook purchase and integrated it with brainCloud!

  • Go back to brainCloud portal open your app, advance to the User Summary page and select the newly authenticated Facebook user, then go to the Transactions page, you will find the purchase transaction was recorded and listed here.

  • You can view the transaction details by selecting the View transaction option from the corresponding Actions drop-down button.

  • You should get the details of this transaction.

{
    "id": "2138313146299367",
    "user": {
        "name": "Tester Tester",
        "id": "111234914143270"
    },
    "application": {
        "category": "Games",
        "link": "https://unitywebgl-2.local/",
        "name": "felse",
        "id": "2731168760532542"
    },
    "actions": [
        {
            "type": "charge",
            "status": "completed",
            "currency": "CAD",
            "amount": "15.98",
            "time_created": "2020-11-30T20:26:54+0000",
            "time_updated": "2020-11-30T20:26:56+0000",
            "tax_amount": "0.00"
        }
    ],
    "refundable_amount": {
        "currency": "CAD",
        "amount": "15.98"
    },
    "items": [
        {
            "type": "IN_APP_PURCHASE",
            "product": "https://sharedprod.braincloudservers.com/fbproductservice?gameId=13229&itemId=barBundle1Imp&priceId=3",
            "quantity": 2
        }
    ],
    "country": "CA",
    "created_time": "2020-11-30T20:26:54+0000",
    "test": 1,
    "payout_foreign_exchange_rate": 0.763798815,
    "itemId": "barBundle1Imp",
    "referencePrice": 799
}

  • Open the tester user Facebook account, see the purchase notifications are displayed there.

Did this answer your question?