Integrated FPX with WC blocks.

includes/blocks/assets/js/build/omise_fpx.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => 'ad14494b770706f08d98935ee6998d63');

includes/blocks/assets/js/omise-fpx.js

@@ -0,0 +1,98 @@
+import {useEffect, useState, useRef} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { registerPaymentMethod } from '@woocommerce/blocks-registry';
+import { getSetting } from '@woocommerce/settings';
+
+const settings = getSetting( 'omise_fpx_data', {} )
+const label = decodeEntities( settings.title ) || 'No title set'
+const Label = ( props ) => {
+    const { PaymentMethodLabel } = props.components
+    return <PaymentMethodLabel text={ label } />
+}
+
+const FpxPaymentMethod = (props) => {
+    const {eventRegistration, emitResponse} = props;
+    const {onPaymentSetup} = eventRegistration;
+    const description = decodeEntities( settings.description || '' )
+    const { bank_list } = settings.data;
+    const noPaymentMethods = __( 'FPX is currently not available.', 'omise' );
+    const bankRef = useRef(null);
+
+    const onChange = (e) => {
+        bankRef.current = e.target.value
+    }
+
+    useEffect(() => {
+        const unsubscribe = onPaymentSetup(async () => {
+            if (!bankRef.current) {
+                return {type: emitResponse.responseTypes.ERROR, message: 'Select a bank'}
+            }
+            try {
+                return {
+                    type: emitResponse.responseTypes.SUCCESS,
+                    meta: {
+                        paymentMethodData: { "bank": bankRef.current }
+                    }
+                };
+            } catch (error) {
+                return {type: emitResponse.responseTypes.ERROR, message: error.message}
+            }
+        });
+        return () => unsubscribe();
+    }, [ onPaymentSetup ]);
+
+    return (<>
+        {description && <p>{description}</p>}
+        {
+            bank_list.length == 0
+                ? <p>{noPaymentMethods}</p>
+                : (
+                    <fieldset id="omise-form-installment">
+                        <div className="fpx-select-bank">
+                            <label htmlFor="fpx-select-bank">Select Bank</label>			  
+                            <select
+                                className="fpx-bank-logo default"
+                                id="fpx-select-bank"
+                                name="source[bank]"
+                                defaultValue=""
+                                onChange={onChange}
+                            >
+                                <option value="" disabled={true}>-- Select your option --</option>
+                                {bank_list.map(bank => (
+                                    <option	
+                                        key={bank['code']}
+                                        className={bank["code"]}
+                                        value={bank["code"]}
+                                        disabled={bank['active'] === "1" ? true : false}
+                                    >
+                                        {bank["name"]}
+                                        {(!bank['active']) && " (offline)" }
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className="fpx-terms-and-conditions-block">
+                            <span>By clicking on the <b>"Place Order"</b> button, you agree to FPX's 
+                                <a href="https://www.mepsfpx.com.my/FPXMain/termsAndConditions.jsp" target="_blank">
+                                    Terms and Conditions
+                                </a>
+                            </span>
+                        </div>
+                    </fieldset>
+                )
+        }
+    </>)
+}
+
+registerPaymentMethod( {
+    name: settings.name,
+    label: <Label />,
+    content: <FpxPaymentMethod />,
+    edit: <FpxPaymentMethod />,
+    canMakePayment: () => true,
+    ariaLabel: label,
+    supports: {
+        features: settings.supports,
+    }
+} )

includes/blocks/gateways/omise-block-fpx.php

@@ -1,10 +1,78 @@
 <?php
 
-class Omise_Block_Fpx extends Omise_Block_Apm {
+use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
+
+class Omise_Block_Fpx extends AbstractPaymentMethodType {
+	/**
+	 * The gateway instance.
+	 */
+	protected $gateway;
+
 	/**
 	 * Payment method name/id/slug.
 	 *
 	 * @var string
 	 */
 	protected $name = 'omise_fpx';
+
+	/**
+	 * Initializes the payment method type.
+	 */
+	public function initialize() {
+		$this->settings = get_option("woocommerce_{$this->name}_settings", []);
+		$gateways       = WC()->payment_gateways->payment_gateways();
+		$this->gateway  = $gateways[$this->name];
+	}
+
+	/**
+	 * Returns if this payment method should be active. If false, the scripts will not be enqueued.
+	 *
+	 * @return boolean
+	 */
+	public function is_active() {
+		return $this->gateway->is_available();
+	}
+
+	/**
+	 * Returns an array of scripts/handles to be registered for this payment method.
+	 *
+	 * @return array
+	 */
+	public function get_payment_method_script_handles() {
+		if (!wp_script_is("wc-{$this->name}-payments-blocks", 'enqueued')) {
+			$script_asset = require __DIR__ . "/../assets/js/build/{$this->name}.asset.php";
+			wp_register_script(
+				"wc-{$this->name}-payments-blocks",
+				plugin_dir_url(__DIR__) . "assets/js/build/{$this->name}.js",
+				$script_asset['dependencies'],
+				$script_asset['version'],
+				true
+			);
+
+			wp_enqueue_script("wc-{$this->name}-payments-blocks");
+		}
+
+		return ["wc-{$this->name}-payments-blocks"];
+	}
+
+	/**
+	 * Returns an array of key=>value pairs of data made available to the payment methods script.
+	 *
+	 * @return array
+	 */
+	public function get_payment_method_data() {
+		if (!is_checkout()) {
+			return [];
+		}
+
+		return [
+			'name'        => $this->name,
+			'title'       => $this->get_setting('title'),
+			'description' => $this->get_setting('description'),
+			'supports'    => array_filter($this->gateway->supports, [$this->gateway, 'supports']),
+			'data' => [
+				'bank_list' => $this->gateway->backend->get_available_banks()
+			]
+		];
+	}
 }

includes/blocks/gateways/omise-block-installment.php

@@ -3,7 +3,7 @@
 use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
 
 class Omise_Block_Installment extends AbstractPaymentMethodType {
-    /**
+	/**
 	 * The gateway instance.
 	 */
 	protected $gateway;
@@ -15,7 +15,7 @@ class Omise_Block_Installment extends AbstractPaymentMethodType {
 	 */
 	protected $name = 'omise_installment';
 
-    /**
+	/**
 	 * Initializes the payment method type.
 	 */
 	public function initialize() {

includes/blocks/omise-block-payments.php

@@ -27,6 +27,7 @@ class Omise_Block_Payments {
         Omise_Block_RabbitLinePay::class,
         Omise_Block_Mobile_Banking::class,
         Omise_Block_Installment::class,
+        Omise_Block_Fpx::class,
     ];
 
     function __construct($container) {

includes/gateway/class-omise-payment-fpx.php

@@ -64,8 +64,6 @@ public function init_form_fields()
 	public function payment_fields()
 	{
 		parent::payment_fields();
-		$currency   = get_woocommerce_currency();
-		$cart_total = WC()->cart->total;
 
 		Omise_Util::render_view(
 			'templates/payment/form-fpx.php',
@@ -80,14 +78,20 @@ public function payment_fields()
 	 */
 	public function charge($order_id, $order)
 	{
-		$requestData = $this->build_charge_request(
-			$order_id, $order, $this->source_type, $this->id . "_callback"
+		$request_data = $this->build_charge_request(
+			$order_id,
+			$order,
+			$this->source_type,
+			$this->id . "_callback"
 		);
-		$source_bank = isset($_POST['source']['bank']) ? $_POST['source']['bank'] : '';
-		$requestData['source'] = array_merge($requestData['source'], [
+		// Prior to WC blocks, we get bank in source array. With WC blocks, bank is now a string.
+		$source_bank = isset($_POST['bank'])
+			? $_POST['bank']
+			: (isset($_POST['source']) ? $_POST['source']['bank'] : '');
+		$request_data['source'] = array_merge($request_data['source'], [
 			'bank' => sanitize_text_field($source_bank),
 		]);
-		return OmiseCharge::create($requestData);
+		return OmiseCharge::create($request_data);
 	}
 
 	/**

includes/gateway/class-omise-payment-installment.php

@@ -122,7 +122,11 @@ public function charge($order_id, $order)
 	public function get_charge_request($order_id, $order)
 	{
 		// Prior to WC blocks, we get source as array. With WC blocks, source is now a string.
-		$source_type = is_array($_POST['source']) ? $_POST['source']['type'] : $_POST['source'];
+		$source_type = isset($_POST['source'])
+			? (is_array($_POST['source'])
+				? $_POST['source']['type']
+				: $_POST['source'])
+			: '';
 		$source_type = isset($source_type) ? $source_type : '';
 		$requestData = $this->build_charge_request(
 			$order_id,

omise-woocommerce.php

@@ -168,6 +168,7 @@ public function block_init()
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-rabbit-linepay.php';
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-mobilebanking.php';
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-installment.php';
+		require_once __DIR__ . '/includes/blocks/gateways/omise-block-fpx.php';
 		Omise_Block::init();
 	}
 

webpack.config.js

@@ -32,6 +32,7 @@ module.exports = {
 		'omise-one-click-apms': '/includes/blocks/assets/js/omise-one-click-apms.js',
 		'omise-mobilebanking': '/includes/blocks/assets/js/omise-mobilebanking.js',
 		'omise_installment': '/includes/blocks/assets/js/omise-installment.js',
+		'omise_fpx': '/includes/blocks/assets/js/omise-fpx.js',
 	},
 	output: {
 		path: path.resolve( __dirname, 'includes/blocks/assets/js/build' ),