|
 For demonstration purposes we will create an online kitten shop.
As you can see on the image to the left, the kitten shop was successfully created. Also, Buxter created a set of parameters for us that are quite important.
API Configuration ID we will use this as the identifier to Buxter. The three parameters we entered when we created our application are stored under this configuration id.
Secret key this is the data that will be used later to calculate the security hashes that will secure the sales process.
Status is the status of the Buxter configuration of your application. On creation it is just "Created", you will have to click on "Activate" to enable the Buxter application to receive payments. This is basically a flag for development purposes, if you switched to active your payment configuration is now live.
5. Making payment work
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">
<!-- we need to import the fbml namespace into our checkout site -->
<body>
<!-- integrate the Facebook interpreter script -->
<script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript">
<!-- we need to initialize the FBML interpreter with our API key, before it can be used -->
</script><script type="text/javascript">FB.init("<?php echo $fbApiKey ?>");</script>
</body>
<!-- this creates a big "Pay with Buxter button", after being interpreted
the onlogin action is used to refresh the window after a user has logged in here,
so that -->
<fb:login-button v="2" size="xlarge" onlogin="window.location.reload(true);">
Pay with Buxter
</fb:login-button>
</html>
This allows users to log in to facebook from a popup on your site. If you need to make adjustments to the button, 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.
After the login, you can resolve the id and create the transaction in the following way.
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 it is possible to create a transaction and send the user to the Buxter wallet. After the purchase, the user is redirected to the url passed in the parameter "redirectAfterPurchaseUrl" where you should start a post purchase check and delivery process. This could look like the following code:
$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.";
}
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, that is available here: buxter-facebook-connect.zip (72.0K)
|
To use Buxter on a Website that is not integrated into Facebook, it is possible to use Facebook Connect as an bridge mechanism. 
Comments (0)
You don't have permission to comment on this page.