Not sure what to do?

Browse subjects, locations and universities

Popular subjects

All customisable pages

Templates and instructions can be found on the Datacash support website - Customizing hosted payment/capture pages

The below examples may be malformed, click "Full page example" to see how the page will look.

When sending these files to Datacash, remember to remove the ".erb" extension from the files.

Capture payment page

Full page example

Example Code

Payment Page

Payment Details

Payment Reference:

__MERCHANT_REF__

Amount:

__AMOUNT__ __CURRENCY__

__ERROR_MESSAGE__

Credit / Debit card

Card Number

Expiry Date

Expiry Month

Expiry Year

Card Security Code

Issue Number

(If Available)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta content="IE=edge" http-equiv="X-UA-Compatible">

  <title>Payment Page</title>

  <style>
    /*Standard styles*/
    * {
      box-sizing: border-box;
    }

    html {
      font-family: sans-serif;
      font-size: 87.5%;
      line-height: 1.71429em;
      overflow-y: scroll;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      background-color: #fff;
      color: #333;
      font-family: 'Arial', sans-serif;
      margin: 0;
    }

    .hide-element {
      height: 1px;
      left: -10000px;
      overflow: hidden;
      position: absolute;
      top: auto;
      width: 1px;
    }

    .wrapper {
      margin: 0 auto;
      max-width: 114.3em;
    }

    .wrapper--padding {
      overflow: hidden;
      padding: 0 0.85715em;
    }

    @media (min-width: 62em) {
      .wrapper--padding {
        max-width: calc(114.3em + 1.71429em * 2);
        padding: 0 1.71429em;
      }
    }

    @media (min-width: 119.14286em) {
      .wrapper--padding {
        max-width: 114.3em;
        padding: 0 0;
      }
    }

    .section--upper-header {
      padding: 17px 25px;
      padding: 1.21429rem 1.78571rem;
      position: relative;
    }

    @media all and (max-width: 62em) {
      .section--upper-header {
        padding: 14px 25px;
        padding: 1rem 1.78571rem;
      }
    }

    .logo {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo {
        display: block;
        height: 30px;
        height: 2.14286rem;
        margin: 0 auto;
        width: 98px;
        width: 7rem;
      }
    }

    .logo__image {
      height: 40px;
      height: 2.85714rem;
    }

    @media all and (max-width: 62em) {
      .logo__image {
        height: 30px;
        height: 2.14286rem;
      }
    }

    .logo__image > img {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo__image > img {
        height: 30px;
        height: 2.14286rem;
      }
    }

    h1,
    .h1 {
      font-size: 3.21429em;
      font-weight: bold;
      line-height: 1.06667em;
      margin: 0 0 0.3em 0;
    }

    h2,
    .h2 {
      font-size: 2.14286em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h3,
    .h3 {
      font-size: 1.71429em;
      font-weight: bold;
      line-height: 1.25em;
    }

    h4,
    .h4 {
      font-size: 1.42857em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0 0 0.42857em 0;
    }

    .form-container__single {
      margin: 1.28571em 0;
      position: relative;
    }
    @media all and (max-width: 720px) {
      .form-container__single {
        background: none;
        margin: 1.71429em auto;
        padding: 0;
      }
    }

    .form-container__single > * {
      max-width: 600px;
    }

    .brick--hero {
      background: #f2f2f2;
      padding: 1.71429em 50px;
    }

    @media all and (max-width: 720px) {
      .brick--hero {
        background: none;
        padding: 0.85714em;
      }
    }

    legend {
      display: table;
    }

    body:not(:-moz-handler-blocked) fieldset {
      display: table-cell;
    }

    fieldset,
    .fieldset {
      border: 1px solid #ddd;
      margin: 0 0 1.71429em 0;
      min-width: 0;
      padding: 1.71429em;
    }

    fieldset legend,
    .fieldset legend {
      border-color: #fff;
      border-style: solid;
      border-width: 0 5px;
      font-size: 1.42857em;
      font-weight: bold;
      line-height: 1.2em;
      margin-left: -5px;
      padding: 0;
    }

    .form-item {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      margin: 0.85714em 0;
      width: 100%;
    }

    .form-item > label,
    .form-item > fieldset > legend {
      display: inline-block;
      font-weight: bold;
      margin-bottom: 0.42857em;
    }

    .form-item > fieldset,
    .form-item > .fieldset {
      border: 0;
      margin: 0;
      padding: 0;
    }

    .form-item > fieldset legend,
    .form-item > .fieldset legend {
      border: 0;
      font-family: inherit;
      font-size: 1.14286em;
      line-height: 1.5em;
      line-height: inherit;
      margin-left: 0;
    }

    .form-item > fieldset .form-item,
    .form-item > .fieldset .form-item {
      margin-top: 0;
    }

    .form-item__description {
      color: #4c4c4c;
      float: left;
      line-height: 1.62857em;
      margin-top: 0.42857em;
      width: 100%;
    }

    .form-item__error-message {
      background-color: #ffe0e5;
      background-image: url('data:image/svg+xml;charset=utf-8,%EF%BB%BF%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024.00%2024.00%22%20enable-background%3D%22new%200%200%2024.00%2024.00%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23E00023%22%20fill-opacity%3D%221%22%20stroke-width%3D%220.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M%2012.9994%2C12.998L%2010.9994%2C12.998L%2010.9994%2C6.99805L%2012.9994%2C6.99805M%2012.9994%2C16.998L%2010.9994%2C16.998L%2010.9994%2C14.998L%2012.9994%2C14.998M%2011.9994%2C1.99805C%206.47639%2C1.99805%201.99939%2C6.47504%201.99939%2C11.998C%201.99939%2C17.5211%206.47639%2C21.998%2011.9994%2C21.998C%2017.5224%2C21.998%2021.9994%2C17.5211%2021.9994%2C11.998C%2021.9994%2C6.47504%2017.5224%2C1.99805%2011.9994%2C1.99805%20Z%20%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A');
      background-position: 0.42857em 0.47143em;
      background-repeat: no-repeat;
      background-size: 2.14286em;
      color: #333;
      display: block;
      float: left;
      margin-top: 0.42857em;
      padding: 0.85714em 0.85714em 0.85714em 3em;
      width: 100%;
    }

    .fieldset--plain {
      border: 0;
      padding: 0;
    }

    .fieldset--plain legend {
      border: 0;
      line-height: inherit;
      margin-left: 3px;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font: inherit;
      margin: 0;
    }

    input {
      line-height: normal;
    }

    textarea:focus,
    select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="checkbox"]:focus {
      border: 1px solid #1077d0;
      outline: 2px solid #1077d0;
    }

    input[type="reset"],
    input[type="button"],
    input[type="submit"] {
      -moz-appearance: none;
      -webkit-appearance: none;
    }

    textarea,
    select,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="color"],
    input[type="search"] {
      border: solid 1px #4c4c4c;
      border-radius: 2px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-family: inherit;
      font-size: 1.14286em;
      height: 2.57143em;
      line-height: 1.5em;
      padding: 0 0.64286em;
      text-transform: none;
      -moz-transition: box-shadow 0.1s ease-in-out;
      -o-transition: box-shadow 0.1s ease-in-out;
      -webkit-transition: box-shadow 0.1s ease-in-out;
      transition: box-shadow 0.1s ease-in-out;
      width: 100%;
    }

    .button {
      background-color: transparent;
      border: 2px solid #1077d0;
      border-radius: 100em;
      color: #1077d0;
      cursor: pointer;
      display: inline-block;
      font-family: inherit;
      font-size: 1em;
      line-height: 1.28571em;
      margin-bottom: 0.85714em;
      margin-top: 0.85714em;
      padding: 12px 18px;
      text-align: center;
      text-decoration: none;
      transition: all .3s;
    }

    .button a:link,
    .button a:visited,
    .button:link,
    .button:visited {
      color: #1077d0;
      text-decoration: none;
    }

    .button:hover,
    .button:focus {
      background-color: #1077d0;
      border-color: #1077d0;
      color: #fff;
      text-decoration: none;
    }

    .button:focus {
      outline: 0;
    }

    .button.disabled,
    .button:disabled {
      background-color: #e5e5e5;
      border: 0;
      color: #b2b2b2;
      cursor: not-allowed;
    }

    .button.disabled:after,
    .button:disabled:after {
      background-color: #e5e5e5;
    }

    .button--primary {
      background-color: #1077d0;
      border-color: #1077d0;
    }

    .button--primary,
    .button--primary:link,
    .button--primary:visited {
      color: #fff;
    }

    .button--primary:not([disabled]):hover,
    .button--primary:not([disabled]):focus {
      background-color: #0c5ca1;
      border-color: #0c5ca1;
    }

    label {
      word-wrap: break-word;
    }

    .buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      width: 100%;
    }

    .buttons .button {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }

    .buttons__group:first-of-type {
      border: 0;
      margin-left: -0.42857em;
    }

    .buttons__group:last-of-type {
      margin-right: -0.42857em;
    }

    .l-form-item-container {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      margin: 0.85714em 0;
      width: 100%;
    }

    .l-form-item-container--compact {
      margin: 0 0 0.42857em 0;
    }

    .l-form-item-container--compact + .l-form-item-container--compact {
      margin: 0.42857em 0;
    }

    .l-form-item-container--compact:last-of-type {
      margin-bottom: 0;
    }

    .l-form-item-container--block .v5-form-item {
      display: block;
    }

    .l-form-item-container--inline {
      padding-right: 0.42857em;
      width: auto;
    }

    .l-form-item-container--inline:last-of-type {
      padding-right: 0;
    }

    [class^="l-form-item-container__"] {
      border: 0;
      margin: 0;
      padding: 0;
    }

    /* Custom styles */
    select {
      padding: 0;
    }

    .label--block {
      display: block !important;
    }

    .buttons {
      align-items: center;
    }

    @media all and (max-width: 720px) {
      .buttons {
        padding: 0.85714em;
      }
    }

    .form-item__error-message {
      float: none;
    }

    .form-item__error-message:empty {
      display: none;
    }

    .footer-link {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }
  </style>
