Back to Layouts List

Archived Online Payments

Content 1

Start now

What you’ll need

  • Your reference number
  • The amount you need to pay

What you need to know:

  • You can make more than one payment in a single transaction
  • We accept most major credit and debit cards (Insert images of the cards here)
<header class="page-header">
  <div>
    <h1>Make a payment</h1>
  </div>
</header>
<div class="article-container group">
  <div class="content-block">
    <div class="inner">

      <p><a href="form_1" class="button button-get-started" role="button">Start now</a></p>

      <h2>What you’ll need</h2>
      <ul>
        <li>Your reference number</li>
        <li>The amount you need to pay</li>
      </ul>

      <h2>What you need to know:</h2>
      <ul>
        <li>You can make more than one payment in a single transaction</li>
        <li>We accept most major credit and debit cards (Insert images of the cards here)</li>
      </ul>


      <div class="content-legal">
        <h2>Data Protection Act 1998</h2>
        <p>Please note that your personal details supplied on this form will be held and/or computerised by Medway Council for the purposes of processing your payment. Some personal details will be disclosed to banks and other financial institutions in order to process the payment. Your personal details will be safeguarded and will not be divulged to any other individuals or organisations for any other purposes.</p>
      </div>

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

Form 1

What do you want to pay?

Where to find this

Your account number can be found in the top right corner of your bill.
If it includes any dashes or hyphens, leave these out

£
Account number
Where to find this

Your account number can be found in the top right corner of your bill
If it includes any dashes or hyphens, leave these out

£
Where to find this

Your invoice number is 8 digits long
It can be found on the right hand side of your invoice

£
Where to find this

Your invoice number is 18 digits long and always starts with the digits ‘16’
It can be found in the top right corner of your invoice
When you enter your invoice number, leave out any gaps

16
£
Where to find this

Your customer number is 12 digits long and always starts with the digits ‘1799’
It can be found in the top right corner of your service charge invoice

1799
£
Where to find this

Your membership number starts with the letters ‘MFTS HI’ and ends in four digits
It can be found in the top left corner of your fair trader invoice

MFTS HI
£
Where to find this

Your reference number is 18 digits long and always starts with the digits ‘16’
It can be found in the bottom left corner of your invoice
When you enter your reference number, leave out any gaps

16
£
Where to find this

Your serial number is 5 digits long
It can be found at the top of the fixed penalty notice

£
Where to find this

Your account number is 14 characters long

£
Where to find this

Your reference number is 10 characters long

£
£
£
<h1 class="heading-large">What do you want to pay?</h1>

