wip

pronamic · Dec 1, 2023 · 506d8ed · 506d8ed
1 parent 79861d5
commit 506d8ed
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/js/src/mollie.js b/js/src/mollie.js
@@ -1,41 +1,61 @@
 /* global Mollie */
 ( function () {
 	function init( data ) {
-		const mollie = Mollie( data.profileId, data.options );
+		const element = document.getElementById( data.elementId );
 
-		const tokenElement = document.getElementById( data.elementId );
-
-		if ( ! tokenElement ) {
+		if ( ! element ) {
 			throw new Error( 'No data token element.' );
 		}
 
-		if ( ! tokenElement.form ) {
+		if ( ! element.form ) {
 			throw new Error( 'Data token element not in form.' );
 		}
 
-		const form = tokenElement.form;
+		const form = element.form;
 
-		async function createToken( e ) {
-			e.preventDefault();
+		if ( ! form.mollie ) {
+			form.mollie = Mollie( data.profileId, data.options );
 
-			const { token } = await mollie.createToken();
+			async function createToken( e ) {
+				const tokenElement = document.getElementById( data.elementId );
 
-			if ( token ) {
-				tokenElement.value = token;
-			}
+				if ( ! tokenElement ) {
+					return;
+				}
+
+				e.preventDefault();
+
+				const { token, error } = await form.mollie.createToken();
+
+				if ( error ) {
+					console.log( error );
+				}
 
-			form.removeEventListener( 'submit', createToken );
+				if ( token ) {
+					tokenElement.value = token;
+				}
 
-			form.requestSubmit( e.submitter );
+				form.requestSubmit( e.submitter );
 
-			form.addEventListener( 'submit', createToken );
+				form.addEventListener( 'submit', createToken, {
+					once: true,
+				} );
+			}
+
+			form.addEventListener( 'submit', createToken, {
+				once: true,
+			} );
 		}
 
-		form.addEventListener( 'submit', createToken );
+		if ( form.mollieCardComponent ) {
+			form.mollieCardComponent.unmount();
+		}
 
-		const cardComponent = mollie.createComponent( 'card' );
+		if ( ! form.mollieCardComponent ) {
+			form.mollieCardComponent = form.mollie.createComponent( 'card' );
+		}
 
-		cardComponent.mount( data.mount );
+		form.mollieCardComponent.mount( data.mount );
 	}
 
 	window.pronamicPayMollieFields = window.pronamicPayMollieFields || [];

diff --git a/src/CardField.php b/src/CardField.php
@@ -58,7 +58,7 @@ public function setup(): void {
 			\hash_file( 'crc32b', __DIR__ . '/' . $file ),
 		);
 
-		$file = '../js/dist/mollie.min.js';
+		$file = '../js/src/mollie.js';
 
 		\wp_register_script(
 			'pronamic-pay-mollie',