</head>
<body>
  <section class="section section--upper-header">
    <div class="wrapper">
      <div class="logo">
        <div class="logo__image">
          <img alt="UCAS" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnMiIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMTAwIg0KCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkJLnN0MHtmaWxsOiNFMDAwMjM7fQ0KCTwvc3R5bGU+DQoJPHBhdGggaWQ9InBhdGgyODM1XzJfIiBkPSJNNTcuMiw4SDY4djQ4LjhjMCw4LjYtMC44LDE1LjEtMi42LDIwLjJjLTEuOCw0LjktNS4zLDktMTAuMiwxMi4zQzUwLjMsOTIuNCw0My44LDk0LDM1LjksOTRjLTcuNywwLTE0LTEuNC0xOS4xLTQuMVM4LjMsODMuMiw2LjIsNzguMUM0LjIsNzMsMyw2NS44LDMsNTYuOFY4aDExdjQ4LjZjMCw3LjQsMC42LDEyLjcsMiwxNi4xczMuNyw2LjEsNi45LDhjMy4yLDEuOCw3LjMsMi45LDEyLDIuOWM4LjEsMCwxMy44LTEuOCwxNy4zLTUuNWMzLjUtMy43LDUuMS0xMC44LDUuMS0yMS40VjgiLz4NCgk8cGF0aCBpZD0icGF0aDI4MzciIGQ9Ik0xNDAuOSw2Mi42bDExLjEsMi45Yy0yLjMsOS02LjYsMTUuOS0xMi41LDIwLjZjLTYuMiw0LjUtMTMuNiw2LjktMjIuMiw2LjljLTksMC0xNi40LTEuOC0yMi01LjVzLTkuOS05LTEyLjktMTUuOUM3OS40LDY0LjcsNzgsNTcuMyw3OCw0OS40YzAtOC42LDEuNi0xNi4xLDQuOS0yMi42YzMuMy02LjUsOC0xMS40LDE0LjItMTQuN2M2LjItMy4zLDEyLjktNS4xLDIwLjMtNS4xYzguNCwwLDE1LjQsMiwyMS4yLDYuM2M1LjgsNC4zLDkuNywxMC4yLDExLjksMTcuN2wtMTAuOSwyLjRjLTEuOS02LjEtNC43LTEwLjQtOC40LTEzLjJjLTMuNy0yLjYtOC40LTQuMS0xNC00LjFjLTYuNCwwLTExLjksMS40LTE2LjIsNC41Yy00LjMsMy4xLTcuNCw3LjEtOSwxMi4yYy0xLjgsNS4xLTIuNywxMC40LTIuNywxNS45YzAsNy4xLDEsMTMuMiwzLjEsMTguNWMyLjEsNS4zLDUuMyw5LjIsOS43LDExLjhzOSwzLjksMTQuMiwzLjljNi4yLDAsMTEuNS0xLjgsMTUuOC01LjNDMTM2LjQsNzQuOSwxMzkuMyw2OS42LDE0MC45LDYyLjYiLz4NCgk8cGF0aCBpZD0icGF0aDI4NDEiIGQ9Ik0yMzAsNjUuNWwxMC41LTAuOGMwLjQsNC4xLDEuNiw3LjUsMy41LDEwLjJjMS45LDIuNiw0LjcsNC43LDguNSw2LjVjMy45LDEuNiw4LDIuNCwxMywyLjRjNC4zLDAsOC0wLjYsMTEuMy0xLjhjMy4zLTEuMiw1LjYtMi45LDcuMi01LjFjMS42LTIuMiwyLjUtNC41LDIuNS03LjFzLTAuOC00LjktMi4zLTYuN2MtMS40LTItNC4xLTMuNy03LjYtNC45Yy0yLjMtMC44LTcuMi0yLjItMTUtNC4xYy03LjYtMS44LTEzLjItMy43LTE2LjMtNS4xYy0zLjktMi03LTQuNy05LjEtNy43Yy0xLjktMy4xLTIuOS02LjUtMi45LTEwLjRjMC00LjMsMS4yLTguMiwzLjctMTEuNmMyLjUtMy43LDYtNi4zLDEwLjUtOC40QzI1Mi4xLDksMjU3LjIsOCwyNjMsOGM2LjIsMCwxMS44LDEsMTYuNSwzLjFzOC41LDQuOSwxMC45LDguOHMzLjksOC4yLDQuMSwxM2wtMTAuNywwLjhjLTAuNi01LjMtMi41LTkuMi01LjgtMTEuOHMtOC4yLTQuMS0xNC42LTQuMWMtNi44LDAtMTEuNSwxLjItMTQuOCwzLjdjLTMuMSwyLjQtNC41LDUuMy00LjUsOC44YzAsMy4xLDEsNS41LDMuMyw3LjNjMi4xLDEuOCw3LjYsMy45LDE2LjcsNS45YzkuMSwyLDE1LjMsMy43LDE4LjYsNS4zYzQuOSwyLjIsOC41LDUuMSwxMC45LDguNmMyLjMsMy41LDMuNSw3LjMsMy41LDExLjhjMCw0LjUtMS4yLDguNi0zLjksMTIuNGMtMi41LDMuOS02LjIsNi45LTExLjEsOS4yYy00LjcsMi4yLTEwLjEsMy4zLTE2LjEsMy4zYy03LjYsMC0xNC0xLTE5LjItMy4zYy01LjItMi4yLTkuMS01LjUtMTIuMi05LjhDMjMxLjYsNzUuOSwyMzAuMiw3MSwyMzAsNjUuNSIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNjMsOTRsMjYuNS03MS45YzAuNC0xLDEuOC0xLDIuMiwwTDIxOSw5NGgxMWwtMjkuOS03OS4yYy0xLjQtNC4xLTUuMS02LjgtOS40LTYuOGwwLDBjLTQuMSwwLTcuNywyLjctOS40LDYuOEwxNTIsOTRIMTYzeiIvPg0KPC9zdmc+DQo="/>
        </div>
      </div>
    </div>
  </section>

  <div class="wrapper wrapper--padding">
    <h1 class="h2">Payment Details</h1>
    <div class="brick brick--hero form-container__single">
      <div class="form__help">
        <h2 class="h4">Payment Reference:</h2>
        <p> __MERCHANT_REF__</p>
        <h2 class="h4">Amount:</h2>
        <p> __AMOUNT__ __CURRENCY__</p>
        <div class="form-item__error-message">__ERROR_MESSAGE__</div>
      </div>
    </div>

    <form action="?" autocomplete="off" class="payment-form" method="post">
      <div class="brick brick--hero form-container__single">
        <fieldset class="fieldset--plain">
          <legend>Credit / Debit card</legend>
          <div class="form-item form-item--compact">
            <label for="card_number">Card Number</label>
            <input id="card_number" name="card_number" maxlength="23" size="26" type="text" />
          </div>

          <div class="form-item form-item--compact">
            <label class="label--block" for="exp_month">Expiry Date</label>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <label for="exp_month" class="hide-element">Expiry Month</label>
              <div class="v5-form-item v5-form-pair">
                <select id="exp_month" name="exp_month">
                  <option value="01" selected="selected">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                </select>
              </div>
            </div>
            /&nbsp;
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <label class="hide-element" for="exp_year">Expiry Year</label>
              <div class="v5-form-item">
                <select id="exp_year" name="exp_year">
                  __CARD_EXPIRY_OPTIONS__
                </select>
              </div>
            </div>
          </div>

          <div class="form-item form-item--compact">
            <label class="label--block" for="cv2_number">Card Security Code</label>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <input id="cv2_number" name="cv2_number" size="6" type="text" />
            </div>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <img alt="" src="images/201306/securityImg.jpg" width="107" height="27"/>
            </div>
          </div>

          <div class="form-item form-item--compact">
            <label class="label--block" for="issue_number">Issue Number</label>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <input id="issue_number" name="issue_number" size="6" type="text" />
            </div>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <div class="form-item__description">(If Available)</div>
            </div>
          </div>
        </fieldset>
      </div>

      <input name="HPS_SessionID" type="hidden" value="__SESSION_ID__" />
      <input name="action" type="hidden" value="confirm" />

      <div class="form-item form-item__actions buttons">
        <div class="buttons__group">
          <a class="footer-link" href="#"><img alt="" border="0" height="41" src="images/201306/footerLogo.jpg" width="234" /></a>
        </div>
        <div class="buttons__group">
          <input class="button button--primary" id="continue" name="continue" type="submit" value="Continue" />
        </div>
      </div>
    </form>
  </div>
