Merge pull request #181 from commercetools/joey-koster-ct/SCC-2462-ad…

…d-bancontact-mobile-support

feat(enabler/processor): add Bancontact Mobile support

enabler/dev-utils/session.js

@@ -54,6 +54,7 @@ const getSessionId = async (cartId) => {
       "googlepay",
       "eps",
       "bancontactcard",
+      "bancontactmobile",
       "twint",
       "sepadirectdebit",
     ], // add here your allowed methods for development purposes

enabler/index.html

@@ -168,7 +168,7 @@ <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
                 });
 
                 if (builder.componentHasSubmit) {
-                  const methodsRequireMounting = ['eps', 'card', 'klarna_pay_now', 'klarna_pay_later', 'klarna_pay_overtime', 'bancontactcard', 'twint', 'ideal', 'sepadirectdebit'];
+                  const methodsRequireMounting = ['eps', 'card', 'klarna_pay_now', 'klarna_pay_later', 'klarna_pay_overtime', 'bancontactcard', 'bancontactmobile', 'twint', 'ideal', 'sepadirectdebit'];
                   if (methodsRequireMounting.includes(selectedValue)) {
                     component.mount("#container--external");
                   }

enabler/src/components/payment-methods/bancontactcard-mobile.ts

@@ -0,0 +1,61 @@
+import Core from "@adyen/adyen-web/dist/types/core/core";
+import {
+  ComponentOptions,
+  PaymentComponent,
+  PaymentMethod,
+} from "../../payment-enabler/payment-enabler";
+import {
+  AdyenBaseComponentBuilder,
+  DefaultAdyenComponent,
+  BaseOptions,
+} from "../base";
+
+/**
+ * Bancontact card component
+ *
+ * Configuration options:
+ * https://docs.adyen.com/payment-methods/bancontact/bancontact-mobile/web-component
+ */
+export class BancontactMobileBuilder extends AdyenBaseComponentBuilder {
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.bancontactmobile, baseOptions);
+  }
+
+  build(config: ComponentOptions): PaymentComponent {
+    const bancontactmobileComponent = new BancontactMobileComponent({
+      paymentMethod: this.paymentMethod,
+      adyenCheckout: this.adyenCheckout,
+      componentOptions: config,
+      sessionId: this.sessionId,
+      processorUrl: this.processorUrl,
+    });
+    bancontactmobileComponent.init();
+    return bancontactmobileComponent;
+  }
+}
+
+export class BancontactMobileComponent extends DefaultAdyenComponent {
+  constructor(opts: {
+    paymentMethod: PaymentMethod;
+    adyenCheckout: typeof Core;
+    componentOptions: ComponentOptions;
+    sessionId: string;
+    processorUrl: string;
+  }) {
+    super(opts);
+  }
+
+  init() {
+    this.component = this.adyenCheckout.create(this.paymentMethod, {
+      showPayButton: this.componentOptions.showPayButton,
+    });
+  }
+
+  showValidation() {
+    this.component.showValidation();
+  }
+
+  isValid() {
+    return this.component.isValid;
+  }
+}

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

@@ -18,6 +18,7 @@ import { EPSBuilder } from "../components/payment-methods/eps";
 import { BancontactCardBuilder } from "../components/payment-methods/bancontactcard";
 import { TwintBuilder } from "../components/payment-methods/twint";
 import { SepaBuilder } from "../components/payment-methods/sepadirectdebit";
+import { BancontactMobileBuilder } from "../components/payment-methods/bancontactcard-mobile";
 
 class AdyenInitError extends Error {
   sessionId: string;
@@ -102,8 +103,8 @@ export class AdyenPaymentEnabler implements PaymentEnabler {
                     data.action.type === "redirect"
                       ? "redirect"
                       : data.action.type === "threeDS2"
-                      ? "threeDS"
-                      : "other",
+                        ? "threeDS"
+                        : "other",
                 });
               component.handleAction(data.action);
             } else {
@@ -193,6 +194,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler {
       klarna_pay_overtime: KlarnaPayOverTimeBuilder,
       eps: EPSBuilder,
       bancontactcard: BancontactCardBuilder,
+      bancontactmobile: BancontactMobileBuilder,
       twint: TwintBuilder,
       sepadirectdebit: SepaBuilder,
     };

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

@@ -39,6 +39,7 @@ export enum PaymentMethod {
   klarna_pay_overtime = "klarna_account", // Pay over time
   eps = "eps",
   bancontactcard = "bcmc", // Bancontact card
+  bancontactmobile = "bcmc_mobile", // Bancontact mobile
   twint = "twint",
   sepadirectdebit = "sepadirectdebit"
 }

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

@@ -1,8 +1,9 @@
 /**
  * Specific configuration for payment methods that require special handling.
  * See https://docs.adyen.com/payment-methods for more information about each payment method.
+ *
+ * The key must point to the Adyen payment-method key structure.
  */
-
 export type PaymentMethodConfig = {
   [key: string]: {
     /**
@@ -13,7 +14,10 @@ export type PaymentMethodConfig = {
 };
 
 export const paymentMethodConfig: PaymentMethodConfig = {
-  bancontactcard: {
+  bcmc: {
+    supportSeparateCapture: false,
+  },
+  bcmc_mobile: {
     supportSeparateCapture: false,
   },
   eps: {

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

@@ -143,6 +143,8 @@ export const convertPaymentMethodToAdyenFormat = (paymentMethod: string): string
     return 'klarna_account';
   } else if (paymentMethod === 'bancontactcard') {
     return 'bcmc';
+  } else if (paymentMethod === 'bancontactmobile') {
+    return 'bcmc_mobile';
   } else {
     return paymentMethod;
   }
@@ -159,6 +161,8 @@ export const convertPaymentMethodFromAdyenFormat = (paymentMethod: string): stri
     return 'klarna_pay_overtime';
   } else if (paymentMethod === 'bcmc') {
     return 'bancontactcard';
+  } else if (paymentMethod === 'bcmc_mobile') {
+    return 'bancontactmobile';
   } else {
     return paymentMethod;
   }

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

@@ -34,6 +34,9 @@ export class PaymentComponentsConverter {
         {
           type: 'bancontactcard',
         },
+        {
+          type: 'bancontactmobile',
+        },
         {
           type: 'twint',
         },

processor/test/services/adyen-payment.service.spec.ts

@@ -98,7 +98,7 @@ describe('adyen-payment.service', () => {
 
   test('getSupportedPaymentComponents', async () => {
     const result: SupportedPaymentComponentsSchemaDTO = await paymentService.getSupportedPaymentComponents();
-    expect(result?.components).toHaveLength(12);
+    expect(result?.components).toHaveLength(13);
     expect(result?.components[0]?.type).toStrictEqual('card');
     expect(result?.components[1]?.type).toStrictEqual('ideal');
     expect(result?.components[2]?.type).toStrictEqual('paypal');
@@ -109,8 +109,9 @@ describe('adyen-payment.service', () => {
     expect(result?.components[7]?.type).toStrictEqual('klarna_pay_overtime');
     expect(result?.components[8]?.type).toStrictEqual('eps');
     expect(result?.components[9]?.type).toStrictEqual('bancontactcard');
-    expect(result?.components[10]?.type).toStrictEqual('twint');
-    expect(result?.components[11]?.type).toStrictEqual('sepadirectdebit');
+    expect(result?.components[10]?.type).toStrictEqual('bancontactmobile');
+    expect(result?.components[11]?.type).toStrictEqual('twint');
+    expect(result?.components[12]?.type).toStrictEqual('sepadirectdebit');
   });
 
   test('getStatus', async () => {