Add block-based checkout support

[baka-san]

As of WooCommerce 8.3, Cart and Checkout Blocks have become enabled by default. I've been following this guide to try to add support for WooCommerce Checkout Blocks. A lot of progress has been made, but we are still facing issues getting our KomojuFields elements (from https://multipay.komoju.com/fields.js) to load, which means we don't have our iframes for payment methods like credit card and konbini. In previous versions, this was handled by WC_Gateway_Komoju_Single_Slug::payment_fields, but this is no longer working. There are probably various options to solve this, such as passing the html to the frontend or passing the required data to the frontend and constructing the html there (it can be passed in WC_Gateway_Komoju_Blocks::get_payment_method_data). Additionally, I suspect methods such as WC_Gateway_Komoju_Single_Slug::validate_fields, WC_Gateway_Komoju_Single_Slug::validate_fields, etc might also need to be reworked in order to be compatible with Block Checkout.

Useful simple example:
https://sevengits.com/woocommerce-checkout-blocks/

Stripe's implementation:
https://github.com/woocommerce/woocommerce-gateway-stripe/pull/1467/files

Other references:
https://developer.woo.com/2022/07/07/exposing-payment-options-in-the-checkout-block/

[baka-san]

@rramsden
Data is correctly being passed to the frontend via WC_Gateway_Komoju_Blocks#get_payment_method_data (see first screenshot), yet it still is saying that the PMs are incompatible with blocks. I've registered the PMs as compatible with blocks, so that's strange we're still getting that error and not another error. This person seems to have the same issue. Interestingly, window.wc.wcSettings.getSetting('incompatibleExtensions') shows nothing incompatible...🤔

[baka-san]

@rramsden I wonder if we don't need to update multipay fields.js as well. Something like

const settings = window.wc.wcSettings.getSetting( 'my_custom_gateway_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'My Custom Gateway', 'my_custom_gateway' );
const Content = () => {
    return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const Block_Gateway = {
    name: 'my_custom_gateway',
    label: label,
    content: Object( window.wp.element.createElement )( Content, null ),
    edit: Object( window.wp.element.createElement )( Content, null ),
    canMakePayment: () => true,
    ariaLabel: label,
    supports: {
        features: settings.supports,
    },
};
window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );

[baka-san]

Added this to a local copy of fields.js and the blocks compatibility warning disappeared. PMs are showing up, but they aren't formatted correctly and aren't selectable. Looks like we'll have to update multipay to be blocks compatible (and backwards compatible perhaps?)

function registerPaymentMethod(paymentMethod) {
    const settings = window.wc.wcSettings.getSetting(`${paymentMethod.title}_data`, {});
    const label = window.wp.htmlEntities.decodeEntities(settings.title) || window.wp.i18n.__(paymentMethod.title, paymentMethod.title);
    const Content = () => {
        return window.wp.htmlEntities.decodeEntities(settings.description || '');
    };
    const Block_Gateway = {
        name: paymentMethod.title,
        label: label,
        content: Object(window.wp.element.createElement)(Content, null),
        edit: Object(window.wp.element.createElement)(Content, null),
        canMakePayment: () => true,
        ariaLabel: label,
        supports: {
            features: settings.supports,
        },
    };
    window.wc.wcBlocksRegistry.registerPaymentMethod(Block_Gateway);
}

window.addEventListener('load', () => {
    paymentMethodData = window.wc.wcSettings.getSetting('paymentMethodData', {});
    Object.values(paymentMethodData).forEach((value) => {
        registerPaymentMethod(value);
    });
});