If you only have a small number of items to sell then it is possible to create a custom shopping cart experience using the Stripe Payments Plugin. This plugin allows you to quickly get up and running with payment forms (single or recurring) on your site.

The plugin is intended to provide a customizable platform for creating more exotic payment workflows. It also provides a number of features that allow you to hook into the payment process and provide a custom user experience. To accomplish this simple shopping cart will require some customization using these technologies: HTML, CSS, JavaScript and PHP. I’ll try to provide you some guidance.

Case Study

Imagine that we have a two main packages A & B that customers can choose. Each package then has a number of options that can be added. This will provide a complex enough example to allow a useful solution to be explored. There are two parts to this solution: client side and server side.

Client Side

To help prototype the client side, I created a jsFiddle that has features that allow you to select a package and then corresponding options for the selected package. You can find it here: example code. I was careful to keep the the HTML layout and CSS that the plugin uses. That makes it a bit easier to transition to the WP page later. The key to making this work is to realize that the payment form really just needs an HTML element with name=‘amount’ that gets HTTP POSTed back with the value of the total amount in cents. Keeping this amount in-sync with the user’s choices is accomplished using JavaScript.

To transition that to a WordPress page with the plugin do the following:

1. Copy the jsFiddle snippet between the stripe_form_begin and stripe_form_billing_info shortcodes. That looks something like this:

[stripe_form_begin test=true]
<div class="stripe-payment-form-row">
    <label>Package</label>
    <select name="package" id="package">
        <option value="A" data-amount="2000" data-options="#packageA">Package A - $20</option>
        <option value="B" data-amount="3000" data-options="#packageB">Package B - $30</option>
    </select>
</div>
<div id="packageA" class="stripe-payment-form-row options">
    <label>Options</label>
    <input type="checkbox" name="opta1" value="1" data-amount="500" /> Option A1 - $5
    <input type="checkbox" name="opta2" value="1" data-amount="600" /> Option A2 - $6
</div>
<div id="packageB" class="stripe-payment-form-row options" style='display:none;'>
    <label>Options</label>
    <input type="checkbox" name="optb1" value="1" data-amount="700" /> Option B1 - $7
    <input type="checkbox" name="optb2" value="1" data-amount="800" /> Option B2 - $8
</div>
<div class="stripe-payment-form-row">
    <input id='amount' type="hidden" class="amount" size="20" name="amount" value="4000"/>
    <label>Total Amount</label>
    <input id='amountShown' type="text" size="20" disabled="disabled" class="disabled amountShown required" value="40.00" />
    <span class="stripe-payment-form-error"></span>
</div>
[stripe_form_billing_info medium=true]
[stripe_form_payment_info]
[stripe_form_end]
[stripe_form_receipt]

2. Copy and paste the jsFiddle JavaScript to the bottom of the WordPress page containing the above. Be sure to sandwich it between <script> tags and do this in the WP HTML editor (not the visual editor). It should look something like:

<script type='text/javascript'>
(function($){
    $(document).ready(function(){
        $('#package').change(function(){
            var option = $(this).find(':selected');
            var sel = option.data('options');
            $('.options').hide();
            $(sel).show();
            calculateTotal();
        });     
        $('.options input[type=checkbox]').change(function(){
           calculateTotal(); 
        });
        calculateTotal();
    });
    function calculateTotal(){
        var base = $('#package').find(':selected').data('amount');
        var visibleOptions = $('.options:visible');
        var checkedOptions = visibleOptions.find('input:checked');
        var options = 0;
        checkedOptions.each(function(){
            options += $(this).data('amount');
        });   
        var totalCents = parseInt(base + options);
        $('#amount').val(totalCents);
        var totalDollars = totalCents/100;
        $('#amountShown').val(totalDollars);
    }
})(jQuery);
</script>

Here is that in a test page.

Server Side

The client side will provide a functional front-end. There is a risk with all HTML forms that someone could manipulate the data before submitting. Someone might try to ‘get an option or package for less than the value’ by doing that. The server side code programmatically double checks the amount paid to the amount that should have been paid. If they are not equal, then you can cancel the payment. You can do this in the pre-payment hook. Here is some pseudo-code:

if(function_exists('stripe_register_payment_begin_callback')) {  
    stripe_register_payment_begin_callback('my_payment_begin_callback');
}
function my_payment_begin_callback( $response ) {
 
	// Calculated the expected total (in cents)
	//
	$total_expected = 0;
	$packageId = $response[ 'package' ];
	if( $packageId == 'A' )
	{
		// Base price
		$total_expected += 2000;

		if( isset( $response[ 'opta1' ] )
		{
			$total_expected += 500;
		}
		if( isset( $response[ 'opta2' ] )
		{
			$total_expected += 600;
		}
	}
	else if( $packageId == 'B' )
	{
		$total_expected += 3000;

		if( isset( $response[ 'optb1' ] )
		{
			$total_expected += 700;
		}
		if( isset( $response[ 'optb2' ] )
		{
			$total_expected += 800;
		}
	}

	// Compare to the amount being paid
	//
	$total_paid = $response[ 'amount' ];
	if( $total_paid != $total_expected )
	{
		$response[ 'cancel' ] = true;
		$response[ 'error' ] = "Amount expected: $total_expected, Amount tendered: $total_paid";
	}
}

The above PHP code is typically placed in your theme’s functions.php file. There is a risk that a theme update will cause this customization to be lost. Be sure to keep a copy of your custom functions.php file so you can re-apply these changes. The above code may not be necessary if you are going to be processing and double checking by hand and if the volume is low.

Summary

This simple cart can be build to meet the site needs when there is a small number of items and options.