{% extends "layout.html" %}

{% block page_title %}
  Enter the amount you want to pay
{% endblock %}

{% block content %}

<main id="content" role="main">
  <div class="grid-row">
    <div class="column-two-thirds">

      <h1 class="heading-large">
         Enter the amount you want to pay
      </h1>

    <form action="card-payment">
      <div class="currency-input form-group">
        <label class="form-label-bold" for="payment-amount">
          Payment amount
          <span class="visually-hidden">in &pound;</span>
        </label>
        <div class="currency-input__inner">
          <span class="currency-input__inner__unit">&pound;</span>
          <input class="form-control" aria-label="Enter amount in pounds" name="payment-amount" data-non-numeric type="text" id="payment-amount" value="{{protoPaymentAmount}}" autofocus data-validate="required currency">
        </div>
      </div>
      <button type="submit" class="button">
        Proceed to payment
      </button>
      </div>
    </form>

    </div>
  </div>
</main>

{% endblock %}

{% extends "layout.html" %}

{% block page_title %}
  Enter the amount you want to pay
{% endblock %}

{% block content %}

<main id="content" role="main">
  <div class="grid-row">
    <div class="column-two-thirds">

      <h1 class="heading-large">
         Enter the amount you want to pay
      </h1>

    <form action="card-payment">
      
      <fieldset data-required data-error="Write your payment reference number on your form">
        
        <div class="heading-small error-legend"></div>

        <div class="currency-input form-group">
          <label class="form-label-bold" for="payment-amount">
            Payment amount
            <span class="visually-hidden">in &pound;</span>
          </label>
          <div class="currency-input__inner">
            <span class="currency-input__inner__unit">&pound;</span>
            <input class="form-control" aria-label="Enter amount in pounds" name="payment-amount" data-non-numeric type="text" id="payment-amount" value="{{protoPaymentAmount}}" autofocus data-validate="required currency">
          </div>
        </div>

        <button type="submit" class="button">
          Proceed to payment
        </button>
      </div>
        </fieldset>
    </form>

    </div>
  </div>
</main>

{% endblock %}

Add error message to payment amount page
Add error message to payment amount page
