Using Buxter on your Website with Facebook Connect

Buxter is a payment system that can be integrated into Facebook apps. But that shouldn't stop you from using it on your regular website - outside of Facebook.

Instead, if you want to use Buxter as a payment mechanism, why not use Facebook only as an Identity provider? Facebook Connect has got you covered.

With some PHP, a little bit of FBML and the help of Buxter you will be able to build a payment integration that is truly easy.

In this article we are going to cover all necessary steps to show to get you up and running.

First of all, you need a Facebook account. Sign up on Facebook if you haven't already and run through steps 1-3 outlined in this great article on how to set up a new Facebook application with Facebook Connect. You won't need the other steps.

Then you will need a Buxter developer account. When you are developing you will need to possibility to simulate the payments in a sandbox - so the Buxter Sandbox is where you should register your Buxter integration. The registration is shown in detail in section 3 of this article.

So now we have a Facebook app and the Buxter account all set up. Up next is the actual development part.

To be able to use the Facebook Connect SDK, your website has to be able to interpret the Facebook markup. This is easily accomplished by adding the responsible Javascript interpreter scripts to your checkout html page.

<?php $fbApiKey = "Your Facebook API key here"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

 <body>

  <script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript">

</script><script type="text/javascript">FB.init("<?php echo $fbApiKey ?>");</script>
 </body>


   <fb:login-button v="2" size="xlarge" onlogin="window.location.reload(true);">Pay with Buxter</fb:login-button>
 </html>

This basically allows users to log in to facebook from a popup on your site. If you need to make adjustments, here is a good source to look for modification options.

Since we are basically designing a "Checkout" button, we can safely assume, that what ever items the user wants to purchase are known by the time he logs in to Facebook. The only additional thing we need on our side is the Facebook user id of the buying user - because this is one of the parameters of CreateTransaction.

Luckily, this is pretty easy to come by with the Facebook connect php SDK. After the login, you can resolve the id and create the transaction like so:

require_once( "BuxterPHPClient.class.php" );
require_once("facebook/php/facebook.php");

// create a facebook API client
$fbApiKey ='MY FACEBOOK API KEY';
$fbApiSecret ='MY FACEBOOK API SECRET';
$fbRestClient = new Facebook($fbApiKey,$fbApiSecret);

// resolve the facebook user id

$buyerFbUID  = $fbRestClient->get_loggedin_user();

// check if the user is already logged into facebook
if($buyerFbUID){
  // set up transaction details for buxter
  $buxterApiConfigurationID ="MY BUXTER APPLICATION ID";
  $buxterSecretKey = "MY BUXTER SECRET KEY";
  $amount      = "0.50";
  $currency    = "EUR";
  $title       = "My Title";
  $description = "My Description";

  // use a random id - normally these ids would be stored in a database
  $externalID  = time(); 
  $redirectAfterPurchaseUrl = "mydomain.com";
  
  // put the external id in the redirect URL so that the buyer can be identified,
  // when he returns from his purchase in the buxter facebook app.
  $redirectURL = "http://".$redirectAfterPurchaseUrl."/postpurchase.php?extId=".$externalID;

  try{
      // create the buxter api client for a given configuration (here developer sandbox!!)
    $client = BuxterPHPClient::createSandboxClient( $buxterApiConfigurationID, $buxterSecretKey );
    try{
      // create the buxter transaction
      $link = $client->createTransactionLink( 
            $amount, $currency, $title, $description, $buyerFbUID, $redirectURL, $externalID );
      $transactionId = $link->transactionID;
          
      // store the transaction id in a cookie for 1 hour 
      // so we can look it up after the purchase
      setcookie("transactionId",$transactionId,time() + 3600);

      // the resulting link takes the user to the confirmation page on facebook
      header("Location: ".$link->redirectURL);
    }catch(ErrorResponse $e){
      // catch Buxter API failures
      // you can use var_dump($e) to debug
      echo $e->description;
    }
  }catch(SoapFault $e){
    // catch API unrelated failures, such as network IO problems
    echo "Sorry, we are experiencing network problems at the moment.";
  }
}

Now we are able to create a transaction, and send the user to the Buxter wallet. But what happens when he comes back to the app again? We already passed the redirect url to the service. This should be a url that is used to do a post purchase check and delivery script.

$externalID = $_GET['extId'];
$transactionId = $_COOKIE['transactionId'];

  try{
     // create the buxter api client for a given configuration (here developer sandbox!!)
    $client = BuxterPHPClient::createSandboxClient( $buxterApiConfigurationID, $buxterSecretKey );
    try{
       // query the current transaction
       $transactionStatus = $client->queryTransactionStatusByTransactionID($transactionId);
    
      if($transactionStatus=="SUCCESS"){
        echo "Thank you for buying at YOUR SHOP NAME";  
        // deliver item(s) with $externalID to customer
      }else{
        $client->cancelTransactionByTransactionID($transactionId);
        echo "The payment was unsuccessful. The transaction was canceled.";
      }

    }catch(ErrorResponse $e){
      // catch Buxter API failures
      var_dump($e);
      echo $e->description;
    }
  }catch(SoapFault $e){
    // catch API unrelated failures, such as network IO problems
    echo "Sorry, we are experiencing network problems at the moment.";
  }

You can download the complete sample code here. buxter-facebook-connect.zip (72.0K)

Caveats:

Please note that currently there seems to be an issue with Firefox, when you try to set Location headers to redirect the request to Buxter, Firefox garbles the urls somehow and you are just able to see a white window with nothing in it except a text saying "Client Server". So for the time being, the workaround is to use an intermediate page that uses meta refresh or a page where the user can click the redirect link by hand. This is shown in the example code as well.

Comments

You can follow this conversation by subscribing to the comment feed for this post.

First I thought that it's unreal to understand it! But now it's ok)

Posted by: online jobs at home | Sep 19, 2011 at 04:04 PM

Is Buxter wallet a safe app? I mean how am I sure that people won't easily hack this, with Buxter being an API to begin with.

Posted by: seo perth | Oct 25, 2011 at 08:08 AM

Nice, and thanks for sharing this info with us.Good Luck!

Posted by: moncler jackets store | Nov 13, 2011 at 03:29 PM

Verify your Comment

Previewing your Comment

Posted by: |

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:

Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.