</body>
</html>

CVV only page

Full page example

Example Code

Payment Page

Payment Details

Payment Reference:

__MERCHANT_REF__

Amount:

__AMOUNT__ __CURRENCY__

__ERROR_MESSAGE__

Credit / Debit card

__CARD_NUM_HEADER__

__DYNAMIC_DATA_FIELD_1__

Expiry Date

Expiry Month

Expiry Year

Card Security Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta content="IE=edge" http-equiv="X-UA-Compatible">

  <title>Payment Page</title>

  <style>
    /*Standard styles*/
    * {
      box-sizing: border-box;
    }

    html {
      font-family: sans-serif;
      font-size: 87.5%;
      line-height: 1.71429em;
      overflow-y: scroll;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      background-color: #fff;
      color: #333;
      font-family: 'Arial', sans-serif;
      margin: 0;
    }

    .hide-element {
      height: 1px;
      left: -10000px;
      overflow: hidden;
      position: absolute;
      top: auto;
      width: 1px;
    }

    .wrapper {
      margin: 0 auto;
      max-width: 114.3em;
    }

    .wrapper--padding {
      overflow: hidden;
      padding: 0 0.85715em;
    }

    @media (min-width: 62em) {
      .wrapper--padding {
        max-width: calc(114.3em + 1.71429em * 2);
        padding: 0 1.71429em;
      }
    }

    @media (min-width: 119.14286em) {
      .wrapper--padding {
        max-width: 114.3em;
        padding: 0 0;
      }
    }

    .section--upper-header {
      padding: 17px 25px;
      padding: 1.21429rem 1.78571rem;
      position: relative;
    }

    @media all and (max-width: 62em) {
      .section--upper-header {
        padding: 14px 25px;
        padding: 1rem 1.78571rem;
      }
    }

    .logo {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo {
        display: block;
        height: 30px;
        height: 2.14286rem;
        margin: 0 auto;
        width: 98px;
        width: 7rem;
      }
    }

    .logo__image {
      height: 40px;
      height: 2.85714rem;
    }

    @media all and (max-width: 62em) {
      .logo__image {
        height: 30px;
        height: 2.14286rem;
      }
    }

    .logo__image > img {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo__image > img {
        height: 30px;
        height: 2.14286rem;
      }
    }

    h1,
    .h1 {
      font-size: 3.21429em;
      font-weight: bold;
      line-height: 1.06667em;
      margin: 0 0 0.3em 0;
    }

    h2,
    .h2 {
      font-size: 2.14286em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h3,
    .h3 {
      font-size: 1.71429em;
      font-weight: bold;
      line-height: 1.25em;
    }

    h4,
    .h4 {
      font-size: 1.42857em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0 0 0.42857em 0;
    }

    .form-container__single {
      margin: 1.28571em 0;
      position: relative;
    }
    @media all and (max-width: 720px) {
      .form-container__single {
        background: none;
        margin: 1.71429em auto;
        padding: 0;
      }
    }

    .form-container__single > * {
      max-width: 600px;
    }

    .brick--hero {
      background: #f2f2f2;
      padding: 1.71429em 50px;
    }

    @media all and (max-width: 720px) {
      .brick--hero {
        background: none;
        padding: 0.85714em;
      }
    }

    legend {
      display: table;
    }

    body:not(:-moz-handler-blocked) fieldset {
      display: table-cell;
    }

    fieldset,
    .fieldset {
      border: 1px solid #ddd;
      margin: 0 0 1.71429em 0;
      min-width: 0;
      padding: 1.71429em;
    }

    fieldset legend,
    .fieldset legend {
      border-color: #fff;
      border-style: solid;
      border-width: 0 5px;
      font-size: 1.42857em;
      font-weight: bold;
      line-height: 1.2em;
      margin-left: -5px;
      padding: 0;
    }

    .form-item {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      margin: 0.85714em 0;
      width: 100%;
    }

    .form-item > label,
    .form-item > fieldset > legend {
      display: inline-block;
      font-weight: bold;
      margin-bottom: 0.42857em;
    }

    .form-item > fieldset,
    .form-item > .fieldset {
      border: 0;
      margin: 0;
      padding: 0;
    }

    .form-item > fieldset legend,
    .form-item > .fieldset legend {
      border: 0;
      font-family: inherit;
      font-size: 1.14286em;
      line-height: 1.5em;
      line-height: inherit;
      margin-left: 0;
    }

    .form-item > fieldset .form-item,
    .form-item > .fieldset .form-item {
      margin-top: 0;
    }

    .form-item__description {
      color: #4c4c4c;
      float: left;
      line-height: 1.62857em;
      margin-top: 0.42857em;
      width: 100%;
    }

    .form-item__error-message {
      background-color: #ffe0e5;
      background-image: url('data:image/svg+xml;charset=utf-8,%EF%BB%BF%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024.00%2024.00%22%20enable-background%3D%22new%200%200%2024.00%2024.00%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23E00023%22%20fill-opacity%3D%221%22%20stroke-width%3D%220.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M%2012.9994%2C12.998L%2010.9994%2C12.998L%2010.9994%2C6.99805L%2012.9994%2C6.99805M%2012.9994%2C16.998L%2010.9994%2C16.998L%2010.9994%2C14.998L%2012.9994%2C14.998M%2011.9994%2C1.99805C%206.47639%2C1.99805%201.99939%2C6.47504%201.99939%2C11.998C%201.99939%2C17.5211%206.47639%2C21.998%2011.9994%2C21.998C%2017.5224%2C21.998%2021.9994%2C17.5211%2021.9994%2C11.998C%2021.9994%2C6.47504%2017.5224%2C1.99805%2011.9994%2C1.99805%20Z%20%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A');
      background-position: 0.42857em 0.47143em;
      background-repeat: no-repeat;
      background-size: 2.14286em;
      color: #333;
      display: block;
      float: left;
      margin-top: 0.42857em;
      padding: 0.85714em 0.85714em 0.85714em 3em;
      width: 100%;
    }

    .fieldset--plain {
      border: 0;
      padding: 0;
    }

    .fieldset--plain legend {
      border: 0;
      line-height: inherit;
      margin-left: 3px;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font: inherit;
      margin: 0;
    }

    input {
      line-height: normal;
    }

    textarea:focus,
    select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="checkbox"]:focus {
      border: 1px solid #1077d0;
      outline: 2px solid #1077d0;
    }

    input[type="reset"],
    input[type="button"],
    input[type="submit"] {
      -moz-appearance: none;
      -webkit-appearance: none;
    }

    textarea,
    select,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="color"],
    input[type="search"] {
      border: solid 1px #4c4c4c;
      border-radius: 2px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-family: inherit;
      font-size: 1.14286em;
      height: 2.57143em;
      line-height: 1.5em;
      padding: 0 0.64286em;
      text-transform: none;
      -moz-transition: box-shadow 0.1s ease-in-out;
      -o-transition: box-shadow 0.1s ease-in-out;
      -webkit-transition: box-shadow 0.1s ease-in-out;
      transition: box-shadow 0.1s ease-in-out;
      width: 100%;
    }

    .button {
      background-color: transparent;
      border: 2px solid #1077d0;
      border-radius: 100em;
      color: #1077d0;
      cursor: pointer;
      display: inline-block;
      font-family: inherit;
      font-size: 1em;
      line-height: 1.28571em;
      margin-bottom: 0.85714em;
      margin-top: 0.85714em;
      padding: 12px 18px;
      text-align: center;
      text-decoration: none;
      transition: all .3s;
    }

    .button a:link,
    .button a:visited,
    .button:link,
    .button:visited {
      color: #1077d0;
      text-decoration: none;
    }

    .button:hover,
    .button:focus {
      background-color: #1077d0;
      border-color: #1077d0;
      color: #fff;
      text-decoration: none;
    }

    .button:focus {
      outline: 0;
    }

    .button.disabled,
    .button:disabled {
      background-color: #e5e5e5;
      border: 0;
      color: #b2b2b2;
      cursor: not-allowed;
    }

    .button.disabled:after,
    .button:disabled:after {
      background-color: #e5e5e5;
    }

    .button--primary {
      background-color: #1077d0;
      border-color: #1077d0;
    }

    .button--primary,
    .button--primary:link,
    .button--primary:visited {
      color: #fff;
    }

    .button--primary:not([disabled]):hover,
    .button--primary:not([disabled]):focus {
      background-color: #0c5ca1;
      border-color: #0c5ca1;
    }

    label {
      word-wrap: break-word;
    }

    .buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      width: 100%;
    }

    .buttons .button {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }

    .buttons__group:first-of-type {
      border: 0;
      margin-left: -0.42857em;
    }

    .buttons__group:last-of-type {
      margin-right: -0.42857em;
    }

    .l-form-item-container {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      margin: 0.85714em 0;
      width: 100%;
    }

    .l-form-item-container--compact {
      margin: 0 0 0.42857em 0;
    }

    .l-form-item-container--compact + .l-form-item-container--compact {
      margin: 0.42857em 0;
    }

    .l-form-item-container--compact:last-of-type {
      margin-bottom: 0;
    }

    .l-form-item-container--block .v5-form-item {
      display: block;
    }

    .l-form-item-container--inline {
      padding-right: 0.42857em;
      width: auto;
    }

    .l-form-item-container--inline:last-of-type {
      padding-right: 0;
    }

    [class^="l-form-item-container__"] {
      border: 0;
      margin: 0;
      padding: 0;
    }

    /* Custom styles */
    select {
      padding: 0;
    }

    .label--block {
      display: block !important;
    }

    .buttons {
      align-items: center;
    }

    @media all and (max-width: 720px) {
      .buttons {
        padding: 0.85714em;
      }
    }

    .form-item__error-message {
      float: none;
    }

    .form-item__error-message:empty {
      display: none;
    }

    .footer-link {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }
  </style>
