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.
RK 