Create the custom payment gateway intregation in woocommerce - wordpress

Question

I am creating a custom gateway plugin for woocommerce for which I need the following workflow:
When customers click on the PLACE ORDER button on the checkout page
they need to be directed to the bank's hosted payment page to enter the card details and make the
payment. Once the payment is made, the bank sends the success/fail
response, and then only the order status is updated to
complete/canceled.
Also, the bank needs some information like merchant ID and other fields to process the payment.
I have created the plugin which adds hidden fields in the checkout page with necessary data that needs to be sent to the bank's payment page but I am having difficulties passing the data to the hosted payment page. Below is my full code
<?php
/*
** Check if Woocommerce is active
**
*/
if ( ! in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) return;
// create custom plugin settings menu
add_action('admin_menu', 'create_custom_menu');
function create_custom_menu() {
//create new top-level menu
add_menu_page('Plugin page Settings', 'Plugin Settings', 'administrator', __FILE__, 'plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
//call register settings function
add_action( 'admin_init', 'register_plugin_settings' );
}
function register_plugin_settings() {
//register our settings
register_setting( 'plugin-settings-group', 'shop_id' );
register_setting( 'plugin-settings-group', 'shared_secret' );
register_setting( 'plugin-settings-group', 'currency_code' );
}
function plugin_settings_page() {
?>
<div class="wrap">
<form method="post" action="options.php">
<?php settings_fields( 'plugin-settings-group' ); ?>
<?php do_settings_sections( 'plugin-settings-group' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">Shop ID</th>
<td><input type="text" name="shop_id" value="<?php echo esc_attr( get_option('shop_id') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Shared Secret</th>
<td><input type="text" name="shared_secret" value="<?php echo esc_attr( get_option('shared_secret') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Currency Code</th>
<td><input type="text" name="currency_code" value="<?php echo esc_attr( get_option('currency_code') ); ?>" disabled/><br></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php }
add_action( 'woocommerce_after_order_notes', 'add_custom_checkout_hidden_field' );
function add_custom_checkout_hidden_field( $checkout ) {
$shop_id = esc_attr( get_option('shop_id') );
$sharedSecret = esc_attr( get_option('shared_secret') );
$currency = "826";
// Output the hidden field
echo '<input type="hidden" name="shop_id" value="'.$shop_id.'" />
<input type="hidden" name="shop_id" value="'.$sharedSecret.'" />
<input type="hidden" name="shop_id" value="'.$currency.'" />
';
}
add_filter( 'woocommerce_payment_gateways', 'add_custom_gateway_class' );
function add_custom_gateway_class( $gateways ) {
$gateways[] = 'Custom_Gateway';
return $gateways;
}
add_action( 'plugins_loaded', 'plugin_init_gateway_class' );
function plugin_init_gateway_class() {
class Custom_Gateway extends WC_Payment_Gateway {
/**
* Class constructor
*/
public function __construct() {
$this->id = 'custom_gateway_id'; // payment gateway plugin ID
$this->icon = ''; // URL of the icon that will be displayed on checkout page near your gateway name
$this->has_fields = true; // in case you need a custom credit card form
$this->method_title = 'Custom Gateway';
$this->method_description = 'Description of Custom payment gateway'; // will be displayed on the options page
// Method with all the options fields
$this->init_form_fields();
// Load the settings.
$this->init_settings();
$this->title = $this->get_option( 'title' );
$this->description = $this->get_option( 'description' );
$this->enabled = $this->get_option( 'enabled' );
$this->shop_id = $this->get_option( 'shop_id' );
$this->test_mode = $this->get_option( 'test_mode' );
// This action hook saves the settings
add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
}
public function getDateTime(){
date_default_timezone_set('Europe/London');
$dateTime = date("Y:m:d-H:i:s");
global $dateTime;
return $dateTime;
}
public function createHash($chargetotal, $currency){
$storeId = $this->get_option( 'shop_id' );
$sharedSecret = $this->get_option( 'shared_secret' );
$stringToHash = $storeId.getDateTime().$chargetotal.$currency.$sharedSecret;
$ascii = bin2hex($stringToHash);
return hash("sha256", $ascii);
}
public function init_form_fields(){
$this->form_fields = array(
'enabled' => array(
'title' => 'Enable/Disable',
'label' => 'Enable Custom Gateway',
'type' => 'checkbox',
'description' => '',
'default' => 'no'
),
'title' => array(
'title' => 'Title',
'type' => 'text',
'description' => 'This controls the title which the user sees during checkout.',
'default' => 'Debit/Credit Card',
'desc_tip' => true,
),
'description' => array(
'title' => 'Description',
'type' => 'textarea',
'description' => 'This controls the description which the user sees during checkout.',
'default' => 'Pay with your debit/credit card.',
),
'test_mode' => array(
'title' => 'Test Mode',
'type' => 'checkbox',
'description' => 'Check this option to enable the test mode.',
'default' => 'yes',
)
);
}
public function process_payment( $order_id ) {
global $woocommerce;
$order = new WC_Order( $order_id );
$environment = $this->get_option( 'test_mode' );
if ($environment === 'yes') {
// TEST MODE
$redirect_url = 'https://mytesturl.com';
} else{
// PRODUCTION MODE
$redirect_url = 'https://myproductionurl.com';
}
return array(
'result' => 'success',
'redirect' => $redirect_url
);
}
}
}
Can someone assist me please, how can I pass the required data to the hosted payment page and update the order status once the response is received from the bank?