Mollie components

.wp-env.json

@@ -7,6 +7,7 @@
 		"https://downloads.wordpress.org/plugin/query-monitor.zip",
 		"https://downloads.wordpress.org/plugin/log-http-requests.zip",
 		"https://downloads.wordpress.org/plugin/one-time-login.zip",
+		"https://downloads.wordpress.org/plugin/woocommerce.zip",
 		"https://downloads.wordpress.org/plugin/wp-plugin-dependencies.zip"
 	],
 	"mappings": {

assets/dist/card-field.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => 'c1e1308986d4d65f5f9d');

assets/dist/wc-legacy-checkout.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => 'f465b8f2332f2d0a9b79');

assets/src/card-field.js

@@ -0,0 +1 @@
+import './card-field.scss';

assets/src/card-field.scss

@@ -0,0 +1,34 @@
+/**
+ * Card field style.
+ * 
+ * @link https://github.com/mollie/components-examples
+ */
+.pronamic-pay-mollie-card-field {
+	display: flex;
+
+	flex-flow: row wrap;
+
+	gap: 1em;
+
+	.mollie-card-component {
+		flex: 2 1 100%;
+
+		&--expiryDate,
+		&--verificationCode {
+			flex: 1 2 auto;
+		}
+
+		&__error {
+			color: #f00;
+		}
+	}
+
+	.mollie-component {
+		background: #fff;
+
+		border: 1px solid #767676;
+		border-radius: 3px;
+
+		padding: .5em;
+	}
+}

assets/src/wc-legacy-checkout.js

@@ -0,0 +1,161 @@
+/* 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 legacy 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 = ( event, wcCheckoutForm ) =>
+			this.checkoutPlaceOrder( event, wcCheckoutForm );
+
+		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
+	 * @param {jQuery.Event} event          A `jQuery.Event` object.
+	 * @param {Object}       wcCheckoutForm WooCommerce checkout form object.
+	 */
+	checkoutPlaceOrder( event, wcCheckoutForm ) {
+		if (
+			'pronamic_pay_credit_card' !== wcCheckoutForm.get_payment_method()
+		) {
+			return true;
+		}
+
+		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();
+
+		this.jQuery( this.form ).on(
+			'checkout_place_order',
+			this.checkoutPlaceOrderListener
+		);
+	}
+}
+
+/**
+ * Initialization.
+ */
+( function () {
+	if ( ! jQuery ) {
+		return;
+	}
+
+	if ( ! document.forms.checkout ) {
+		return;
+	}
+
+	const controller =
+		new PronamicPayMollieWooCommerceLegacyCheckoutFormController(
+			jQuery,
+			document.body,
+			document.forms.checkout
+		);
+
+	controller.setup();
+} )();

composer.json

@@ -37,6 +37,10 @@
 		}
 	},
 	"config": {
+		"platform": {
+			"php": "8.0"
+		},
+		"platform-check": false,
 		"sort-packages": true,
 		"allow-plugins": {
 			"composer/installers": true,

package.json

@@ -2,18 +2,6 @@
 	"name": "mollie",
 	"version": "4.8.1",
 	"description": "Mollie driver for the WordPress payment processing library.",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/wp-pay-gateways/mollie"
-	},
-	"keywords": [
-		"wordpress",
-		"wp",
-		"pay",
-		"mollie",
-		"gateway",
-		"pronamic"
-	],
 	"author": {
 		"name": "Pronamic",
 		"email": "[email protected]",
@@ -26,16 +14,37 @@
 			"url": "http://www.remcotolsma.nl/"
 		}
 	],
-	"license": "GPL-3.0",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"wp",
+		"pay",
+		"mollie",
+		"gateway",
+		"pronamic"
+	],
+	"homepage": "http://www.wp-pay.org/gateways/mollie/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/wp-pay-gateways/mollie"
+	},
 	"bugs": {
 		"url": "https://github.com/wp-pay-gateways/mollie/issues"
 	},
-	"homepage": "http://www.wp-pay.org/gateways/mollie/",
 	"devDependencies": {
 		"@wordpress/env": "^8.13.0",
-		"npm-run-all": "^4.1.5"
+		"@wordpress/prettier-config": "^3.4.0",
+		"@wordpress/scripts": "^26.18.0",
+		"npm-run-all": "^4.1.5",
+		"prettier": "npm:wp-prettier@^3.0.3"
 	},
+	"prettier": "@wordpress/prettier-config",
 	"scripts": {
+		"build": "wp-scripts build assets/src/card-field.js assets/src/wc-legacy-checkout.js --output-path=assets/dist",
+		"start": "wp-scripts start assets/src/card-field.js assets/src/wc-legacy-checkout.js --output-path=assets/dist",
+		"lint-js": "wp-scripts lint-js assets/src",
+		"lint:pkg-json": "wp-scripts lint-pkg-json",
+		"lint:style": "wp-scripts lint-style 'assets/src/**/*.scss'",
 		"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",

phpcs.xml.dist

@@ -3,6 +3,7 @@
 <ruleset name="WordPress Pay Mollie rules">
 	<file>.</file>
 
+	<exclude-pattern>assets/dist/*.asset.php</exclude-pattern>
 	<exclude-pattern>tests/bootstrap.php</exclude-pattern>
 	<exclude-pattern>tests/wp-config.php</exclude-pattern>
 

src/CardField.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * Mollie card field
+ *
+ * @author    Pronamic <[email protected]>
+ * @copyright 2005-2022 Pronamic
+ * @license   GPL-3.0-or-later
+ * @package   Pronamic\WordPress\Pay\Mollie
+ */
+
+namespace Pronamic\WordPress\Pay\Gateways\Mollie;
+
+use Pronamic\WordPress\Html\Element;
+use Pronamic\WordPress\Pay\Fields\Field;
+
+/**
+ * Mollie card field class
+ */
+class CardField extends Field {
+	/**
+	 * Gateway.
+	 * 
+	 * @var Gateway
+	 */
+	private $gateway;
+
+	/**
+	 * Construct card field.
+	 * 
+	 * @param string  $id      ID.
+	 * @param Gateway $gateway Gateway.
+	 */
+	public function __construct( $id, Gateway $gateway ) {
+		parent::__construct( $id );
+
+		$this->gateway = $gateway;
+	}
+
+	/**
+	 * 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' );
+
+		$element = new Element( 'div' );
+
+		$element->children[] = new Element(
+			'div',
+			[
+				'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() ),
+					]
+				),
+			]
+		); 
+
+		$element->children[] = new Element(
+			'input',
+			[
+				'id'   => $this->get_id(),
+				'name' => $this->get_id(),
+				'type' => 'hidden',
+			]
+		);
+
+		return $element;
+	}
+
+	/**
+	 * Serialize to JSON.
+	 * 
+	 * @return array
+	 */
+	public function jsonSerialize(): array {
+		$data = parent::jsonSerialize();
+
+		$data['type'] = 'html';
+
+		return $data;
+	}
+}