Simplify Mollie components, for now only WooCommerce support.

js/src/wc-legacy-checkout.js

@@ -0,0 +1,147 @@
+/* global Mollie */
+/* eslint-env jquery */
+
+/**
+ * Pronamic Pay Mollie WooCommerce legacy checkout form controller class
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes
+ */
+class PronamicPayMollieWooCommerceLegacyCheckoutFormController {
+	/**
+	 * Construct Pronamic Pay Mollie WooCommerce lgeacy checkout form controller.
+	 *
+	 * @param {jQuery}      jQuery The jQuery library.
+	 * @param {HTMLElement} body   Body element.
+	 * @param {HTMLElement} form   WooCommerce legacy checkout form element.
+	 */
+	constructor( jQuery, body, form ) {
+		this.jQuery = jQuery;
+		this.body = body;
+		this.form = form;
+	}
+
+	/**
+	 * Setup.
+	 */
+	setup() {
+		this.jQuery( this.body ).on( 'init_checkout', () =>
+			this.initCheckout()
+		);
+	}
+
+	/**
+	 * Init checkout.
+	 *
+	 * @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L56-L59
+	 */
+	initCheckout() {
+		const cardElement = this.form.querySelector(
+			'.pronamic-pay-mollie-card-field'
+		);
+
+		if ( null === cardElement ) {
+			return;
+		}
+
+		const mollieProfileId = cardElement.dataset.mollieProfileId;
+		const mollieOptions = JSON.parse( cardElement.dataset.mollieOptions );
+
+		this.mollie = Mollie( mollieProfileId, mollieOptions );
+
+		this.checkoutPlaceOrderListener = () => this.checkoutPlaceOrder();
+
+		this.jQuery( this.form ).on(
+			'checkout_place_order',
+			this.checkoutPlaceOrderListener
+		);
+
+		this.jQuery( this.body ).on( 'updated_checkout', () =>
+			this.updatedCheckout()
+		);
+
+		this.mollieCardComponent = this.mollie.createComponent( 'card' );
+	}
+
+	/**
+	 * Updated checkout.
+	 *
+	 * @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L428-L429
+	 */
+	updatedCheckout() {
+		if ( this.cardElement ) {
+			this.mollieCardComponent.unmount();
+		}
+
+		this.cardElement = this.form.querySelector(
+			'.pronamic-pay-mollie-card-field'
+		);
+
+		if ( null === this.cardElement ) {
+			return;
+		}
+
+		this.mollieCardComponent.mount( this.cardElement );
+	}
+
+	/**
+	 * Checkout place order.
+	 *
+	 * @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L478-L480
+	 */
+	checkoutPlaceOrder() {
+		this.mollie
+			.createToken()
+			.then( ( result ) => this.processTokenResponse( result ) );
+
+		return false;
+	}
+
+	/**
+	 * Process token response.
+	 *
+	 * @param {Object} result Mollie create token repsonse object.
+	 */
+	processTokenResponse( result ) {
+		if ( result.error ) {
+			return;
+		}
+
+		const tokenElement = document.getElementById(
+			'pronamic_pay_mollie_card_token'
+		);
+
+		if ( tokenElement ) {
+			tokenElement.value = result.token;
+		}
+
+		this.jQuery( this.form ).off(
+			'checkout_place_order',
+			this.checkoutPlaceOrderListener
+		);
+
+		this.jQuery( this.form ).submit();
+	}
+}
+
+/**
+ * Initialization.
+ */
+( function () {
+	if ( ! jQuery ) {
+		return;
+	}
+
+	if ( ! document.forms.checkout ) {
+		return;
+	}
+
+	const controller =
+		new PronamicPayMollieWooCommerceLegacyCheckoutFormController(
+			jQuery,
+			document.body,
+			document.forms.checkout
+		);
+
+	controller.setup();
+} )();

package.json

