Creating Custom Layouts and Buttons

How to build a unique donation form or style the default one to match your theme.

There are two layouts that come with the plugin by default: ‘user-amount‘ and ‘exact

They are not styled so that you can modify them to match your site very easily.

Using CSS to Style the Existing Layouts

Here is an example shell of the the user-amount layout:

In this example I passed in id=”bibletalk” as an attribute to my shortcode. So all the containers for success and error messages get a custom ID and also the button to make the donation gets a custom id.

You may notice there are no <form> elements. This is because everything is handled through AJAX and the Stripe Checkout popup. Form elements are not required because of that.

So if you wanted to change the button color and style you could do some custom CSS like this:

#hg-stripe-donate-button-bibletalk { padding: 5px 10px; background: #44A8DE; color: #fff; }

Creating a Custom Layout

In your ‘hg-stripe-donate’ plugin folder you will see a sub folder of ‘layouts’ with two files in there. To create custom layouts it’s recommended to copy one of those files into your them folder and give it a custom name.

For instance let’s take the user-amount.php and copy it into our theme and rename it donate-bibletalk.php

donate-bibletalk

No matter what you change in there, you only really need to have two elements:

  1. An element to trigger the Stripe Popup click
  2. And an input field with an unique ID

The element to trigger the popup must have an ID of hg-stripe-donate-button-{$button_id}. This is used by the plugin to gather the amount from the input field and pop up the Stripe Checkout.

The input field has a default ID of “hg-stripe-donate-amount-$button_id” but is changeable through a shortcode attribute: amount_element. It needs to be an input field because we access it through the jQuery .val() function.

I hope this helps you get started creating your custom layouts, if you have any specific questions please let me know.