<form action="form_2" method="post">
<div class="content-block">

    <div class="form-group">

        <label class="block-label" for="radio-2" data-target="council_tax_fields">
            <input id="radio-2" type="radio" name="online_payment" value="Council Tax">
            Council Tax
        </label>
        <div class="js-hidden" id="council_tax_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="council_tax_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number can be found in the top right corner of your bill. <br>
                            If it includes any dashes or hyphens, leave these out</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="council_tax_acct_no">
                </div>
                <div class="form-group">
                    <label for="council_tax_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="council_tax_amount" name="council_tax_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="business_rates" data-target="business_rates_fields">
            <input id="business_rates" type="radio" name="online_payment" value="Business Rates">
            Business Rates
        </label>
        <div class="js-hidden" id="business_rates_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <labelfor="business_rates_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number can be found in the top right corner of your bill <br>
                            If it includes any dashes or hyphens, leave these out</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="business_rates_acct_no">
                </div>
                <div class="form-group">
                    <label for="business_rates_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="business_rates_amount" name="business_rates_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="housing_benefit_overpayment" data-target="housing_benefit_overpayment_fields">
            <input id="housing_benefit_overpayment" type="radio" name="online_payment" value="Housing benefit overpayment">
            Housing benefit overpayment
        </label>
        <div class="js-hidden" id="housing_benefit_overpayment_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="housing_benefit_overpayment_inv_no">
                        <span class="form-label-bold">Invoice number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your invoice number is 8 digits long <br>
                            It can be found on the right hand side of your invoice</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="housing_benefit_overpayment_inv_no">
                </div>
                <div class="form-group">
                    <label for="housing_benefit_overpayment_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="housing_benefit_overpayment_amount" name="housing_benefit_overpayment_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="invoices_sundry_income" data-target="invoices_sundry_income_fields">
            <input id="invoices_sundry_income" type="radio" name="online_payment" value="Invoices">
            Invoices
        </label>
        <div class="js-hidden" id="invoices_sundry_income_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="invoices_inv_no">
                        <span class="form-label-bold">Invoice number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your invoice number is 18 digits long and always starts with the digits ‘16’ <br>
                            It can be found in the top right corner of your invoice <br>
                            When you enter your invoice number, leave out any gaps
                            </p>
                        </div>
                    </details>

                    <div class="form-split-inputs" data-grouped-inputs>
                        <span class="digit">16</span>
                        <input data-grouped-input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
                        <input data-grouped-input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
                    </div>
                </div>
                <div class="form-group">
                    <label for="invoices_inv_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="invoices_inv_amount" name="invoices_inv_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="service_charges" data-target="service_charges_fields">
            <input id="service_charges" type="radio" name="online_payment" value="Service charges">
            Service charges
        </label>
        <div class="js-hidden" id="service_charges_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="service_charge_cust_no">
                        <span class="form-label-bold">Customer number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your customer number is 12 digits long and always starts with the digits ‘1799’<br>
                            It can be found in the top right corner of your service charge invoice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <span class="digit">1799</span>
                        <input type="text" class="form-control" maxlength="8" size="16" id="service_charge_cust_no" name="service_charge_cust_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="service_charge_amount">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="service_charge_amount" name="service_charge_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="fair_trader_membership_fee" data-target="fair_trader_membership_fee_fields">
            <input id="fair_trader_membership_fee" type="radio" name="online_payment" value="Fair trader membership fee">
            Fair trader membership fee
        </label>
        <div class="js-hidden" id="fair_trader_membership_fee_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="fair_trader_mem_no">
                        <span class="form-label-bold">Membership number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your membership number starts with the letters ‘MFTS HI’ and ends in four digits<br>
                            It can be found in the top left corner of your fair trader invoice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <span class="digit">MFTS HI</span>
                        <input type="text" class="form-control" maxlength="4" size="8" id="fair_trader_mem_no" name="fair_trader_mem_no" name="fair_trader_mem_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="fair_trader_mem_fee">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="fair_trader_mem_fee" name="fair_trader_mem_fee">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="social_care_fee" data-target="social_care_fee_fields">
            <input id="social_care_fee" type="radio" name="online_payment" value="Social care fee">
            Social care fee
        </label>
        <div class="js-hidden" id="social_care_fee_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="social_care_ref">
                        <span class="form-label-bold">Reference number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your reference number is 18 digits long and always starts with the digits ‘16’<br>
                                It can be found in the bottom left corner of your invoice<br>
                                When you enter your reference number, leave out any gaps
                            </p>
                        </div>
                    </details>

                    <div class="form-split-inputs" data-grouped-inputs>
                        <span class="digit">16</span>
                        <input data-grouped-input type="text" class="form-control" maxlength="4" size="8" id="social_care_ref[ name="social_care_ref"1]" name="social_care_ref[1]">
                        <input data-grouped-input type="text" class="form-control" maxlength="10" size="20" id="social_care_ref[2]" name="social_care_ref[2]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="social_care_amount[1]">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="social_care_amount" name="social_care_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="fixed_penalty_notice" data-target="fixed_penalty_notice_fields">
            <input id="fixed_penalty_notice" type="radio" name="online_payment" value="Fixed Penalty Notice">
            Fixed Penalty Notice
        </label>
        <div class="js-hidden" id="fixed_penalty_notice_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="fpn_ser_no">
                        <span class="form-label-bold">Serial number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your serial number is 5 digits long<br>
                            It can be found at the top of the fixed penalty notice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <input class="form-control" maxlength="5" size="10" type="text" id="fpn_ser_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="fpn_amount">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="fpn_amount" name="fpn_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="housing_rent" data-target="housing_rent_fields">
            <input id="housing_rent" type="radio" name="online_payment" value="Housing rent">
            Housing rent
        </label>
        <div class="js-hidden" id="housing_rent_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="housing_rent_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number is 14 characters long</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="housing_rent_acct_no">
                </div>
                <div class="form-group">
                    <label for="housing_rent_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="housing_rent_amount" name="housing_rent_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="allotments" data-target="allotments_fields">
            <input id="allotments" type="radio" name="online_payment" value="Allotments">
            Allotments
        </label>
        <div class="js-hidden" id="allotments_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="allotments_ref_no">
                        <span class="form-label-bold">Reference number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your reference number is 10 characters long</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="allotments_ref_no">
                </div>
                <div class="form-group">
                    <label for="allotments_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <div class="form-split-inputs">
                            <span class="digit">£</span>
                            <input class="form-control" type="number" size="8" id="allotments_amount" name="allotments_amount">
                        </div>
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="school_transport" data-target="school_transport_fields">
            <input id="school_transport" type="radio" name="online_payment" value="School transport">
            School transport
        </label>
        <div class="js-hidden" id="school_transport_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="school_transport_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="school_transport_amount" name="school_transport_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="archives" data-target="archives_fields">
            <input id="archives" type="radio" name="online_payment" value="Archives">
            Archives
        </label>
        <div class="js-hidden" id="archives_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="archives_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="archives_amount" name="archives_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>

    </div>

