✅ Proposed Solution

...

...

title Create Payment Request

participant Frontend
participant Graphql/Fulfillment
participant DB
participant Payment Service
participant PSP Service
participant Paycomet External

Frontend->Graphql/Fulfillment: Initiate Payment
Graphql/Fulfillment->Payment Service: Initiate Payment
Payment Service->PSP Service:Initiate Payment
PSP Service->Paycomet External:Payments Endpoint
PSP Service<-Paycomet External:Result
Payment Service<-PSP Service:Result
Payment Service->DB: Update Order \n(PaymentRequestTimeLimit)
Payment Service<-DB: Order Updated
DB<-Payment Service: Create Payment in Payment Table
DB->Payment Service: Payment Created
Graphql/Fulfillment<-Payment Service:Result
Frontend<-Graphql/Fulfillment:Result

group Commit Order
Frontend->Frontend:Order >Graphql/Fulfillment:     Commit Order\n(SaveCommitOnly)
Frontend<-Graphql/Fulfillment: Commit Order Result
end

loop
Frontend->DB:Order Polling
Frontend<-DB:Order Result
end

For this communication, it is necessary to transmit two important pieces of information to the Paycomet service: the amount and the cellphone. The cellphone will be used by Paycomet to create a request in the user's MBWay account. Once the data reaches the Paycomet service, we will create a payload as mentioned below for the /payments endpoint of Paycomet.

...

Development

This section includes some code examples that will be developed. The examples serve as a guide for development, and good practices as well as testing should be adopted.

New payment method support

This first stage involves adding the main foundation for the new payment method. Since this task is repeated for all new payment methods, I will only provide the reference for each stage. This should be the first part of the frontend development; without it, it will not be possible to continue with the development of the subsequent screens.

...

Add new payment method icon

ref: https://github.com/rbilabs/ctg-components-library/pull/399 This task involves adding the icon to be used later by the whitelabel

import { SVGIconComponent } from '../types';

export const endered: SVGIconComponent = ({ title = '', ...props }) => (
//svg code
);

...

mbway: string;

ref: https://github.com/rbilabs/ctg-components-library/pull/399

Create a new feature flag

This task aims to create the feature flag in both launchdarkly and whitelabel

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-1%3A-Create-a-new-feature-flag

...

Add the new payment method in the payment state and structure

This task aims to create the mbway in payment state and structure

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-2%3A-Add-the-new-payment-method-in-the-payment-state-and-structure

...

Add the new method in payment-method structure and payment list

This task aims to add mbway to the payment dropdown

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-3%3A-Add-the-new-method-in-payment-method-structure

...

Adjust the receipt email to show the correct message for the new payment method

https://This task aims to adjust the email to include mbway as a payment method

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4449861673/Technical+refinement+-+Frontend#Task-6%3A-Adjust-the-receipt-email-to-show-the-correct-message-for-the-new-payment-method

...

This task covers the order commit, where we will add a new field called paymentRequestCreatedAt paymentRequestTimeLimit, which will be responsible for recording when the payment request was generated. This field will be used in the future on the "Waiting for Payment" screen. It is important to remember that saveCommitOnly must be enabled for the order commit in the backend to be activated.

commitInput = {
  ...commitInput,
  payment: {
    paymentRequestCreatedAtpaymentRequestTimeLimit: 1627383253213, //timestamp
    ...commitInput.paymemt
  }
}

Payment Pending Tracking

...

Tracking Page

This task involves handling the information for the "Waiting for Payment" screen when the payment request is made. Therefore, a generic screen should be developed that can be used by other future payment methods. Additionally, this screen should be displayed when the user closes the app and returns to the homepage, as long as there is still an active payment to be completed.

...

const pendingPage = () => {
  const { orderId } = useParams();
  const MBWayPendingPayment = LocalStorage.getItem(StorageKeys.PENDING_PAYMENT);
  
  let data;
  if(MBWayPendingPayment && MBWayPendingPayment.id === orderId){
    data = MBWayPendingPayment;
  } else {
    try{
      const orders = GetUserOrders(); 
      // map the order list to show only the latest information needed
      data = orders[0];
    }
  }
  
  return (
    <MBWayComponent data={data} />
  )
}

Backend

Packages

This task aims to add mbway to the payment method enums

export declare enum PaymentMethodType {
    ...
    MBWay = 'MBWay'
}

