Taking Online Payments From er2

This tutorial presumes that you have:

  1. Completed the instructions up to page 17 for creating online payments as outlined in the instructions provided by er2. user guide to online renewals and payments.
  2. Your site uses a SSL certificate and is secure e.g. URLs start with https: (You can not accept payments online without this). If you are not using WordPress see an alternate option at the bottom of this page.
  3. You have created accounts with Stripe or Paypal to take your payments.
  4. You are using WordPress as your website foundation.

Plugins Required:

  1. A form builder of your choice, this must have an option to take payments by Stripe or PayPal.
  2. “Insert Header And Footers” plugin. More info here.

About this tutorial.

This tutorial will cover taking payments from new members and membership renewals for existing members. I will refer to Stripe as the payment processor as that is what we use at Bradford, but you can adapt this for PayPal. In my opinion, Stripe is a far better option and is cheaper to use.

This tutorial will use a Chrome browser to inspect elements I suggest for ease of following along you use the same.

Any links to forms in this tutorial are live so please feel free to visit the pages but please do not submit any information for testing.

Payment Form

Part 1.

  • install the “Insert Headers and Footers” plugin and activate it.
  • From your dashboard go to settings – insert headers and footers.
  • Click in the “Scripts in Footer” box and insert the code below.
				
					<script language="JavaScript"  type="text/javascript">
function getParameterByName(name, url) {
         if (!url) {
              url = window.location.href;
         }
         name = name.replace(/[[]]/g, "$&");
         var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
             results = regex.exec(url);
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace('/+/g', " "));
    }
jQuery("#replace-this-ID").val(getParameterByName("member"));
    jQuery("#replace-this-ID").attr("class", "input_active");
    jQuery("#replace-this-ID").val(getParameterByName("totaldue"));
    jQuery("#replace-this-ID").attr("class", "input_active");
</script>

				
			

Part 2.

  • Go to your Stripe control panel and log in.
  • Copy and save the test API keys, see the video below.

Part 3.

  • Create your payment form using your chosen form maker, you can collect as much information as you like but you must have as a minimum the info set out in the form below. Use the API keys saved in the last step to activate the stripe payment in test/sandbox mode.
  • The form should send the submitted info to your treasurer and your  membership secretary.

Open er2  goto “settings” then “Custom Fields”, Replace the circled text with the same url of the payment form on your website.

Part 4.

  • You now need to make changes to the script copied to insert headers and footers.
  • Open a Chrome browser and go to the page of your new payment form.
  • Follow the video below to find the field IDs for “member number” and “cost”.

Replace the IDs on line 13,14,15,16.

Your code should now look something like this but with the IDs you saved in the last step. Make sure you have the ” # at the beginning and the ” at the end

				
					<script language="JavaScript"  type="text/javascript">
function getParameterByName(name, url) {
         if (!url) {
              url = window.location.href;
         }
         name = name.replace(/[[]]/g, "$&");
         var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
             results = regex.exec(url);
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace('/+/g', " "));
    }
jQuery("#form-field-Membership").val(getParameterByName("member"));
    jQuery("#form-field-Membership").attr("class", "input_active");
    jQuery("#form-field-Cost").val(getParameterByName("totaldue"));
    jQuery("#form-field-Cost").attr("class", "input_active");
</script>
				
			

Part 5.

Now you need to test if the script is working.

Use this Get statement https://replace this with your url?member=70.27.10109&totaldue=30

Use this Debit card number to test Stripe 4000058260000005 use any future date and cvc number.

Please note that Stripe does not send out receipts when in test mode.

New Members form

This is a simple form that has two actions after submitting.

  1. Send an email with the content to the membership secretary.
  2. Redirect the applicant to a confirmation page with more information on the next steps.

The information in the email has to be added to a new member record in er2 manually but this is done quite simply (see the video below).

Live links

 

A Simple Application Form.

This form sends an email to the membership secretary then redirects the applicant to a confirmation page.

Pasting into er2.

After receiving the email the easiest way to create a new member is to drag the info from the email directly into the form fields in er2.

Save the form then find the member again and send them an invite using the button at bottom of the page. You should have an email template setup for this.

Email Templates.

Below are the templates created in er2, we also use the shortcodes that personalise the emails and adds the additional payment link.

  1. Membership Invite.
  2. Membership Confirmation.

New Member Invitation.

The Code:

Dear {{FirstName}},

{{BranchName}} membership.

Thank you for your interest in joining {{BranchName}}. If you wish to proceed with your application please click the link below and complete the online form paying special attention to membership subscription from the drop-down list & Gift Aid.

{{ApplyOnlineLink}}

submit the form and follow the instructions to make a payment if required.

Please contact me if you have any questions.

 

Yours Sincerely

The Membership Secretary
{{BranchName}}
{{ContactEmail}}
{{BranchWebsite}}

New Member Confirmation

In this example you can see that we have added a link to the payment page, we have found that not everyone pays using the button on the er2 page, once they leave the page they can not get back to it so we add a reminder and a link to the payment page in the confirmation email.

Membership Confirmation Email

The Code:

Dear {{FirstName}}

Beekeeping association membership application

Your membership No: {{MemberNumber}}

Thank you for your membership application to {{BranchName}}.

If you have not already arranged your payment of £{{TotalPayable}} please do so by going to the online payment page where you can choose a payment option.

this link will take you to the payment page https://bradfordbeekeepers.co.uk/bdbka-payments/?member={{MemberNumber}}&totaldue={{TotalPayable}}

Once payment has been received and membership confirmed you will be sent your membership certificate.

Yours Sincerely

The Membership Secretary
{{BranchName}}
{{ContactEmail}}
{{BranchWebsite}}

Don’t forget to reconcile any renewal or new application with your stripe account, once a member confirms their details in er2 a payment is added to their account and your capitation whether the payment has been completed or not.

Details on how to do this can be found in this document. user guide to online renewals and payments

If you spot any errors in my tutorial or just need more info on any stage you can contact me at info@paymybka.co.uk  Please be aware that I have a job that often takes me away from home at short notice and it may take a little longer to get back to you.

I can also offer secure hosting for payment forms if you do not use WordPress or are unable to make this work for yourself.

How it works:

When a member clicks the button to pay it diverts to my secure server, the form is filled out and payment is taken directly to your Stripe account then the relevant emails are sent out and the member is then returned to your website. These pages are customisable to match the look of your website.

This service also includes forms for other payments such as courses or donations.

The cost of this service is £50 a year this covers a secure certificate, setup, licenses for software, your own mini site e.g. something like https://yourname.paymybka.co.uk

For more information please contact me at info@paymybka.co.uk