Stripe Connect Payment processing

In this post, I am going to talk about how to implement Stripe Connect to accept payments on behalf of a seller.

Essentially, my requirement was to:
1) Design a form with metadata fields like Name, Currency, Amount with a Pay button at the end.
2) Add field validations to the form.
3) Once the form is completed and “Pay” button clicked, invoke Stripe Checkout to process the payment and show the appropriate payment success/failure message.
4) Formidable Pro acted as the backend end database and it’s API was used for some server side validations.

The form design (part 1) was achieved by using plugin WP Simple Pay Pro and it’s shortcodes. The shortcodes were placed inside Formidable HTML type fields to have better control on the form design and use some aspects of FP API for server side validation.

The custom form validations (Part 2) were implemented using Parsley. The library is included as part of Simple Pay Pro and doesn’t require to be installed separately.

We implemented a custom Stripe Pay button (part 3) using Stripe Checkout API.

On a high level, the technical process flow is as follows:
a) The click on the “Pay” button in the form validates the form fields using Parsley JS library ($form.parsley().validate()).
b) Once the form passes validation, the Stripe payment overlay is invoked using handler.open({}) function.
c) Once the overlay form is completed and submitted, the resulting token is captured and processed by the StripeCheckout.configure({}) function.
d) Based on payment success/failure, custom message is displayed on a form designed on Formidable.

Hope this overview helps! Please don’t hesitate to contact me for any question on implementation details or if you have better suggestions.

Pass WordPress variables to JavaScript

WordPress has an excellent way to pass on variables declared in PHP to JavaScript. The steps are given below along with example.
$site_parameters = array(
'stylesheet_directory' => get_stylesheet_directory_uri()
); //define the variable in PHP; I want to pass the WordPress folder path to avoid hardcoding values in JS
wp_register_script( 'the handle', get_stylesheet_directory_uri().'/path to js file' ); //register the script
wp_localize_script( 'the handle', 'SiteParameters', $site_parameters ); //localize the variables
wp_enqueue_script( 'the handle', get_stylesheet_directory_uri().'/path to js file'); //enqueue the script
‘the handle’ should be the same in all the three steps for a particular script being registered.
To access the variable in JavaScript, simple use
var WPpath = SiteParameters.stylesheet_directory;

I have tested the code and it works beautifully! Hope this helps.

PHP and Web Service

I will be discussing a very simple example of using web services with PHP. The Web Service consumes a zip code (US zip code in our example) and returns an array containing the City, State, Area Code and Time Zone. To keep things simple, I will only convert Zip Code into City and State.
Web Service used: http://www.webservicex.net/uszip.asmx?op=GetInfoByZIP
Web Service WSDL: http://www.webservicex.net/uszip.asmx?WSDL
Programming Language: PHP
Framework: WordPress. Valid for any framework using PHP.
PHP APIs: SOAP Client, XML Parser
The code follows:
$zipcode = $_POST['zipcode']; //I am fetching the zip code via an ajax call from an user input
$url = "http://www.webservicex.net/uszip.asmx?WSDL";
$client = new SoapClient($url); //create a new SOAP client object and feed it with the WSDL URL
//$fns = $client->__getFunctions(); //You can dump the available functions using the getFunctions method
//var_dump($fns); //dumping the functions reveal the method definitions
$res = $client->GetInfoByZIP(array('USZip' => $zipcode)); //use the GetInfoByZIP method passing the USZip as an array parameter
$parsedXML = simplexml_load_string($res->GetInfoByZIPResult->any); //the returned value is in XML format which can be easily parsed using PHP XML parser
$city = $parsedXML->Table[0]->CITY; //fetch the city
$state = $parsedXML->Table[0]->STATE; //fetch the state
The output of the line var_dump($fns) is attached below.
As you can see, the GetInfoByZIP method has an array parameter and returns a complex type GetInfoByZIPResponse. The same can be verified from the WSDL mentioned in this post. This example can be used with any kind of web service and scaled as per business requirements.
Hope this helps! Please leave your valuable comments and let me know what you think.