</div>
</form>

Form 2

Basket

Fixed Penalty Notice

Serial number
098765

Amount (£)
£60.00

Invoice

Invoice number
16 12345 0601234567

Amount (£)
£145.00

Fair Trader Membership Fee

Membership number
MFTS HI 9999

Amount (£)
£240.00

<h1 class="heading-large">Basket</h1>

<form action="form_3" method="post">
<div class="content-block">

    <div class="form-group">

        <div class="data-bottom-right-button">
            <div class="data-text">
                <p>Fixed Penalty Notice</p>
                <p>
                    <span class="strong">Serial number</span><br>
                    098765
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £60.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
            </div>
        </div>

        <div class="data-bottom-right-button">
            <div class="data-text">
                <p>Invoice</p>
                <p>
                    <span class="strong">Invoice number</span><br>
                    16 12345 0601234567
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £145.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
            </div>
        </div>

        <div class="data-bottom-right-button">
            <div class="data-text">
                <p>Fair Trader Membership Fee</p>
                <p>
                    <span class="strong">Membership number</span><br>
                    MFTS HI 9999
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £240.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
            </div>
        </div>

    </div>

    <div class="form-group">
        <!-- This link should be a <button> -->
        <a class="button button-continue" href="form_1" type="submit">Add another payment</a>
    </div>

    <div class="form-group">
        <button class="button" type="submit">Proceed to Checkout</button>
    </div>

</div>
</form>

Form 3

Review your basket

Fixed Penalty Notice

Serial number
098765

Amount (£)
£60.00

Fair Trader Membership Fee

Membership number
MFTS HI 9999

Amount (£)
£240.00

Invoice

Invoice number
16 12345 0601234567

Amount (£)
£145.00

Total Amount

Amount (£)
£445.00

<h1 class="heading-large">Review your basket</h1>

<form action="form_4" method="post">
<div class="content-block">

    <div class="form-group">

        <div class="data-bottom-buttons">
            <div class="data-text">
                <p>Fixed Penalty Notice</p>
                <p>
                    <span class="strong">Serial number</span><br>
                    098765
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £60.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
                <span class="spacer"></span>
                <button class="button">Remove</button>
            </div>
        </div>

        <div class="data-bottom-buttons">
            <div class="data-text">
                <p>Fair Trader Membership Fee</p>
                <p>
                    <span class="strong">Membership number</span><br>
                    MFTS HI 9999
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £240.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
                <span class="spacer"></span>
                <button class="button">Remove</button>
            </div>
        </div>

        <div class="data-bottom-buttons">
            <div class="data-text">
                <p>Invoice</p>
                <p>
                    <span class="strong">Invoice number</span><br>
                    16 12345 0601234567
                </p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £145.00
                </p>
            </div>
            <div class="data-button">
                <button class="text-button">Change</button>
                <span class="spacer"></span>
                <button class="button">Remove</button>
            </div>
        </div>

        <div class="data-bottom-right-button">
            <div class="data-text">
                <p class="strong">Total Amount</p>
                <p>
                    <span class="strong">Amount</span> (£)<br>
                    £445.00
                </p>
                <div class="form-step-buttons">
                    <button class="button">Continue</button>
                </div>
            </div>
        </div>

    </div>