</head>
<body>
  <section class="section section--upper-header">
    <div class="wrapper">
      <div class="logo">
        <div class="logo__image">
          <img alt="UCAS" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnMiIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMTAwIg0KCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkJLnN0MHtmaWxsOiNFMDAwMjM7fQ0KCTwvc3R5bGU+DQoJPHBhdGggaWQ9InBhdGgyODM1XzJfIiBkPSJNNTcuMiw4SDY4djQ4LjhjMCw4LjYtMC44LDE1LjEtMi42LDIwLjJjLTEuOCw0LjktNS4zLDktMTAuMiwxMi4zQzUwLjMsOTIuNCw0My44LDk0LDM1LjksOTRjLTcuNywwLTE0LTEuNC0xOS4xLTQuMVM4LjMsODMuMiw2LjIsNzguMUM0LjIsNzMsMyw2NS44LDMsNTYuOFY4aDExdjQ4LjZjMCw3LjQsMC42LDEyLjcsMiwxNi4xczMuNyw2LjEsNi45LDhjMy4yLDEuOCw3LjMsMi45LDEyLDIuOWM4LjEsMCwxMy44LTEuOCwxNy4zLTUuNWMzLjUtMy43LDUuMS0xMC44LDUuMS0yMS40VjgiLz4NCgk8cGF0aCBpZD0icGF0aDI4MzciIGQ9Ik0xNDAuOSw2Mi42bDExLjEsMi45Yy0yLjMsOS02LjYsMTUuOS0xMi41LDIwLjZjLTYuMiw0LjUtMTMuNiw2LjktMjIuMiw2LjljLTksMC0xNi40LTEuOC0yMi01LjVzLTkuOS05LTEyLjktMTUuOUM3OS40LDY0LjcsNzgsNTcuMyw3OCw0OS40YzAtOC42LDEuNi0xNi4xLDQuOS0yMi42YzMuMy02LjUsOC0xMS40LDE0LjItMTQuN2M2LjItMy4zLDEyLjktNS4xLDIwLjMtNS4xYzguNCwwLDE1LjQsMiwyMS4yLDYuM2M1LjgsNC4zLDkuNywxMC4yLDExLjksMTcuN2wtMTAuOSwyLjRjLTEuOS02LjEtNC43LTEwLjQtOC40LTEzLjJjLTMuNy0yLjYtOC40LTQuMS0xNC00LjFjLTYuNCwwLTExLjksMS40LTE2LjIsNC41Yy00LjMsMy4xLTcuNCw3LjEtOSwxMi4yYy0xLjgsNS4xLTIuNywxMC40LTIuNywxNS45YzAsNy4xLDEsMTMuMiwzLjEsMTguNWMyLjEsNS4zLDUuMyw5LjIsOS43LDExLjhzOSwzLjksMTQuMiwzLjljNi4yLDAsMTEuNS0xLjgsMTUuOC01LjNDMTM2LjQsNzQuOSwxMzkuMyw2OS42LDE0MC45LDYyLjYiLz4NCgk8cGF0aCBpZD0icGF0aDI4NDEiIGQ9Ik0yMzAsNjUuNWwxMC41LTAuOGMwLjQsNC4xLDEuNiw3LjUsMy41LDEwLjJjMS45LDIuNiw0LjcsNC43LDguNSw2LjVjMy45LDEuNiw4LDIuNCwxMywyLjRjNC4zLDAsOC0wLjYsMTEuMy0xLjhjMy4zLTEuMiw1LjYtMi45LDcuMi01LjFjMS42LTIuMiwyLjUtNC41LDIuNS03LjFzLTAuOC00LjktMi4zLTYuN2MtMS40LTItNC4xLTMuNy03LjYtNC45Yy0yLjMtMC44LTcuMi0yLjItMTUtNC4xYy03LjYtMS44LTEzLjItMy43LTE2LjMtNS4xYy0zLjktMi03LTQuNy05LjEtNy43Yy0xLjktMy4xLTIuOS02LjUtMi45LTEwLjRjMC00LjMsMS4yLTguMiwzLjctMTEuNmMyLjUtMy43LDYtNi4zLDEwLjUtOC40QzI1Mi4xLDksMjU3LjIsOCwyNjMsOGM2LjIsMCwxMS44LDEsMTYuNSwzLjFzOC41LDQuOSwxMC45LDguOHMzLjksOC4yLDQuMSwxM2wtMTAuNywwLjhjLTAuNi01LjMtMi41LTkuMi01LjgtMTEuOHMtOC4yLTQuMS0xNC42LTQuMWMtNi44LDAtMTEuNSwxLjItMTQuOCwzLjdjLTMuMSwyLjQtNC41LDUuMy00LjUsOC44YzAsMy4xLDEsNS41LDMuMyw3LjNjMi4xLDEuOCw3LjYsMy45LDE2LjcsNS45YzkuMSwyLDE1LjMsMy43LDE4LjYsNS4zYzQuOSwyLjIsOC41LDUuMSwxMC45LDguNmMyLjMsMy41LDMuNSw3LjMsMy41LDExLjhjMCw0LjUtMS4yLDguNi0zLjksMTIuNGMtMi41LDMuOS02LjIsNi45LTExLjEsOS4yYy00LjcsMi4yLTEwLjEsMy4zLTE2LjEsMy4zYy03LjYsMC0xNC0xLTE5LjItMy4zYy01LjItMi4yLTkuMS01LjUtMTIuMi05LjhDMjMxLjYsNzUuOSwyMzAuMiw3MSwyMzAsNjUuNSIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNjMsOTRsMjYuNS03MS45YzAuNC0xLDEuOC0xLDIuMiwwTDIxOSw5NGgxMWwtMjkuOS03OS4yYy0xLjQtNC4xLTUuMS02LjgtOS40LTYuOGwwLDBjLTQuMSwwLTcuNywyLjctOS40LDYuOEwxNTIsOTRIMTYzeiIvPg0KPC9zdmc+DQo="/>
        </div>
      </div>
    </div>
  </section>

  <div class="wrapper wrapper--padding">
    <h1 class="h2">Payment Details</h1>
    <div class="brick brick--hero form-container__single">
      <div class="form__help">
        <h2 class="h4">Payment Reference:</h2>
        <p> __MERCHANT_REF__</p>
        <h2 class="h4">Amount:</h2>
        <p> __AMOUNT__ __CURRENCY__</p>
        <div class="form-item__error-message">__ERROR_MESSAGE__</div>
      </div>
    </div>

    <form action="?" autocomplete="off" class="payment-form" id="cardcapture" method="post">
      <div class="brick brick--hero form-container__single">
        <fieldset class="fieldset--plain">
          <legend>Credit / Debit card</legend>
          <p>__CARD_NUM_HEADER__</p>
          <p>__DYNAMIC_DATA_FIELD_1__</p>

          <div class="form-item form-item--compact">
            <label class="label--block" for="exp_month">Expiry Date</label>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <label for="exp_month" class="hide-element">Expiry Month</label>
              <div class="v5-form-item v5-form-pair">
                <select id="exp_month" name="exp_month">
                  <option value="01" selected="selected">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                </select>
              </div>
            </div>
            /&nbsp;
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <label class="hide-element" for="exp_year">Expiry Year</label>
              <div class="v5-form-item">
                <select id="exp_year" name="exp_year">
                  __CARD_EXPIRY_OPTIONS__
                </select>
              </div>
            </div>
          </div>

          <div class="form-item form-item--compact">
            <label class="label--block" for="cv2_number">Card Security Code</label>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <input id="cv2_number" name="cv2_number" size="6" type="text" />
            </div>
            <div class="l-form-item-container l-form-item-container--compact l-form-item-container--inline">
              <img alt="" src="images/201306/securityImg.jpg" width="107" height="27"/>
            </div>
          </div>
        </fieldset>
      </div>

      <input name="HPS_SessionID" type="hidden" value="__SESSION_ID__" />
      <input name="action" type="hidden" value="confirm" />

      <div class="form-item form-item__actions buttons">
        <div class="buttons__group">
          <a class="footer-link" href="#"><img alt="" border="0" height="41" src="images/201306/footerLogo.jpg" width="234" /></a>
        </div>
        <div class="buttons__group">
          <input class="button button--primary" id="continue" name="continue" type="submit" value="Continue" />
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Error page

