How to get WooCommerce checkout page to wait while showing loading screen? - php

Question

I'm new and I'm trying to code a crypto payment gateway for WooCommerce by integrating with Metamask. When I press "Place Order" it could trigger Metamask Chrome Ext to pop but then I get "Error processing checkout. Please try again" on the checkout page. WC status log shows nothing. Debug logs nothing too as well as no error in browser console.
Anyway, how do I add a "loading" spinner on checkout page while the payment is processing?
add_filter( 'woocommerce_payment_gateways', 'add_custom_gateway_class' );
function add_custom_gateway_class( $gateways ) {
$gateways[] = 'WC_Crypto_Gateway';
return $gateways;
}
add_action( 'plugins_loaded', 'initialize_gateway_class' );
function initialize_gateway_class() {
class WC_Crypto_Gateway extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'crypto'; // payment gateway ID
$this->icon = ''; // payment gateway icon
$this->has_fields = true; // for custom credit card form
$this->title = __( 'Crypto Payment Gateway', 'text-domain' ); // vertical tab title
$this->method_title = __( 'Crypto Payment Gateway', 'text-domain' ); // payment method name
$this->method_description = __( 'To allow users to pay using cryptocurrencies such as ETH', 'text-domain' ); // payment method description
// load backend 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' );
// Action hook to saves the settings
if(is_admin()) {
add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
}
// Action hook to load custom JavaScript
add_action( 'wp_enqueue_scripts', array( $this, 'payment_gateway_scripts' ) );
}
public function init_form_fields() {
$this->form_fields = array(
'enabled' => array(
'title' => __( 'Enable/Disable', 'text-domain' ),
'label' => __( 'Enable Crypto Payment Gateway', 'text-domain' ),
'type' => 'checkbox',
'description' => __( 'This enable the gateway which allow to accept payment via cryptocurrency.', 'text-domain' ),
'default' => 'no',
'desc_tip' => true
),
'description' => array(
'title' => __( 'Description', 'text-domain' ),
'type' => 'textarea',
'description' => __( 'This controls the description which the user sees during checkout.', 'text-domain' ),
'default' => __( 'Pay with your cryptos such as ETH, BTC.', 'text-domain' ),
)
);
}
public function payment_fields() {
}
public function payment_gateway_scripts() {
global $woocommerce;
// process a token only on cart/checkout pages
if ( ! is_cart() && ! is_checkout() ) {
return;
}
// stop enqueue JS if payment gateway is disabled
if ( 'no' === $this->enabled ) {
return;
}
// stop enqueue JS if site without SSL
if ( ! is_ssl() ) {
return;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.5.3/ethers.umd.min.js"></script>
<?php
wp_register_script( 'woocommerce_pay_crypto', plugins_url( 'web3-connector.js', __FILE__ ) );
wp_enqueue_script( 'woocommerce_pay_crypto' );
}
public function process_payment( $order_id ) {
global $woocommerce;
// get order detailes
$order = wc_get_order( $order_id );
}
}
}
In my js, I basically call the below and disable the order button.
$("form.woocommerce-checkout").on("submit", async function (e) {
e.preventDefault();
//Get the payment total
const tokenAmount = document.getElementById("total-amount");
$("#place_order").html(
'<span class="woocommerce-checkout.processing blockUI.blockOverlay"></span>'
);
$("#place_order").attr("disabled", true);