@@ -42,7 +42,7 @@
 	"prettier": "@wordpress/prettier-config",
 	"scripts": {
 		"lint-js": "wp-scripts lint-js ./js/src",
-		"js-minify": "terser js/src/mollie.js --compress --mangle --output js/dist/mollie.min.js",
+		"js-minify": "terser js/src/wc-legacy-checkout.js --compress --mangle --output js/dist/wc-legacy-checkout.min.js",
 		"wp-env-setup": "npm-run-all wp-env-setup-*",
 		"wp-env-setup-mollie": "wp-env run cli wp config set MOLLIE_API_KEY $MOLLIE_API_KEY",
 		"wp-env-setup-buckaroo-website-key": "wp-env run cli wp config set BUCKAROO_WEBSITE_KEY $BUCKAROO_WEBSITE_KEY",

src/CardField.php

@@ -36,45 +36,20 @@ public function __construct( $id, Gateway $gateway ) {
 		$this->gateway = $gateway;
 	}
 
-	/**
-	 * Setup field.
-	 */
-	public function setup(): void {
-		\wp_register_script(
-			'mollie.js',
-			'https://js.mollie.com/v1/mollie.js',
-			[],
-			// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion -- Version is part of URL.
-			null,
-			false
-		);
-
-		$file = '../css/components.css';
-
-		\wp_register_style(
-			'pronamic-pay-mollie-components',
-			\plugins_url( $file, __FILE__ ),
-			[],
-			\hash_file( 'crc32b', __DIR__ . '/' . $file ),
-		);
-
-		$file = '../js/src/mollie.js';
-
-		\wp_register_script(
-			'pronamic-pay-mollie',
-			\plugins_url( $file, __FILE__ ),
-			[ 'mollie.js' ],
-			\hash_file( 'crc32b', __DIR__ . '/' . $file ),
-			true
-		);
-	}
-
 	/**
 	 * Get element.
 	 * 
 	 * @return Element|null
 	 */
 	protected function get_element() {
+		try {
+			$profile_id = $this->gateway->get_profile_id();
+		} catch ( \Exception $e ) {
+			return null;
+		}
+
+		$locale_transformer = new LocaleTransformer();
+
 		\wp_enqueue_script( 'pronamic-pay-mollie' );
 
 		\wp_enqueue_style( 'pronamic-pay-mollie' );
@@ -84,7 +59,14 @@ protected function get_element() {
 		$element->children[] = new Element(
 			'div',
 			[
-				'id' => 'card',
+				'class'                  => 'pronamic-pay-mollie-card-field',
+				'data-mollie-profile-id' => $profile_id,
+				'data-mollie-options'    => \wp_json_encode(
+					[
+						'locale'   => $locale_transformer->transform_wp_to_mollie( \get_locale() ),
+						'testmode' => ( 'test' === $this->gateway->get_mode() ),
+					]
+				),
 			]
 		); 
 
@@ -100,41 +82,6 @@ protected function get_element() {
 		return $element;
 	}
 
-	/**
-	 * Ouput.
-	 *
-	 * @return void
-	 */
-	public function output() {
-		parent::output();
-
-		try {
-			$profile_id = $this->gateway->get_profile_id();
-		} catch ( \Exception $e ) {
-			return;
-		}
-
-		$locale_transformer = new LocaleTransformer();
-
-		$data = [
-			'elementId' => $this->get_id(),
-			'profileId' => $profile_id,
-			'options'   => [
-				'locale'   => $locale_transformer->transform_wp_to_mollie( \get_locale() ),
-				'testmode' => 'test' === $this->gateway->get_mode(),
-			],
-			'mount'     => '#card',
-		];
-
-		?>
-		<script>
-			window.pronamicPayMollieFields = window.pronamicPayMollieFields || [];
-
-			window.pronamicPayMollieFields.push( <?php echo \wp_json_encode( $data ); ?> );
-		</script>
-		<?php
-	}
-
 	/**
 	 * Serialize to JSON.
 	 */

src/Integration.php

@@ -102,6 +102,9 @@ public function __construct( $args = [] ) {
 
 		$upgrades->add( new Install( null === $version ? '1.0.0' : $version ) );
 
+		// Scripts.
+		ScriptsController::instance()->setup();
+
 		/**
 		 * Admin
 		 */