</div>
</form>

Form 4

Your details

We’ll only use this to send you a receipt
Is this your billing address?
Previous
<h1 class="heading-large">Your details</h1>

<form action="form_5" method="post">
<div class="content-block">

    <div class="form-group">
        <label class="form-label-bold" for="first_name">First Name</label>
        <input class="form-control" type="text" id="first_name" name="first_name">
    </div>

    <div class="form-group">
        <label class="form-label-bold" for="last_name">Last Name</label>
        <input class="form-control" type="text" id="last_name" name="last_name">
    </div>

    <div class="form-group">
        <label class="form-label-bold" for="email">Email Address <span class="unbold">(optional)</span></label>
        <span class="form-hint">We’ll only use this to send you a receipt</span>
        <input class="form-control" type="text" id="email" name="email">
    </div>

     <div class="form-group">
        <label class="form-label-bold" for="email2">Retype email address</label>
        <input class="form-control" type="text" id="email2" name="email2">
    </div>

    <fieldset class="postcode-search">
        <div class="form-group">
            <label class="form-label-bold" for="postcode">Postcode</label>
            <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

            <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
                <b data-postcode-search="postcode_term"></b>
                <button type="button" class="text-button" data-postcode-search="change">Change</button>
            </p>

            <div class="js-hidden" data-postcode-search="results">

                <div class="form-select">
                    <select class="form-select" name="postcode" id="postcode"></select>
                    <span class="arrow"></span>
                </div>

                <input type="hidden" name="result-saontext" data-result="saontext">
                <input type="hidden" name="result-paontext" data-result="paontext">
                <input type="hidden" name="result-paonrange" data-result="paonrange">
                <input type="hidden" name="result-streetname" data-result="streetname">
                <input type="hidden" name="result-locality" data-result="locality">
                <input type="hidden" name="result-town" data-result="town">
                <input type="hidden" name="result-county" data-result="county">
                <input type="hidden" name="result-postcode" data-result="postcode">
                <input type="hidden" name="result-uprn" data-result="uprn">
            </div>

            <div class="js-hidden" data-postcode-search="fallback">
                <p class="indent-error-message">Please type your address below.</p>

                <div class="form-group">
                    <label for="building-and-street" class="form-label-bold">Building and street</label>
                    <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
                    <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
                </div>

                <div class="form-group">
                    <label for="town-or-city" class="form-label-bold">Town or city</label>
                    <input type="text" class="form-control" id="town-or-city" name="town-or-city" data-address="town-or-city">
                </div>

                <div class="form-group">
                    <label for="county" class="form-label-bold">County <span class="unbold">(optional)</span></label>
                    <input type="text" class="form-control" id="county" name="county" data-address="county">
                </div>

                <div class="form-group">
                    <label for="postcode" class="form-label-bold">Postcode</label>
                    <input type="text" class="form-control" id="postcode" name="postcode" data-address="postcode">
                </div>
            </div>
        </div>

        <div class="form-group" data-postcode-search="button">
            <button class="button">Search for address</button>
        </div>
    </fieldset>

    <fieldset class="inline">
        <legend>
            <span class="form-label">
                Is this your billing address?
            </span>
        </legend>
        <div class="form-group form-group-compound">
            <label class="block-label" for="billing-address-yes">
            <input id="billing-address-yes" type="radio" name="billing-address" value="Yes">
                Yes
            </label>

            <label class="block-label" data-target="billing-address-fields" for="billing-address-no">
            <input id="billing-address-no" type="radio" name="billing-address" value="No">
                No
            </label>
        </div>

        <fieldset class="panel-indent js-hidden postcode-search" id="billing-address-fields">
            <div class="form-group">
                <label class="form-label-bold" for="postcode">Postcode</label>
                <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

                <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
                    <b data-postcode-search="postcode_term"></b>
                    <button type="button" class="text-button" data-postcode-search="change">Change</button>
                </p>

                <div class="js-hidden" data-postcode-search="results">

                    <div class="form-select">
                        <select class="form-select" name="postcode" id="postcode"></select>
                        <span class="arrow"></span>
                    </div>

                    <input type="hidden" name="result-saontext" data-result="saontext">
                    <input type="hidden" name="result-paontext" data-result="paontext">
                    <input type="hidden" name="result-paonrange" data-result="paonrange">
                    <input type="hidden" name="result-streetname" data-result="streetname">
                    <input type="hidden" name="result-locality" data-result="locality">
                    <input type="hidden" name="result-town" data-result="town">
                    <input type="hidden" name="result-county" data-result="county">
                    <input type="hidden" name="result-postcode" data-result="postcode">
                    <input type="hidden" name="result-uprn" data-result="uprn">
                </div>

                <div class="js-hidden" data-postcode-search="fallback">
                    <p class="indent-error-message">Please type your address below.</p>

                    <div class="form-group">
                        <label for="building-and-street" class="form-label-bold">Building and street</label>
                        <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
                        <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
                    </div>

                    <div class="form-group">
                        <label for="town-or-city" class="form-label-bold">Town or city</label>
                        <input type="text" class="form-control" id="town-or-city" name="town-or-city" data-address="town-or-city">
                    </div>

                    <div class="form-group">
                        <label for="county" class="form-label-bold">County <span class="unbold">(optional)</span></label>
                        <input type="text" class="form-control" id="county" name="county" data-address="county">
                    </div>

                    <div class="form-group">
                        <label for="postcode" class="form-label-bold">Postcode</label>
                        <input type="text" class="form-control" id="postcode" name="postcode" data-address="postcode">
                    </div>
                </div>
            </div>

            <div class="form-group" data-postcode-search="button">
                <button class="button">Search for address</button>
            </div>
        </fieldset>

    </fieldset>

    <div class="form-step-buttons">
        <a href="form_3" class="button">Previous</a>
        <button class="button">Continue</button>
    </div>