Full page example

Example Code

Error page

Error located

We were unable to authorise your card payment, and have not been able to process your order.

For help with completing your order please call 0870 7274 762 and speak to one of our advisors.

Your order number is __MERCHANT_REF__. Please quote this number when speaking to us about
your order.

Go back

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta content="IE=edge" http-equiv="X-UA-Compatible">

  <title>Error page</title>

  <style>
    /*Standard styles*/
    * {
      box-sizing: border-box;
    }

    html {
      font-family: sans-serif;
      font-size: 87.5%;
      line-height: 1.71429em;
      overflow-y: scroll;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      background-color: #fff;
      color: #333;
      font-family: 'Arial', sans-serif;
      margin: 0;
    }

    .wrapper {
      margin: 0 auto;
      max-width: 114.3em;
    }

    .wrapper--padding {
      overflow: hidden;
      padding: 0 0.85715em;
    }

    @media (min-width: 62em) {
      .wrapper--padding {
        max-width: calc(114.3em + 1.71429em * 2);
        padding: 0 1.71429em;
      }
    }

    @media (min-width: 119.14286em) {
      .wrapper--padding {
        max-width: 114.3em;
        padding: 0 0;
      }
    }

    .section--upper-header {
      padding: 17px 25px;
      padding: 1.21429rem 1.78571rem;
      position: relative;
    }

    @media all and (max-width: 62em) {
      .section--upper-header {
        padding: 14px 25px;
        padding: 1rem 1.78571rem;
      }
    }

    .logo {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo {
        display: block;
        height: 30px;
        height: 2.14286rem;
        margin: 0 auto;
        width: 98px;
        width: 7rem;
      }
    }

    .logo__image {
      height: 40px;
      height: 2.85714rem;
    }

    @media all and (max-width: 62em) {
      .logo__image {
        height: 30px;
        height: 2.14286rem;
      }
    }

    .logo__image > img {
      height: 40px;
      height: 2.85714rem;
      width: auto;
    }

    @media all and (max-width: 62em) {
      .logo__image > img {
        height: 30px;
        height: 2.14286rem;
      }
    }

    h1,
    .h1 {
      font-size: 3.21429em;
      font-weight: bold;
      line-height: 1.06667em;
      margin: 0 0 0.3em 0;
    }

    h2,
    .h2 {
      font-size: 2.14286em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h3,
    .h3 {
      font-size: 1.71429em;
      font-weight: bold;
      line-height: 1.25em;
    }

    h4,
    .h4 {
      font-size: 1.42857em;
      font-weight: bold;
      line-height: 1.2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0 0 0.42857em 0;
    }

    legend {
      display: table;
    }

    body:not(:-moz-handler-blocked) fieldset {
      display: table-cell
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font: inherit;
      margin: 0;
    }

    input {
      line-height: normal;
    }

    textarea:focus,
    select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="checkbox"]:focus {
      border: 1px solid #1077d0;
      outline: 2px solid #1077d0;
    }

    input[type="reset"],
    input[type="button"],
    input[type="submit"] {
      -moz-appearance: none;
      -webkit-appearance: none;
    }

    textarea,
    select,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="color"],
    input[type="search"] {
      border: solid 1px #4c4c4c;
      border-radius: 2px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-family: inherit;
      font-size: 1.14286em;
      height: 2.57143em;
      line-height: 1.5em;
      padding: 0 0.64286em;
      text-transform: none;
      -moz-transition: box-shadow 0.1s ease-in-out;
      -o-transition: box-shadow 0.1s ease-in-out;
      -webkit-transition: box-shadow 0.1s ease-in-out;
      transition: box-shadow 0.1s ease-in-out;
      width: 100%;
    }

    .button {
      background-color: transparent;
      border: 2px solid #1077d0;
      border-radius: 100em;
      color: #1077d0;
      cursor: pointer;
      display: inline-block;
      font-family: inherit;
      font-size: 1em;
      line-height: 1.28571em;
      margin-bottom: 0.85714em;
      margin-top: 0.85714em;
      padding: 12px 18px;
      text-align: center;
      text-decoration: none;
      transition: all .3s;
    }

    .button a:link,
    .button a:visited,
    .button:link,
    .button:visited {
      color: #1077d0;
      text-decoration: none;
    }

    .button:hover,
    .button:focus {
      background-color: #1077d0;
      border-color: #1077d0;
      color: #fff;
      text-decoration: none;
    }

    .button:focus {
      outline: 0;
    }

    .button.disabled,
    .button:disabled {
      background-color: #e5e5e5;
      border: 0;
      color: #b2b2b2;
      cursor: not-allowed;
    }

    .button.disabled:after,
    .button:disabled:after {
      background-color: #e5e5e5;
    }

    .button--primary {
      background-color: #1077d0;
      border-color: #1077d0;
    }

    .button--primary,
    .button--primary:link,
    .button--primary:visited {
      color: #fff;
    }

    .button--primary:not([disabled]):hover,
    .button--primary:not([disabled]):focus {
      background-color: #0c5ca1;
      border-color: #0c5ca1;
    }

    label {
      word-wrap: break-word;
    }

    .buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      width: 100%;
    }

    .buttons .button {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }

    .buttons__group:first-of-type {
      border: 0;
      margin-left: -0.42857em;
    }

    .buttons__group:last-of-type {
      margin-right: -0.42857em;
    }

    .message {
      -webkit-align-items: center;
      align-items: center;
      background-position: 1.71429em 1.28571em;
      background-repeat: no-repeat;
      background-size: 2.57143em 2.57143em;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #fff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      margin: 0.85714em 0;
      min-height: 5.14286em;
      padding: 1.28571em 1.71429em 1.28571em 6em;
      position: relative;
      width: 100%;
    }

    .message a {
      color: #fff;
      text-decoration: underline;
    }

    .message ~ .message {
      margin-top: 0;
    }

    .message--content {
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
    }

    .message--content p:last-child {
      margin-bottom: 0;
    }

    .message--error {
      background-color: #e00023;
      background-image: url('data:image/svg+xml;charset=utf-8,%EF%BB%BF%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024.00%2024.00%22%20enable-background%3D%22new%200%200%2024.00%2024.00%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%20stroke-width%3D%220.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M%2012.9994%2C12.998L%2010.9994%2C12.998L%2010.9994%2C6.99805L%2012.9994%2C6.99805M%2012.9994%2C16.998L%2010.9994%2C16.998L%2010.9994%2C14.998L%2012.9994%2C14.998M%2011.9994%2C1.99805C%206.47639%2C1.99805%201.99939%2C6.47504%201.99939%2C11.998C%201.99939%2C17.5211%206.47639%2C21.998%2011.9994%2C21.998C%2017.5224%2C21.998%2021.9994%2C17.5211%2021.9994%2C11.998C%2021.9994%2C6.47504%2017.5224%2C1.99805%2011.9994%2C1.99805%20Z%20%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A');
      color: #fff;
    }

    /* Custom styles */
    .buttons {
      align-items: center;
    }

    @media all and (max-width: 720px) {
      .buttons {
        padding: 0.85714em;
      }
    }

    .footer-link {
      margin-left: 0.42857em;
      margin-right: 0.42857em;
    }
  </style>
