MivaLearn
11/1/2021 - 7:45 PM

MivaPay Resolve Double Click CTA Issue

/**
 * MivaPay Double-Click Resolution
 *
 * Description: This snippet will prevent issues that occur from double-clicking the "Place Order" button on OPAY
 *
 * Instructions:
 *		1. Add `MivaPay.prototype.EnableDisableButtons` to the end of the `opay-mivapay.mvt` section.
 *		2. Add the `this.EnableDisableButtons();` function calls into the corresponding locations of the `Receive_Message` function and `Submit` function
 * 		3. Make sure your OPAY form has the id of "js-opay-form", or change that on line 48
*
 *			See here for the full context:
 * 			https://snippets.cacher.io/snippet/7c0db4f8b473cc037b3b
 */

MivaPay.prototype.Submit = function (callback) 
{
	...

	if (this.element_frame && !this.submitting) {
		...
		this.EnableDisableButtons();
	}
};
MivaPay.prototype.Receive_Message = function( event )
{
	// ...

	if ( event && ( typeof event.data === 'string' ) )
	{
		if ( event.data.indexOf( 'dimensions:' ) == 0 )
		{
			// ...
		}
		else if ( event.data.indexOf( 'response:' ) == 0 )
		{
			// ...
		}
		else if ( event.data.indexOf( 'error:' ) == 0 )
		{
			// ...
			this.EnableDisableButtons();
			// ...
		}
		else
		{
			this.EnableDisableButtons();
		}
	}
}


MivaPay.prototype.EnableDisableButtons = function()
{
	var self = this;
	self.checkout_buttons = document.querySelector('[data-hook="opay-form"]')?.querySelectorAll( '[type="submit"]' ) || [];
	if ( !self.checkout_buttons.length )
	{
		return;
	}
	var i;
	var enabled_disabled = self.submitting ? true : false;
	for( i = 0; i < self.checkout_buttons.length; i++) {
		if ( enabled_disabled )
		{
			self.checkout_buttons[ i ].setAttribute( 'disabled', enabled_disabled );
			self.checkout_buttons[ i ].value = 'Loading';
		} else 
		{
			self.checkout_buttons[ i ].removeAttribute( 'disabled' );
			self.checkout_buttons[ i ].value = 'Place Order';
		}
	}
}