feat(fpx): add support for fpx online banking Malaysia payment method (#476)

* feat(fpx): add support for fpx online banking Malaysia

* chore(enabler/processor): add mapping for adyen to ct payment method type

Author: joey-koster-ct

enabler/dev-utils/session.js

@@ -52,6 +52,7 @@ const getSessionId = async (cartId, isDropin = false) => {
         "blik",
         "card",
         "eps",
+        "fpx",
         "googlepay",
         "ideal",
         "klarna_billie",

enabler/index.html

@@ -310,6 +310,7 @@ <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
                     "blik",
                     "card",
                     "eps",
+                    "fpx",
                     "ideal",
                     "klarna_billie",
                     "klarna_pay_later",

enabler/src/components/base.ts

@@ -14,6 +14,7 @@ import {
   Vipps,
   OnlineBankingPL,
   AfterPay,
+  MolPayEBankingMY,
 } from "@adyen/adyen-web";
 import {
   ComponentOptions,
@@ -30,6 +31,7 @@ type AdyenComponent =
   | GooglePay
   | Klarna
   | EPS
+  | MolPayEBankingMY
   | Twint
   | Redirect
   | SepaDirectDebit

enabler/src/components/payment-methods/fpx.ts

@@ -0,0 +1,64 @@
+import {
+  ComponentOptions,
+  PaymentComponent,
+  PaymentMethod,
+} from "../../payment-enabler/payment-enabler";
+import { AdyenBaseComponentBuilder, DefaultAdyenComponent } from "../base";
+import { BaseOptions } from "../../payment-enabler/adyen-payment-enabler";
+import { MolPayEBankingMY, ICore } from "@adyen/adyen-web";
+
+/**
+ * fpx-online-banking-malaysia component
+ *
+ * Configuration options:
+ * https://docs.adyen.com/payment-methods/fpx-online-banking-malaysia/web-component/
+ */
+export class FPXBuilder extends AdyenBaseComponentBuilder {
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.fpx, baseOptions);
+  }
+
+  build(config: ComponentOptions): PaymentComponent {
+    const fpxComponent = new FPXComponent({
+      paymentMethod: this.paymentMethod,
+      adyenCheckout: this.adyenCheckout,
+      componentOptions: config,
+      sessionId: this.sessionId,
+      processorUrl: this.processorUrl,
+      paymentComponentConfigOverride:
+        this.resolvePaymentComponentConfigOverride(PaymentMethod.fpx),
+    });
+    fpxComponent.init();
+    return fpxComponent;
+  }
+}
+
+export class FPXComponent extends DefaultAdyenComponent {
+  constructor(opts: {
+    paymentMethod: PaymentMethod;
+    adyenCheckout: ICore;
+    componentOptions: ComponentOptions;
+    sessionId: string;
+    processorUrl: string;
+    paymentComponentConfigOverride: Record<string, any>;
+  }) {
+    super(opts);
+  }
+
+  init(): void {
+    this.component = new MolPayEBankingMY(this.adyenCheckout, {
+      // Override the default config with the one provided by the user
+      ...this.paymentComponentConfigOverride,
+      // Configuration that can not be overridden
+      showPayButton: this.componentOptions.showPayButton,
+    });
+  }
+
+  async showValidation() {
+    this.component.showValidation();
+  }
+
+  async isValid() {
+    return this.component.isValid;
+  }
+}

enabler/src/dropin/dropin-embedded.ts

@@ -31,6 +31,7 @@ import {
   Swish,
   Vipps,
   AfterPay,
+  MolPayEBankingMY,
 } from "@adyen/adyen-web";
 
 export class DropinEmbeddedBuilder implements PaymentDropinBuilder {
@@ -163,6 +164,7 @@ export class DropinComponents implements DropinComponent {
         Card,
         GooglePay,
         EPS,
+        MolPayEBankingMY,
         Klarna,
         OnlineBankingPL,
         PayPal,
@@ -262,6 +264,11 @@ export class DropinComponents implements DropinComponent {
           ],
           // Configuration that can not be overridden
         },
+        molpay_ebanking_fpx_MY: {
+          // Override the default config with the one provided by the user
+          ...this.dropinConfigOverride[getPaymentMethodType(PaymentMethod.fpx)],
+          // Configuration that can not be overridden
+        },
         onlineBanking_PL: {
           // Override the default config with the one provided by the user
           ...this.dropinConfigOverride[

enabler/src/payment-enabler/adyen-payment-enabler.ts

@@ -45,6 +45,7 @@ import { convertToAdyenLocale } from "../converters/locale.converter";
 import { AfterPayBuilder } from "../components/payment-methods/afterpay";
 import { ClearpayBuilder } from "../components/payment-methods/clearpay";
 import { StoredCardBuilder } from "../stored/stored-payment-methods/card";
+import { FPXBuilder } from "../components/payment-methods/fpx";
 
 class AdyenInitError extends Error {
   sessionId: string;
@@ -354,6 +355,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler {
       blik: BlikBuilder,
       card: CardBuilder,
       eps: EPSBuilder,
+      fpx: FPXBuilder,
       googlepay: GooglepayBuilder,
       ideal: IdealBuilder,
       klarna_billie: KlarnaBillieBuilder,

enabler/src/payment-enabler/payment-enabler.ts

@@ -46,6 +46,7 @@ export enum PaymentMethod {
   clearpay = "clearpay",
   dropin = "dropin",
   eps = "eps",
+  fpx = "molpay_ebanking_fpx_MY", // FPX Online banking Malaysia
   googlepay = "googlepay",
   ideal = "ideal",
   klarna_billie = "klarna_b2b", // Billie

processor/src/config/payment-method.config.ts

@@ -26,6 +26,9 @@ export const paymentMethodConfig: PaymentMethodConfig = {
   eps: {
     supportSeparateCapture: false,
   },
+  molpay_ebanking_fpx_MY: {
+    supportSeparateCapture: false,
+  },
   ideal: {
     supportSeparateCapture: false,
   },

processor/src/services/converters/helper.converter.ts

@@ -288,6 +288,7 @@ const PAYMENT_METHOD_TO_ADYEN_MAPPING: Record<string, string> = {
   klarna_pay_now: 'klarna_paynow',
   klarna_pay_overtime: 'klarna_account',
   przelewy24: GenericIssuerPaymentMethodDetails.TypeEnum.OnlineBankingPl,
+  fpx: 'molpay_ebanking_fpx_MY',
 };
 
 const ADYEN_TO_PAYMENT_METHOD_MAPPING: Record<string, string> = Object.entries(PAYMENT_METHOD_TO_ADYEN_MAPPING).reduce(

processor/src/services/converters/payment-components.converter.ts

@@ -30,6 +30,9 @@ export class PaymentComponentsConverter {
         {
           type: 'eps',
         },
+        {
+          type: 'fpx', // FPX Online banking Malaysia
+        },
         {
           type: 'googlepay',
         },