The Stripe Payment Plugin allows for various levels of customized payment forms. In this post, I will explore building custom forms.

Simplest

The first level is simply leveraging the built in WordPress shortcodes to build your payment form. There are a number of shortcodes that you can find in the documentation to help you build out many of the most common scenarios.

Here is an example of how to create a simple payment form:

        
[stripe_form_begin test=true]
[stripe_form_amount amount="9.99"]
[stripe_form_section_header title="T-Shirt Gift"]
[stripe_form_section_row label="t-shirt size" input="smallmediumlarge"]
[stripe_form_billing_info medium=true country='US' state='WI']
[stripe_form_payment_info]
[stripe_form_end]
[stripe_form_receipt]

See this form.

The above shows how to use the stripe_form_section_header and stripe_form_section_row shortcodes. Be aware of the quotes surrounding quotes in the later shortcode.

More Complex

The plugin’s WordPress shortcodes emit HTML with CSS classes that allow you to style and alter the layout of the payment form. When you begin creating custom HTML, you should attempt to use the same CSS and HTML structure to build your custom HTML.

Here is an example of adding a new header and row using raw HTML (i.e. no shortcode used).

        
[stripe_form_begin test=true]
[stripe_form_amount amount="9.99"]
<input type='hidden' name='amount' class='amount' />
<h3 class="stripe-payment-form-section">Options</h3>
<div class="stripe-payment-form-row">
    <label>Optional Packages</label>
    <input class="options" type="checkbox" name="option1" data-value="300" /> Package 1<br />
    <input class="options" type="checkbox" name="option2" data-value="400" /> Package 2<br />
</div>
[stripe_form_billing_info medium=true country='US' state='WI']
[stripe_form_payment_info]
[stripe_form_end]
[stripe_form_receipt]
<script type="text/javascript">
(function($){
    $(document).ready(function(){
        //Initialize the dynamic amount
        $('.amountShown').attr('disabled', 'disabled');
        updateAmount();
        $('.options').click(function(){
            updateAmount();
        });
    });
    function updateAmount(){
        var costInCents = 999;
        $('.options:checked').each(function(){
            var val = $(this).data('value');
            costInCents += val;
        });
        $('.amount').val(costInCents);
        var costInDollars = costInCents/100;
        $('.amountShown').val(costInDollars);
    }
})(jQuery);
</script>

See this form

The above example shows how to add raw HTML to build your form. The custom HTML uses the same structure and CSS classes as the shortcodes emit.

This example also shows how to add custom JavaScript to a page. In this example, a few optional packages are added to the payment form. The JavaScript is used to re-compute the payment amount dynamically as the user selects / de-selects the optional packages. As always, you should use the Pre Payment Hook to validate the amount being paid is correct on the server.

As you can see creating a custom form is not all that difficult.