TinyPass Split Pays for WordPress – Mark 2

This last week, Akilez Web Solutions was asked to revisit the modifications we made to the TinyPass plugin for WordPress. This time, our new client was looking to have multiple paywalls set-up with specific tags associated to different authors, and wanted to provide split pays for each author or in this case, a paywall targeting a specific author’s tag.

TinyPass Logo We were intrigued at the idea of taking a new shot at this terrific plugin. We had offered a solution in January that allowed for one split to be made in “Pay-per-Post” mode only. This was an effective modification an greatly benefited our previous client, however we were left a bit unsatisfied. We knew the modifications that we made would work, however, they were made in a bit hackish and all to incomplete manner.

What Were We Thinking?

First off, only one split pay? This made no sense, TinyPass’ plugin provides three pay options in both Paywall and PPP modes. What if a user wanted to have a different user get a split based on the pricing option elected by the client? What if a user wanted to give multiple splits of a pay option to multiple people? A furtherexamination of the code certainly seems to support this. Secondly, why limit the modification to just the PPP side of things? And lastly the modifications should be made to the plugin in a manner that is more consistent with its original coding, not hacked in and looking like a half thought out, last minute addition.

Our Refocused Aim

Never Forget to Set GoalsSo, we started out with three goals in mind:

  • Make the split pay options universal to both the “Paywall” and “Pay-per-Post” modes.
  • Allow for multiple split pays for each pricing option. (Incidently we also wanted to include code that didn’t limit the number of split pays in the way the number of price options is limited to three.)
  • Better integrate the modifications with the existing plugin.

We were of course successful, there wouldn’t be this post had we not. So once again we’d like to walk you through the changes we made and why.

In our previous modification we were working with TinyPass version 2.0.9. This time we started out with TinyPass 2.1.5. By version 2.1.5 there had been significant changes, multiple paywalls, better interface and quite a bit of bug fixing. However the 2.1.5 core file remained largely unchanged. This time we also  made modification to three files* in the TinyPass 2.1.5 plugin. Let’s Begin!
*For those paying attention, we claimed the last modification edited four files, however only three were mentioned or modified. :)

The Modification

Once again the process begins in the tinypass-form.php file. This incidentally is the only file that can be edited from the built in plugin editor provided in WordPress, It would behoove you to try these edits in a coding environment or simply a text editor.

Adding the split pay form

Starting with the most significant changes, directly after the __tinypass_price_option_display function we added the following function:

[code lang='scala']/**
* Display split-pay options
*/
function __tinypass_splitpay_display($opt, $email, $split, TPPaySettings $ps) { ?>
<div>
<label>Email</label><br />
<input type="text" size="15" name="tinypass[<?php echo "po_splitemail$opt" ?>][]" value="<?php echo $email ?>"><br />
<label>Split</label><br />
<input type="text" size="12" name="tinypass[<?php echo "po_splitpay$opt" ?>][]" value="<?php echo $split ?>">
<p style="display:inline">%</p><br /><br />
<a href="#"><?php _e("Remove") ?></a>
<hr />
</div>
<?php }[/code]

This will become our split pay form with removable “splits”. Note  we used a multidimensional array for the email addresses (tinypass[<?php echo "po_splitemail$opt" ?>][]) and the split percentages (tinypass[<?php echo "po_splitpay$opt" ?>][]). These are linked to the individual price option they are going to be displayed with. Also, we will use the “Remove” link to dynamically allow you to delete a split.

Next, we needed to add the split pay form cell to the price option display. In the __tinypass_price_option_display function, after the last <td> tag we added the following:

[code lang='scala']<td width="140" rel="<?php echo $opt; ?>">
<div>
<?php
$splits = $ps->getSplits($opt);
if (!empty($splits)) {
foreach($splits as $key => $value) {
echo __tinypass_splitpay_display($opt, $key, $value, $ps);
}
} ?>
</div>
<br />
<a href="#"><?php _e('Add') ?></a>
</td>[/code]

This adds our new form elements to the pricing option display form. The new (to be created) getSplits function will give us our splits in a nicely usable key-value array, which you can see we use to display previously entered splits. The “Add” link will be used to duplicate the form elements for adding multiple splits to a single pricing option. Because we are adding a new cell to the pricing options table, we decided to change the “Captions’ <td> width to 160 instead of 270. Honestly the best way to make this change is a “replace all” for  270 to 160 as it changes many places where that width is given. Next,  you will need to find:

[code lang='scala']<th width="100"><?php _e('Price') ?></th>
<th width="380"><?php _e('Length of access') ?></th>
<th width="160"><?php _e('Caption (optional)') ?></th>[/code]

Add the Header :

[code lang='scala']<th width="140"><?php _e('Splits (optional)') ?></th>[/code]

