Skip to main content Skip to navigation

Create an online payment form

Create a payment form to enable customers to buy goods and services online. You can link your payment form to the University's online payment service, the Transaction Tracking System (TTS). There are two options for creating a payment form:

The University does not currently have an online shopping cart facility.

Important: ensure you read and/or complete all steps in this process to ensure the payment form is set up successfully:

  1. Apply for a University trading account
  2. Create an online payment form
  3. Fixed price option
  4. Custom payment option
  5. Add any amount option
  6. Form properties
  7. Payment confirmation

1. Apply for a University trading account

To use the online payment service, you first need to apply for a trading account.

  1. Read the information about operating a trading account.
  2. How to apply for a trading account.

    Note: For assistance and advice about applying for a trading account, contact onlinepayment at warwick dot ac dot uk. The process to set up an account can take some time, depending on the type of account required. It could take up to three weeks.

Once you have a trading account and you're familiar with the online payment processes, create a payment form on your website using SiteBuilder.

2. Create an online payment form

  1. Create a standard form containing your required fields.
  2. Go to the form you have created to turn it into a payment form.
  3. Select Edit > Edit formsbuilder page.
  4. In the Modify the form section, select Online payment:

    Modify form options

  5. The Configure an online payment form screen appears:

    Configure online payment form

  6. Select Enable online payment.
  7. Enter your Trading account ID. The Finance Office provide you with this after you apply for a TTS trading account. It's a long number containing numbers and lower case letters. Take care to enter it correctly.
  8. Use the radio buttons to choose your pricing options.
  9. Select Save.

3. Fixed price option

Fixed price means that you're selling one item at a price that does not vary. To use the Fixed price option, select the radio button and enter the amount in the Price field in pounds and pence e.g. 25.00. Do not include the pound sign.

Note that with fixed price, the cost is not displayed on the form. To help the user, you could provide a visual clue about what they are purchasing and the price. E.g. a single line text box showing the price and marked ‘view only’, which ensures the user cannot edit the price:

Fixed price field

4. Custom payment option

If you want a list of different items with different prices, choose Enable custom payment option.

Note: although your customers can only select one item from a particular list, you can add as many drop-down lists (with different selections) as you like as part of the same transaction. The transaction value adds up all the amounts from the different lists for you.
  1. To enable customers to pay for different items at different prices, ensure you choose Enable custom payment options in Edit > Edit formsbuilder page > Modify the form > Online payment.
  2. The custom payment options are now available in the list of options under Modify the form. Select the Custom payment link. You should now see the following screen:

    Add or edit a custom payment element form

  3. Give the custom payment a name by entering it in the Field name box.
  4. Enter any instructions to the customer in the Label box.
  5. In the Options section, enter the price of the first item in pounds and pence in the Cost field e.g. 35.00. Do not include the pound sign.

    Cost and description fields for each item

  6. Add a Description. The price you have just entered in the Cost field does not display on the form to the customer. You could include the full price for the customer in the description field as well – for example:

    1 x night accommodation = £35.00

    2 x nights accommodation = £70.00
    3 x nights accommodation = £105.00

  7. Select Add new item and continue adding new items to complete your first list.
  8. To create a different set of options or new list, start again with a new Add/Edit a custom payment element. Use as many different payment fields as you need. For example, a conference payment form could have separate elements for conference fees, accommodation and food.
  9. Optionally, enter a Pre-selected item as the default. If this field is empty, a blank choice (---) is displayed to the customer in the payment options drop-down list.
  10. Specify whether this payment field is Required or optional by (un)selecting the Required checkbox. When a payment field is set to Required, the customer cannot submit the form without choosing an option from the required field. For example, a conference payment form could have a required payment field for ticket registration and optional payment fields for accommodation or food.
  11. If you want the customer to be able to see the total cost of all payments (advisable as this also provides a record for you on the form submission), select Show transaction total. The transaction total is displayed at the end of the payment form, so it doesn't matter which payment field you add it to – but you only add it once.
  12. Once you've finished setting your custom payment options, select Save. The published view looks like this before the customer makes their selection:

    Please choose your accommodation drop-down with three options

    …and like this (with the transaction value added) once they have made their choice:

    Please choose your accommodation with one option selected

  13. When the customer submits the payment form, they're automatically taken to the secure online payment screen to enter their card details and complete the payment.

Note: The intended payment amount will be displayed on the View Submissions screen and data downloads.

5. Using the ‘Allow any amount to be entered’ option

This enables visitors to make a donation to the value of their choice e.g. for the Giving or Alumni departments. You can use it too for varying amounts which you cannot specify. For the most part though, you probably want to control the amounts people pay you and for what.

To use the option, you need to do three things:

  1. Select the Allow any amount to be entered checkbox at the bottom of the page.
  2. The form does need some value in the Cost and Description fields, in the Options section, otherwise the form does not save and will generate an error message. Enter a value in the Cost field. It doesn't matter what it is (the customer will not see it) so e.g. 00.00 (pounds.pence) is fine.

    Forms - online payment - add any amount

  3. Provide instructions to the customer in the Description field. In the published view they see, they will need to select Other from the drop-down list and then enter their cash amount in the Other field. So, tell them explicity what to do – for example:

    Select Other from this drop-down list, then enter the amount you wish to donate in the Other field, e.g. 24.99.

6. Edit form properties

Once your form is set up, it's essential that you edit the form properties to ensure your form functions as you intend it to.

7. Payment confirmation

  1. Create a Payment success page to inform people that their booking or payment was successful. This is a standard SiteBuilder page. You could create this under the payment form or anywhere on your site. (Hide it from users by unselecting Show in local navigation in Edit > Edit page properties.)
  2. When you have a trading account, you will be given access to the TTS (Transaction Tracking System) to manage your account at https://onlinepayment.warwick.ac.uk/payments
  3. Ensure that the success page has correctly been set up in the TTS.

    Note: It is very important that you create a payment success page and set it up correctly in the TTS system. This ensures that TTS and SiteBuilder are talking to one another. If you don't do this, the user receives an error message because there is no page to redirect the user back to after payment is complete. So, although the money is taken, the customer is unaware that the process is complete.
  4. To offer users an email receipt of their form submission, ensure that the email field on your form has the field name and label email. This email is a payment receipt which is different from the submission receipt that is sent by the form. The payment receipt includes the transaction ID and payment amount.
  5. There is a feature in SiteBuilder which enables you to test your form prior to making your form, so you may want to look at the notes on testing your payment form integration in the first instance. The account will default to test (if it's new) so it's important to complete the setup and testing process for the account to be made live. Once the test is complete, you then need to change your form in TTS to be live too.

Related links

Support

Email webteam at warwick dot ac dot uk
How to report a problem