</div>
</form>

Form 5

Enter your card details

<h1 class="heading-large">Enter your card details</h1>

<form action="form_6" method="post">
<div class="content-block">

    <iframe id="card_details_frame" src="/public/HTML/card_details.html" frameborder="0" style="width: 100%; height: 850px; background: #fff;"></iframe>

</div>
</form>

Form 6

Enter your card details

3D Authentication

<h1 class="heading-large">Enter your card details</h1>
<h1 class="heading-large">3D Authentication</h1>

<form action="form_7" method="post">
<div class="content-block">

    <iframe id="secure_auth_frame" src="/public/HTML/authorisation.html" frameborder="0" style="width: 100%; height: 650px; background: #fff;"></iframe>

</div>
</form>

Form 7

Thank you, your payment has been made

Receipt Number: # 1234567890

Date: 2015-06-16 08:50:43

Card Name: VISADEBT
Card No.: xxxxxxxxxxxx9012
Auth Code: 354801
 
Total Amount: £445.00
 
Name: Jon Livingston
Billing Address: 28 STATION ROAD
STROOD
ROCHESTER
MEDWAY
ME2 4BG

If you provided a valid email address you will receive a receipt for this payment. If you were unable to provide a valid email address, please make a note of your receipt number for an future enquires.

<h1 class="heading-large">Thank you, your payment has been made</h1>

<div class="content-block">
    <p>Receipt Number: <b class="strong"># 1234567890</b></p>
    <p>Date: 2015-06-16 08:50:43</p>

    <table class="raw-table">
        <tr>
            <td>Card Name:</td>
            <td>VISADEBT</td>
        </tr>
        <tr>
            <td>Card No.:</td>
            <td>xxxxxxxxxxxx9012</td>
        </tr>
        <tr>
            <td>Auth Code:</td>
            <td>354801</td>
        </tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr>
            <td>Total Amount:</td>
            <td><span class="strong">£445.00</span></td>
        </tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr>
            <td>Name:</td>
            <td>Jon Livingston</td>
        </tr>
        <tr>
            <td>Billing Address:</td>
            <td>28 STATION ROAD<br>
                STROOD<br>
                ROCHESTER<br>
                MEDWAY<br>
                ME2 4BG
            </td>
        </tr>
    </table>

    <p>If you provided a valid email address you will receive a receipt for this payment. If you were unable to provide a valid email address, please make a note of your receipt number for an future enquires.</p>

    <div class="print-link">
        <a href="#" rel="nofollow" target="_blank">Print</a>
    </div>
</div>