...

Commit Order Graphql/Fulfillment

This task aims to add mbway to the payment method enums and modify the commit order to accept this new payment method, in addition to including the new field: paymentRequestTimeLimit

export enum CartPaymentType {
  ...
  MBWay = 'MBWay',
}

export interface IPaycometPaymentSaleEvent extends IBaseSale {
  ...
  paymentRequestCreatedAtpaymentRequestTimeLimit?: number;
}

paycometSale = {
  ...
  paymentRequestCreatedAtpaymentRequestTimeLimit: payment?.paymentRequestCreatedAtpaymentRequestTimeLimit,
};

private mapPaymentMethod(
    params: IPaycometPaymentSaleEvent,
  ): {
    paymentMethodType: string;
    paymentMethod: string;
  } {
    ...

    return {
      paymentMethodType: params.paymentRequestCreatedAtpaymentRequestTimeLimit &&
                           params.paymentMethodType ? 'MBWay' : 'scheme',
      paymentMethod: JSON.stringify({
        type: 'scheme',
        subtype: 'onetime',
      }),
    };
  }

...

Create a new request to Graphql/Fulfillment to handle MB Way on Initiate Endpoint

Implementation example: https://github.com/rbilabs/intl-whitelabel-graphql/pull/1150/files This task aims to add the paycometCaptureContext field to the initiatePayment endpoint

input PaycometCaptureContextInput {
  amount: number!
  rbiOrderId: String!
  cellphone: number
  method: string!
}

input InitiatePaymentInput {
  storeId: String!
  paymentMethodType: String!
  cybersourcePaSetup: CybersourcePaSetupInput
  cybersourceCaptureContext: CybersourceCaptureContextInput
  paycometCaptureContext: PaycometCaptureContextInput
}

Implementation example: https://github.com/rbilabs/intl-whitelabel-graphql/pull/1150

Create a new endpoint in Paycomet PSP Service

This task aims to create the initiatePayment endpoint on paycomet psp and also its functionality.

export enum TypePayment {
  ...
  MBWay = 'MBWay'
}

...

public async initiatePaymentMBWay(
    region: string,
    request: InitiateRequestDto,
  ): Promise<InitiateResult> {
    try{
      const result = this.createPaymentMBWayRequest(request);
      // Add log about payment initiation attempt
      if(result.errorCode === TransactionStatus.SUCCESSFUL){
        return this.handleSuccesful(region, request, result);
      }
      return this.handleFailure(region, request, result);
    } catch(error){
      return this.handleFailure(region, request, error);
    }
}

Update the

...

makePayment endpoint in Paycomet PSP Service

private isOneTimePayment(paymentMethod: PaymentMethod): paymentMethod is OneTimeSchemeDto {
return (
    (paymentMethod.type === PaymentMethodType.Scheme ||
    paymentMethod.type === PaymentMethodType.MBWay) &&
    paymentMethod.subtype === SchemePaymentMethodType.OneTime
  );
}

public getPaymentLinkId(
  ...
): TypePayment | undefined {
  if (!methodId) {
    const paymentLink = transaction?.payment?.history.find(
      (order) =>
        ... ||
        order.methodId === TransactionMethodId.APPLEPAYLINK ||
        order.methodId === TransactionMethodId.MBWAY ||,
    );

    methodId = Number(paymentLink?.methodId);
  }
}

export enum TransactionMethodId {
  APPLEPAYLINK = 1,
  MBWAY = 38
}

Admin App

Adding mbway within the translation enum so that the Admin App knows this new payment method and selects the correct translation.

const paymentMethodType = order?.cart?.payment?.type;

if (paymentMethodType === 'MBWay') {
      return formatMessage({ id: paymentMethodBrandTranslationMap(paymentMethodType) });
    }
    
if (paymentMethodBrand) {
      return formatMessage({ id: paymentMethodBrandTranslationMap(paymentMethodBrand) });
    }

DOP

Adding mbway within the translation enum so that the DOP knows this new payment method and selects the correct translation

export const paymentMethodTranslation: Record<string, keyof LocalizedDictionary> = {
  MBWAY: `${pathPaymentTranslations}.mbway`,
};

Expeditor Tablet

Adding the mbway inside the enum so that the expeditor tablet knows this new payment method.

export enum PaymentMethod {
  ...,
  MBWAY = "MBWAY",
}

...