Then find:

[code lang='scala']<th width="100"><?php _e('Price') ?></th>
<th width="180"><?php _e('Length of access') ?></th>
<th width="160"><?php _e('Caption (optional)') ?></th>[/code]

and modify these headers to:

[code lang='scala']<th width="100"><?php _e('Price') ?></th>
<th width="180"><?php _e('Length of access') ?></th>
<th width="163"><?php _e('Caption (optional)') ?></th>
<th width="150"><?php _e('Splits (optional)') ?></th>[/code]

Once done, the pricing options table will display nicely in “Paywall” mode as well as in “PPP” mode. The odd values for the header make thing align in Firefox and honestly we didn’t care what happened to them in other browsers. It wasn’t technically in our goals to make the display cross browser compliant. (See the importance of setting goals in the beginning?)

Modifying the Pay Settings to Use Split Pays

This time around, we realize that we didn’t need to “do” anything special to make sure the split pay emails and percentages were saved along with the rest of the pay settings. So we didn’t need to add any complicated accessors and code to the  validation code. Nonetheless modifications to the TPPaySettings.php file are still necessary. So we added:

[code lang='scala']const AUTHOR_EMAIL = 'po_splitemail';
const SPLIT_PAY = 'po_splitpay';[/code]

under the list of price options constants. Note these are the same strings used in the form code we just added only without the price option integer.

Then amid the wide and varying public functions, we added our getSplits function:

[code lang='scala']public function getSplits($i) {
$var = array();
$index = 0;
$splits = $this->data->val(self::SPLIT_PAY . $i);
$emails = $this->data->val(self::AUTHOR_EMAIL . $i);
if (!empty($emails)) {
foreach($emails as $email) {
$var[$email] = $splits[$index++];
}
}
return $var;
}[/code]

As, promised the function will return the emails and split percentages in a key-value array that can be easily parsed by the form and other places. The data is already in the pay settings variable since TinyPass’ developers simply stored the array returned from the form(s). Silly us for not realizing that the first time around. There admittedly may be better ways we could have stored the data or presented it back but this is more than sufficient.

After all this is in place the last step in the process was to add our splits to the price offer. As last time the addSplitPay function already existed but was never used by TinyPass developers. So we added:

[code lang='scala']$splits = $ps->getSplits($i);
if (!empty($splits)) {
foreach($splits as $email => $split) {
$po->addSplitPay($email,$split.'%');
}
}[/code]

to the create_offer function near the bottom of the TPPaySettings.php file after the line:

[code lang='scala']$po = new TPPriceOption($priceString);[/code]

Wiring Up the Form’s “Add” and “Remove” buttons.

At this point you might note we are not able to see a “Remove” button, a split pay form field and that the “Add” does nothing of worth. All of that is handled by modifications we will make in the tinypass_admin.js Javascript file located int the tinypass/js folder. At the top of this file we added:

[code lang='javascript']jQuery(document).ready(function(){
jQuery("body").on("click", "a.removeSplit", function(event){
event.preventDefault();
jQuery(this).parent().fadeOut('slow').remove();
});
jQuery("body").on("click", "a.addSplit", function(event){
event.preventDefault();
var opt = jQuery(this).parent().attr('rel');
var html = '<div>';
html += '<label>Email</label><br />';
html += '<input type="text" size="15" name="tinypass[po_splitemail' + opt + '][]" value="" /><br />';
html += '<label>Split</label><br />';
html += '<input type="text" size="12" name="tinypass[po_splitpay' + opt + '][]" value="" />';
html += '<p style="display:inline">%</p><br /><br />';
html += '<a href="#">Remove</a>';
html += '<hr />';
html += '</div>';

jQuery(html).fadeIn('slow').appendTo('.po'+opt);
});
});[/code]

This jQuery code has two functions bound to the <body> element of the code that tell the system to add a “click” event to any existing or dynamically added “addSplit” class <a> tags. This is important since the “PPP” mode form doesn’t exist when you enter the post’s edit screen. Without this delegated binding using jQuery’s .on() function,  we would be stuck using much more complicated code to dynamically add and remove our split pay form elements.

The remove code is simple. It simply fades out and remove from the DOM the <a> tag’s parent div and with it the split form elements.

The add code adds a near match for the code we added in our first step to the containing div by checking the <div> tag’s  ‘rel’ attribute for the price option’s numeric value. Check the code we added at he beginning. you’ll see that we made sure to add it just for this occasion.

Ad with that the modifications are done. All of our goals are met and the result is a function plugin extending TinyPass’ version 2.1.5 plugin to include split pay capability. Thanks to our client for his patience and for bringing us this project and we hope this will serve you as well.

Leave a Comment

Name (required)
Email (required)
Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>