</head>
<body>
  <section class="section section--upper-header">
    <div class="wrapper">
      <div class="logo">
        <div class="logo__image">
          <img alt="UCAS" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnMiIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMTAwIg0KCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkJLnN0MHtmaWxsOiNFMDAwMjM7fQ0KCTwvc3R5bGU+DQoJPHBhdGggaWQ9InBhdGgyODM1XzJfIiBkPSJNNTcuMiw4SDY4djQ4LjhjMCw4LjYtMC44LDE1LjEtMi42LDIwLjJjLTEuOCw0LjktNS4zLDktMTAuMiwxMi4zQzUwLjMsOTIuNCw0My44LDk0LDM1LjksOTRjLTcuNywwLTE0LTEuNC0xOS4xLTQuMVM4LjMsODMuMiw2LjIsNzguMUM0LjIsNzMsMyw2NS44LDMsNTYuOFY4aDExdjQ4LjZjMCw3LjQsMC42LDEyLjcsMiwxNi4xczMuNyw2LjEsNi45LDhjMy4yLDEuOCw3LjMsMi45LDEyLDIuOWM4LjEsMCwxMy44LTEuOCwxNy4zLTUuNWMzLjUtMy43LDUuMS0xMC44LDUuMS0yMS40VjgiLz4NCgk8cGF0aCBpZD0icGF0aDI4MzciIGQ9Ik0xNDAuOSw2Mi42bDExLjEsMi45Yy0yLjMsOS02LjYsMTUuOS0xMi41LDIwLjZjLTYuMiw0LjUtMTMuNiw2LjktMjIuMiw2LjljLTksMC0xNi40LTEuOC0yMi01LjVzLTkuOS05LTEyLjktMTUuOUM3OS40LDY0LjcsNzgsNTcuMyw3OCw0OS40YzAtOC42LDEuNi0xNi4xLDQuOS0yMi42YzMuMy02LjUsOC0xMS40LDE0LjItMTQuN2M2LjItMy4zLDEyLjktNS4xLDIwLjMtNS4xYzguNCwwLDE1LjQsMiwyMS4yLDYuM2M1LjgsNC4zLDkuNywxMC4yLDExLjksMTcuN2wtMTAuOSwyLjRjLTEuOS02LjEtNC43LTEwLjQtOC40LTEzLjJjLTMuNy0yLjYtOC40LTQuMS0xNC00LjFjLTYuNCwwLTExLjksMS40LTE2LjIsNC41Yy00LjMsMy4xLTcuNCw3LjEtOSwxMi4yYy0xLjgsNS4xLTIuNywxMC40LTIuNywxNS45YzAsNy4xLDEsMTMuMiwzLjEsMTguNWMyLjEsNS4zLDUuMyw5LjIsOS43LDExLjhzOSwzLjksMTQuMiwzLjljNi4yLDAsMTEuNS0xLjgsMTUuOC01LjNDMTM2LjQsNzQuOSwxMzkuMyw2OS42LDE0MC45LDYyLjYiLz4NCgk8cGF0aCBpZD0icGF0aDI4NDEiIGQ9Ik0yMzAsNjUuNWwxMC41LTAuOGMwLjQsNC4xLDEuNiw3LjUsMy41LDEwLjJjMS45LDIuNiw0LjcsNC43LDguNSw2LjVjMy45LDEuNiw4LDIuNCwxMywyLjRjNC4zLDAsOC0wLjYsMTEuMy0xLjhjMy4zLTEuMiw1LjYtMi45LDcuMi01LjFjMS42LTIuMiwyLjUtNC41LDIuNS03LjFzLTAuOC00LjktMi4zLTYuN2MtMS40LTItNC4xLTMuNy03LjYtNC45Yy0yLjMtMC44LTcuMi0yLjItMTUtNC4xYy03LjYtMS44LTEzLjItMy43LTE2LjMtNS4xYy0zLjktMi03LTQuNy05LjEtNy43Yy0xLjktMy4xLTIuOS02LjUtMi45LTEwLjRjMC00LjMsMS4yLTguMiwzLjctMTEuNmMyLjUtMy43LDYtNi4zLDEwLjUtOC40QzI1Mi4xLDksMjU3LjIsOCwyNjMsOGM2LjIsMCwxMS44LDEsMTYuNSwzLjFzOC41LDQuOSwxMC45LDguOHMzLjksOC4yLDQuMSwxM2wtMTAuNywwLjhjLTAuNi01LjMtMi41LTkuMi01LjgtMTEuOHMtOC4yLTQuMS0xNC42LTQuMWMtNi44LDAtMTEuNSwxLjItMTQuOCwzLjdjLTMuMSwyLjQtNC41LDUuMy00LjUsOC44YzAsMy4xLDEsNS41LDMuMyw3LjNjMi4xLDEuOCw3LjYsMy45LDE2LjcsNS45YzkuMSwyLDE1LjMsMy43LDE4LjYsNS4zYzQuOSwyLjIsOC41LDUuMSwxMC45LDguNmMyLjMsMy41LDMuNSw3LjMsMy41LDExLjhjMCw0LjUtMS4yLDguNi0zLjksMTIuNGMtMi41LDMuOS02LjIsNi45LTExLjEsOS4yYy00LjcsMi4yLTEwLjEsMy4zLTE2LjEsMy4zYy03LjYsMC0xNC0xLTE5LjItMy4zYy01LjItMi4yLTkuMS01LjUtMTIuMi05LjhDMjMxLjYsNzUuOSwyMzAuMiw3MSwyMzAsNjUuNSIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNjMsOTRsMjYuNS03MS45YzAuNC0xLDEuOC0xLDIuMiwwTDIxOSw5NGgxMWwtMjkuOS03OS4yYy0xLjQtNC4xLTUuMS02LjgtOS40LTYuOGwwLDBjLTQuMSwwLTcuNywyLjctOS40LDYuOEwxNTIsOTRIMTYzeiIvPg0KPC9zdmc+DQo="/>
        </div>
      </div>
    </div>
  </section>

  <div class="wrapper wrapper--padding">
    <h1 class="h2">Error located</h1>

    <div class="message message--error">
      <div class="message--content" role="alert">
        We were unable to authorise your card payment, and have not been able to process your order.<br /><br />
        For help with completing your order please call <strong>0870 7274 762</strong> and speak to one of our advisors.<br /><br />
        Your order number is <strong>__MERCHANT_REF__</strong>. Please quote this number when speaking to us about<br />
        your order.
      </div>
    </div>

    <div class="form-item form-item__actions buttons">
      <div class="buttons__group">
        <a class="footer-link" href="#"><img alt="" border="0" height="41" src="images/201306/footerLogo.jpg" width="234" /></a>
      </div>
      <div class="buttons__group">
        <a class="button button--primary" href="#">Go back</a>
      </div>
    </div>
  </div>
</body>
</html>

Study options, qualifications & careers

Search and apply for courses

Apprenticeships for post 16

Thinking about university?

Work experience

Applying to university

What and where to study

After applying

How to study

Tuition fees and student loans

Life at university

How to Apply

Loans and funding

Subjects

Teacher Training postgraduate

Apprenticeships

Gap year

Technical or professional qualifications

Internships

Finding a career

Getting a job

Interviews

Employment

Not sure what to do?

Popular topics

Popular subjects

All customisable pages

Capture payment page

Payment Details

Payment Reference:

Amount:

CVV only page

Payment Details

Payment Reference:

Amount:

Error page

Error located