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.

HTML table sorting with DataTables

I had this opportunity to use the brilliant DataTables jQuery plugin to sort an html table in a formidable pro view to display data. Primary benefits to using this plugin are:
a) Lightweight.
b) Easy to install and initialize.
c) Adds dynamic search and pagination features by default. However, this can be altered by passing parameters during plugin instantiation.

However, I would like to get an opinion if there are better and more efficient ways to sort html tables. I did some research but finally came back to DataTables to implement my custom solution. Please leave me a comment and let me know.

Autocomplete in Formidable Pro

Formidable Pro offers a fine feature called ‘enable autocomplete‘ for drop-down fields, the team making an extremely intelligent and efficient use of Chosen to drive this new field option.
However, one demerit of this feature is the lack of mobile support, ‘overkill’ being cited as one of the reasons for desktop only support and I respect their decision and whoever voted in favor of the cause.
This made me decide to implement my own custom solution with plain old jQuery and a text field (instead of drop-down). My requirement is to drive a ‘Data From Entries‘ field with ‘enable autocomplete’ checked for users to look up the values as they type. Also, users should be able to submit the data even if they enter a value not present in the drop-down, the new value finally getting added to the drop-down list.
As a first step to solve the problem, I added a text field to the form and bounded it to jQuery autocomplete. Second step was to write some PHP to make it the remote data source for autocomplete script. I used Formidable API to collect and return all field values from the form that was supposed to be the source for my data from entries field. This made my text field behave as a drop-down and also enabled users to add new values to the list. On form submission, I used Formidable hook to add the new entry to the list of entries.
A small demo is attached, the values you see are Formidable entries. Hope this helps! Please leave me a comment and let me know if there is a better way to achieve the same result.

jQuery and HTML anchor tag

Quick tip for avoiding the annoying hashtag (#) that gets appended to the page url when using HTML anchor tag combined with jQuery.
A very basic example:
<a id="this-is-a-demo" href="#">This is a demo</a>
jQuery( '#this-is-a-demo' ).on('click', function() {
//your own custom logic on anchor tag click
return false; //prevents the hashtag from appending to the page url
});
Hope this helps. Please leave a comment if there is a better way to achieve the same result.