Add support for Mollie Components

[rvdsteege]

From customer:

With the Pronamic plugin, is it possible to display the Mollie payment module directly in the form (in the page of the form) created via Formidable Form?

Mollie presents this direct integration option as "Mollie Components", I wanted to know if this option is enabled by default.

• https://docs.mollie.com/components/overview
• Related (as usage of online card payments will increase): the upcoming transition from Maestro to Debit Mastercard cards
  • https://www.adyen.com/nl_NL/blog/Debit-Mastercard-vervangt-Maestro--dit-is-wat-je-wil-weten

[rvdsteege]

PoC in branch https://github.com/pronamic/wp-pronamic-pay-mollie/tree/mollie-components

[rvdsteege]

I checked the current status of this issue, but as it requires explicit integration with extensions (to first retrieve the token before submitting the checkout form) it might be better suited for a dedicated plugin integrating Mollie with WooCommerce?

For example, code like this is not at home in this repository:

• https://github.com/pronamic/wp-pronamic-pay-mollie/blob/4ffd4abd6bf20665f41e863966673c4d702e134f/js/src/components.js#L147-L172

[remcotolsma]

Discussed this today with @rvdsteege @pronamic HQ and we think this is a nice feature for Pronamic Pay 9.7. The specific WooCommerce code must be able to be edited out, for example by using input.form.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_related_to_the_parent_form

We can also introduce a credit card field in core so that this field does not have to be constructed via JavaScript. We then only have to mount the Mollie components to the subfields of our core credit card field.

[remcotolsma]

It is more complex than expected, we have to look at the form handling per extension. For WooCommerce this can look like this:

var WooCommerceCheckout = {
    init: function() {
        jQuery( 'form.woocommerce-checkout' ).on( 'checkout_place_order', WooCommerceCheckout.checkout_place_order );
    },
    checkout_place_order: function() {
        var pronamicPayToken = PronamicPayToken( this );

        pronamicPayToken.then(
            function() {
                jQuery( 'form.woocommerce-checkout' ).off( 'checkout_place_order', WooCommerceCheckout.checkout_place_order );

                jQuery( 'form.woocommerce-checkout' ).submit();
            } 
        );

        return false;
    }
}

WooCommerceCheckout.init();

Per extension we need a way to halt the form submit, request the Mollie token, and resubmit the form. Should we use promises for this? We could use https://www.npmjs.com/package/@wordpress/hooks to allow extensions or gateways to hook in.

const pronamicPayTokenPromises = applyFilters( 'pronamicPayTokenPromises', [], this );

Promise.all( pronamicPayTokenPromises ).then(
    function() {
        // resubmit
    }
);

addFilter( 'pronamicPayTokenPromises', 'pronamic/wp-pronamic-pay-mollie', function( promises ) {
    promises.push( mollie.createToken() );
} );

Should we name it pronamicPayTokenPromises or more abstract pronamicPayBeforeSubmit?

[remcotolsma]

@rvdsteege I have now created something that I am somewhat satisfied with. For now only with support for the legacy WooCommerce checkout form. PR is open for review: https://github.com/pronamic/wp-pronamic-pay-mollie/pull/40. We still need to add some styling and maybe improve error handling? Let's discuss @pronamic HQ tomorrow?

https://github.com/pronamic/wp-pronamic-pay-mollie/blob/aa3e3d3561c17efe73d8b2d318a9b68bfaeec6fd/js/src/wc-legacy-checkout.js#L1-L147