To illustrate how simple this is, we've built an online form that allows a person to pay for multiple new bins. This form will allow a person to select the specific bins they want and using page rules we can set it so only those bins they need are added to the payment summary.
The following illustrates the new Payment function, which is accessed via the 'Add Item' option in the Designer menu:
When one clicks on the drop-down menu in the payment function the three functions mentioned earlier are shown.
So in this form we’ve added three purchasable items - Black Bin, Green Bin and Brown Bin. Here is one of those items to illustrate this:
on’t worry about the HTML in the Field Label, this has been done to illustrate the flexibility of this solution in terms of how you can visualise items a person is paying for.
The following outlines what each field is:
|
Element |
What is it? |
|
Field Label |
This is what the customer will see when they’ve selected what they want |
|
Item Description |
This is the description passed to the payment system as the description and what is shown in the payment summary |
|
Item fund code |
This is the payment system’s fund code |
|
Item amount |
This is the amount specific to the item |
|
Item reference |
This is the budget code / payment reference code |
So after the three items were added we then created a drop down to allow a user to select which items they need:
You can see the reason we added HTML for the field label was so that we could have images within the form laid out in a mobile responsive ‘card’. So the point here is to illustrate that using HTML and updating CSS allows you to have a lot of customisation over the look and feel of items.
The next thing we did was add page rules such that a person will only see the payment items reflective of the option they've selected. I.e. in the above screenshot it shows all three bins because the option of ‘All three bins’ was selected. So below we can a different option was selected and thus the payment options are updated to reflect this:
The following illustrates these rules but as the page rules behaviour works the same as now we aren’t going to cover this further:
Essentially the rules above ensure each drop down option results in different items/prices being shown.
Adding a Purchase Summary
After doing this we added a Purchase Summary control to the page after that where the above took place. Nothing other than the control needs to be added. It will automatically pick up the values / amounts that were selected previously.
IMPORTANT
A Purchase Summary needs to be on a different page AFTER that where the items were selected. As you can see the total of the three payments is shown as its own item below:
Integration to the Payment System
Now when we press submit we can see the changes made to the integration. As one can see the total value from the payment summary is populated in the amount element when the payment system is invoked:
But importantly when accessing the confirmation screen the user can see how this is comprised:
You have now just seen how we built our first online form with multiple payments and hope it was simple to understand and use.
But importantly when accessing the confirmation screen the user can see how this is comprised: