# Pay360

Integrating online forms with line of business applications can be a complex technical requirement. So it is even more complex to be able deliver a user friendly way of delivering this integration by staff that are not trained developers. This ability is commonly known as ‘low code’.

The way this functionality to integrate online services with your payment system has been designed,  it is beyond low code; it's ‘no code’.



### High Level

The functionality we provide is comprised of five functions. These provide the ability to:

1\) Add fixed value payment items that a person can choose to buy

2\) Add a user entered value control where the citizen can type how much they wish to pay

3\) Add a shopping basket that tallies up all payments before submission - the payment summary

4\) Prepopulate the Capita Pay360 interface with name, address etc. from the eDesigner form

5\) Send internal email(s) upon submission per form



To add a payment element, one simply clicks on Add Item in the Designer function and then clicks on the payment tile:

![Payment functionality in the Add Item UI](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2Fox6Zj4CB07B09sjTMFUu%2Fimage.png?alt=media\&token=13f96214-ee2c-4161-b1af-eda3f1195ee4)

There are then the following three options:

![Three different payment controls](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FgzDmWuGNurAUIdaR71r8%2FScreenshot%202021-12-13%20at%2012.37.14.png?alt=media\&token=79049a4d-c950-4639-bd3d-b31c7695fe25)

### Payment Items

A payment item is a fixed price item that a person can buy.

If you choose to add a payment item the following options are presented:

![A purchasable payment item](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FkQ3Vs4KJ6f4a6cMkoKCt%2FScreenshot%202021-12-13%20at%2012.35.46.png?alt=media\&token=d35213ea-2720-45bc-89e0-48c5a5495ab5)

Once added to the form it will appear like so:

![A payment item in situ within a form](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2F1OJ8HyPjHl7mI2QlGoeG%2FScreenshot%202021-12-13%20at%2012.46.49.png?alt=media\&token=317248c1-03df-4c62-b0b0-636c80e2d454)

{% hint style="info" %}
You should use [**Page Rules**](../../building-services/adding-rules/page-rules) to dynamically hide/show the payment amount the person needs to pay.
{% endhint %}

The relevant fields you can add and what they are:

| **Element**      | **What is it?**                                                                                                  |
| ---------------- | ---------------------------------------------------------------------------------------------------------------- |
| Field Label      | This is what the customer will see when they’ve selected what they want                                          |
| Amount           | The amount one needs to pay for the item                                                                         |
| Tax included     | The ability to set a VAT amount against an item                                                                  |
| Currency Symbol  | Used purely for those taking payments in other countries                                                         |
| 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                                                                 |

Where the 'Tax included' check box has been ticked, the user is able to provide a breakdown of the VAT code (as held in Capita Pay360), the % and the amount:

![Adding VAT to a fixed price item](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FOQer8YOrz7zGvsbQMtzA%2FScreenshot%202021-12-13%20at%2012.44.38.png?alt=media\&token=551b4bce-772a-4d6c-80e4-ac0f23eb0990)



For this option there are a variety of **additional** fields that relate to controlling what a user entered amount looks like and its label. I.e. the format of the numbers they can enter is controlled by a regular expression.

![Adding a user entered payment control](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FAtFHlZrUF2DXUtvozCuF%2FScreenshot%202021-12-13%20at%2012.50.21.png?alt=media\&token=bd399be6-1649-45d6-8cfe-0b1aed2635c7)

{% hint style="info" %}
We'd suggest you keep this as it is, as it's the standard format for currency based entry.&#x20;
{% endhint %}

You can also add validation and mandatory warnings too.

You can configure it such that there is a fixed **item reference** or enable the customer to enter this i.e. Council Tax account number. If the check box 'User entered reference' is clicked the following additional fields are displayed for completion:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FrwwgXpi8i9bvFR2GClCe%2FScreenshot%202021-12-13%20at%2012.53.06.png?alt=media\&token=7f834b96-d7c8-440c-948e-4122e3a6754e)

| Field                                    | What it does                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Reference field label                    | Tells the citizen what to enter e.g. Rent account number, overpayment reference                                                                                                                                                                                                                                                                                                                                                                                                               |
| Reference field minimum length           | The minimum length of the reference they need to enter                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Reference field maximum length           | The maximum length of the reference they need to enter                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Reference field regular expression       | <p>The ability to control the format well beyond the min/max settings about. </p><p></p><p>To learn more about regular expressions have a read below:</p><p><a href="https://www.regular-expressions.info/quickstart.html">https://www.regular-expressions.info/quickstart.html</a></p><p>To search for examples of regular expressions - so you don't need to learn them - please see here:</p><p><a href="https://regexlib.com/?AspxAutoDetectCookieSupport=1">https://regexlib.com</a></p> |
| Reference field validation error message | If the citizen enters a value that is too short/long or doesn't meet the rules of the reference as defined by the regular expression, you can control the content of the message presented.                                                                                                                                                                                                                                                                                                   |
| Reference field mandatory warning        | If the citizen doesn't enter a value, you can control the content of the message presented.                                                                                                                                                                                                                                                                                                                                                                                                   |
| Include help text for reference field    | If checked, you're able to then provide  help text for your custom reference field.                                                                                                                                                                                                                                                                                                                                                                                                           |



### Purchase Summary



A payment summary automatically tallies up any payment relevant payment items/user entered amounts and acts like a shopping basket.&#x20;

The only thing required when adding a payment summary is a field id and should you support a different currency (unlikely!) the ability to change the currency symbol:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2Frb1SASOpkdwAw1iTQQTk%2FScreenshot%202021-12-13%20at%2013.42.38.png?alt=media\&token=b62de334-1422-48a9-8726-af2bf666521d)

This is presented like so where two items were requested on earlier pages:

![Payment Summary (Basket)](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FsXXLRnVaS7ZnrfbCeyZK%2Fimage.png?alt=media\&token=1df44247-ab07-42a0-9c02-f0a4a2df43a6)

{% hint style="warning" %}
**Important**

When adding a payment summary remember that it:

a) MUST be after any pages containing payment items/user entered payments

b) MUST be on a page that does not contain any payment items/user entered payments
{% endhint %}

{% hint style="success" %}
You can have other content on a payment with a payment summary - just not other payment items.
{% endhint %}



### Internal Email Receipts

It is possible to send an email receipt of the payment on any form to an email addresses or addresses as set by you.&#x20;

The functionality is accessed using the 'Payment Settings' button on the Designer menu:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FXvWEfQeZZXoTFE9jSmBs%2Fimage.png?alt=media\&token=9c3c2c9f-750c-4e74-b38a-14450835c25b)

Here you can tick the box to enable the function - 'Email payment receipt internally'. Then use the 'Add a new email' button to add the email address(es) that should receive the receipts:&#x20;

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FRQ8jKcG0yCgNQHmC8vkd%2Fimage.png?alt=media\&token=5840346f-9efc-465b-8cc0-1a6e4842ab9b)

{% hint style="danger" %}
**IMPORTANT**

This email is actually sent from  the Capita system. This functionality essentially tells Capita who to email.

Therefore the functionality and the content within the email itself is controlled entirely by the Capita Pay360 application.&#x20;

You should therefore raise any issues with these emails with Capita support.
{% endhint %}

### Pre-population of personal content (non-payment item related)

Unlike most payment systems where one passes the amounts and things to buy, there is a stage which asks about name, address, email etc. in the Capita Pay360 flow.&#x20;

To ensure these details are automatically populated from the eDesigner form, there's functionality to ensure that any of the following can be passed to the Capita payment system :

* PersonTitle
* Firstname
* Surname
* Email
* AddressFieldsAddressLine1
* AddressFieldsAddressLine2
* AddressFieldsAddressLine3
* AddressFieldsAddressLine4
* Postcode

Ultimately ensuring that it is quicker to make / take a payment from a form. The functionality is accessed using the 'Payment Settings' button on the Designer menu:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FXvWEfQeZZXoTFE9jSmBs%2Fimage.png?alt=media\&token=9c3c2c9f-750c-4e74-b38a-14450835c25b)\


Once in here one can see there is a new 'Pre-populate customer details in payment system' option:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FRQ8jKcG0yCgNQHmC8vkd%2Fimage.png?alt=media\&token=5840346f-9efc-465b-8cc0-1a6e4842ab9b)

If this is checked/ticked then the following fields (using the standard fieldids) from the 'Standard' or 'Blank' **Who Are You** page will be used to to pre-populate the Capita payment screen.

* PersonTitle
* Firstname
* Surname
* Email
* AddressFieldsAddressLine1
* AddressFieldsAddressLine2
* AddressFieldsAddressLine3
* AddressFieldsAddressLine4
* Postcode

There is also an option to pre-populate these pieces of data from any page within the form. To do so you need to check the **'Override default 'Who are you' field XPaths'** option.&#x20;

{% hint style="success" %}
You don't need to override the defaults and therefore have to delve into the realm of XPaths. It's specifically if you want to use field ids on pages that are not the standard ones.&#x20;
{% endhint %}

An [XPath](https://www.w3schools.com/xml/xpath_intro.asp) is a technical term to indicate which field on which page of the form you want to refer to.

So in this case the XPath can be used to override the standard behaviour if:

a) You don't have a WhoAreYou page

b) The details to pre-populate are on a later page.&#x20;

The UI is illustrated below:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FSftFmbKoHgxO5I6p5RLv%2Fimage.png?alt=media\&token=2d1b5af1-a2f6-4368-995c-be30156d818b)

To help give an example let's say you have built a page called My Information and you want to use the email address from that page in the pre-population of Capita. If you go to that page you will see its XPath name in the URL.

I.e. this form is PAYMENTTEST, the page it is on is myinfo as that is what is shown in the URL:

### ![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FNEeaT1wzPXBsC36vqWU8%2Fimage.png?alt=media\&token=fa15f75b-d4c6-4fdf-9d28-274c40924c9b)

So in the XPath description we need the page id to be myinfo:

page\[@id='myinfo']/....

But this only tells eDesigner which page the field is on. The next thing you need to do is add the field id for the field you want to map. So if the Field ID for the form is myinfoemail, as shown in the screenshot below:

![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FLkZgAlIkkEVrhYM9mSvN%2Fimage.png?alt=media\&token=4f0b6d13-5e1b-405a-88d6-867c3d7b3da2)

The XPath override value would therefore be:

page\[@id='myinfo']/myinfoemail

We can see that we have adjusted which field will be used to pre-populate Capita by placing the above into the Email override field:\


![](https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2F0ZHv8k5SrbQFiX5z9qKs%2Fimage.png?alt=media\&token=5cf93a1e-a801-45ed-8c9e-9089dd3fdea5)

### Capita Pay360 Set Up



**CapitaPaymentEndPointAddress**&#x20;

This is the URL end point fo the payment system's URL. eDesigner enables you to build forms that integrate to payment systems without any technical knowledge.&#x20;

{% hint style="warning" %}
**You get this info from Capita.**&#x20;
{% endhint %}



**CapitaPaymentIdentifier**&#x20;

This is first of three identifiers for Capita Payment system integration.&#x20;

{% hint style="warning" %}
**You get this info from Capita.**&#x20;
{% endhint %}



**CapitaPaymentSiteId**&#x20;

This is second of three identifiers for Capita Payment system integration.&#x20;

{% hint style="warning" %}
**You get this info from Capita.**&#x20;
{% endhint %}



**CapitaPaymentHmacKeyId**&#x20;

This is third of three identifiers for Capita Payment system integration.&#x20;

{% hint style="warning" %}
**You get this info from Capita.**&#x20;
{% endhint %}



&#x20;**CapitaPaymentHmac**&#x20;

This is a long security code which needs to be added to finalise payment integration.&#x20;

{% hint style="warning" %}
**You get this info from Capita.**&#x20;
{% endhint %}



**CapitaPaymentCustomVatCodeEnabled**

We noticed that the Custom VAT code was not being passed across to Capita Pay360 and as a result we've added a new setting:

&#x20;When true this will ensure that the VAT code will be passed to the Capita Pay360 application.&#x20;

**CapitaPaymentZeroVatAmountEnabled**

If the VAT rate was 0 we were not sending anything but Capita Pay360 needs zero to be sent. So this setting when true will ensure 0.00 is sent when the VAT rate is 0.&#x20;



{% hint style="danger" %}
**Important**&#x20;

The thing to also be aware of is that we need to set your payment preference to Capita Pay360. So if you wish to use this function please tell us at:&#x20;
{% endhint %}

{% embed url="https://insights.ieg4.com/submit-a-request" %}

### August 2024 update

The following functionality has been included at release 2.16 of eDesigner.

**Pay 360 Accepted Card Types**

Within the eDesigner Payment Item configuration a new tick box is displayed to allow the payment item to be restricted to debit card payment only:

<figure><img src="https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2Fho6pevS9Nre53V14LPHK%2FeDesigner%202.16%20Accepted%20Cards.png?alt=media&#x26;token=5f46e30a-52cc-4102-9b79-7a480fff43dd" alt=""><figcaption></figcaption></figure>

When this option is selected it applies to the whole basket on the Pay 360 Payment Portal.  This means that if the eDesigner form supports multiple payment items and a payment item is selected that can only be paid for using a debit card, this validation will be applied to the whole basket on the Pay 360 Portal.

If the user selects a payment item that can only be paid for using a debit card and then enters a credit card in the payment portal the payment portal displays a message as below:



<figure><img src="https://2446085776-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Xv5e5CMqZNlA8r5Exkm%2Fuploads%2FSKtevndzzvV2lVxY6eEV%2FeDesigner%20Accepted%20Cards%202.png?alt=media&#x26;token=025fa6f9-0c10-4d07-850b-fdfb04cb6049" alt=""><figcaption></figcaption></figure>

Please note that this functionality is currently only available for Pay 360 integrations.
