Opencart extra field on payment select - opencart

Question

I'm trying to add Automatic Incasso to the webshop. Everything is al done, but right now, i want to tweak it.
The online test website is: g7.rjbtest.nl
I want that if you choose the automatic incasso at step 5, at the bottom before the continue button an field is added where you have to put your bank account number in. Now that is on step 6, but that isn't user friendly.
The question is simple. Is it possible and if it is, how, to get an extra field where the user must put there bankaccount number, on the same step as where they select the automatic incasso.
Even if you can only point me in the right direction, i would be verry happy.
EDIT
Here's the code i've got in /catelog/controller/paymemt/incasso.php
<?php
class ControllerPaymentIncasso extends Controller {
protected function index() {
$this -> language -> load('payment/incasso');
$this -> data['text_instruction'] = $this -> language -> get('text_instruction');
$this -> data['text_description'] = $this -> language -> get('text_description');
$this -> data['text_payment'] = $this -> language -> get('text_payment');
$this -> data['text_number_insert'] = $this -> language -> get('text_number_insert');
$this -> data['bankNumberError'] = $this -> language -> get('bankNumberError');
$this -> data['button_confirm'] = $this -> language -> get('button_confirm');
$this -> data['bank'] = nl2br($this -> config -> get('incasso_bank_' . $this -> config -> get('config_language_id')));
$this -> data['continue'] = $this -> url -> link('checkout/success');
if (file_exists(DIR_TEMPLATE . $this -> config -> get('config_template') . '/template/payment/incasso.tpl')) {
$this -> template = $this -> config -> get('config_template') . '/template/payment/incasso.tpl';
} else {
$this -> template = 'default/template/payment/incasso.tpl';
}
$this -> render();
}
public function confirm() {
$this -> language -> load('payment/incasso');
$this -> load -> model('checkout/order');
$this -> load -> model('payment/incasso');
$comment = $this -> language -> get('text_instruction') . "\n\n";
$comment .= $this -> config -> get('incasso_bank_' . $this -> config -> get('config_language_id')) . "\n\n";
$comment .= $this -> language -> get('text_payment');
$this -> model_checkout_order -> confirm($this -> session -> data['order_id'], $this -> config -> get('incasso_order_status_id'), $comment, true);
$rekNum = $_GET['rn'];
$this -> model_payment_incasso -> insertRekNum($this -> session -> data['order_id'], $rekNum);
}
}
?>
And in catelog/model/payment/incasso.php
<?php
class ModelPaymentIncasso extends Model {
public function getMethod($address, $total) {
$this -> language -> load('payment/incasso');
$query = $this -> db -> query("SELECT * FROM " . DB_PREFIX . "zone_to_geo_zone WHERE geo_zone_id = '" . (int)$this -> config -> get('incasso_geo_zone_id') . "' AND country_id = '" . (int)$address['country_id'] . "' AND (zone_id = '" . (int)$address['zone_id'] . "' OR zone_id = '0')");
if ($this -> config -> get('incasso_total') > 0 && $this -> config -> get('incasso_total') > $total) {
$status = false;
} elseif (!$this -> config -> get('incasso_geo_zone_id')) {
$status = true;
} elseif ($query -> num_rows) {
$status = true;
} else {
$status = false;
}
$method_data = array();
if ($status) {
$method_data = array('code' => 'incasso', 'title' => $this -> language -> get('text_title'), 'sort_order' => $this -> config -> get('incasso_sort_order'));
}
return $method_data;
}
public function insertRekNum($orderNum, $rekNum) {
$sql = "INSERT INTO `" . DB_PREFIX . "order_incasso` (
`order_id` ,
`iban`
)
VALUES (
'$orderNum', '$rekNum'
);";
$this -> db -> query($sql);
}
}
?>
And in catelog/view/theme/default/template/payment/incasso.tpl
<h2><?php echo $text_instruction; ?></h2>
<div class="content">
<p><?php echo $text_description; ?></p>
<p><?php echo $bank; ?></p>
<p><?php echo $text_payment; ?></p>
</div>
<div class="buttons">
<div class="left" >
<?php echo $text_number_insert; ?> <input type="text" value="" id="bankAccountNumber" />
</div>
<div class="right">
<input type="button" value="<?php echo $button_confirm; ?>" id="button-confirm" class="button" />
</div>
</div>
<script type="text/javascript">
$('#button-confirm').bind('click', function() {
var bankNumber = $("#bankAccountNumber").val();
if(bankNumber.trim() == ""){
alert("<?php echo $bankNumberError; ?>");
return false;
}
$.ajax({
type: 'get',
url: 'index.php?route=payment/incasso/confirm&rn=' + bankNumber,
success: function() {
location = '<?php echo $continue; ?>';
}
});
});
</script>

Answer 1

The only thing that comes to mind is:
to update the payment.tpl template and add the bank account input here after the payment options are rendered
add a JS code that will immediately hide the input or make it not display by inline CSS (I prefer JS prior to inline CSS)
add JS code that will handle payment radios change event and when the Incasso payment option is checked, display the bank account input or hide it otherwise
add the JS code from Your incasso.tpl that will store the bank account to a DB...
This should be the simplest solution...