✅ Proposed Solution

...

After the user makes a payment request and closes the app, we need to ensure the user knows what happened to their order. This involves two developments: one is a new component to handle pending payments, and the other is a page to which the user will be redirected when attempting to view their there are pending payments available.

Create a reusable component to search for pending payment

On the main screen of the Whitelabel app, we will add a component similar to the order tracking feature. However, this component will specifically monitor pending payments that are still within the payment deadline.

The primary goal of this component is to provide clarity to users who may close the Whitelabel app during the payment process. It ensures that users do not mistakenly believe their payment has been canceled. Even if the user closes the app, we do not have the capability to cancel their payment request in the MBWay application.

This component will include a button labeled SHOW which will redirect the user to a new MBWay page, that will be detailed in the next topic.

...

Create Reusable Waiting Payment Page for order pending

This page reuses the same component as the mb payment details ensuring that users are familiar with the layout and can easily find the information they need. The primary objective of this page is to offer users comprehensive details about their pending MBWay payments, in scenarios where they might have closed the whitelabel app during the payment process. It helps clarify the payment status and guides users on completing their transactions successfully.

...

Backend

Create Payment Request

To create a payment request for MBWay, it is necessary to add a new endpoint called InitiatePayment that handles the initialization of a new payment. Unlike the GenerateCheckoutLink, which is used for other payment methods, in the case of MBWay, we will not generate a link. Instead, we will request Paycomet to create a payment request in the customer's MBWay account.

...

Create Reusable Waiting Payment Page for order pending

This page reuses the same component as the mb payment details ensuring that users are familiar with the layout and can easily find the information they need. The primary objective of this page is to offer users comprehensive details about their pending MBWay payments, in scenarios where they might have closed the whitelabel app during the payment process. It helps clarify the payment status and guides users on completing their transactions successfully.

...

Backend

Create Payment Request

To create a payment request for MBWay, it is necessary to add a new endpoint called InitiatePayment that handles the initialization of a new payment. Unlike the GenerateCheckoutLink, which is used for other payment methods, in the case of MBWay, we will not generate a link. Instead, we will request Paycomet to create a payment request in the customer's MBWay account.

...

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
Graphql/Fulfillment<-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 Polling>Graphql/Fulfillment:     Commit Order\n(SaveCommitOnly)
Frontend<-DB: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

...

Create a new feature flag

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

ref:

time: 1h

...

icon

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
);

export * from './mbway';

mbway: 'mbway',

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-2%3A1%3A-AddCreate-thea-new-payment-method-in-the-payment-state-and-structurefeature-flag

ref:

time: 8h1h

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-3%3A2%3A-Add-the-new-payment-method-in-the-payment-state-and-structure

ref:

time: 8h

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-4%3AAdd-Createthe-andnew-addmethod-ain-newpayment-method-in-payment-method-option-structure

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-5%3A-Adjust--account-payment-method-lists-to-deal-with-the-new-method

ref:

time: 2d

Adjust the receipt email to show the correct message for the new 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

ref:

time: 2h

Setup MBWay Payment

This is the second stage of the development tasks in the frontend. This phase involves the development of MBWay, where the screens and payment handling will be developed.

Create a mb way payment method

This is the first payment screen via MBWay. After selecting this payment method from the dropdown, the screen with the phone number input field should appear. This involves both the development of the screen and the validation and masking of the input.

...

export interface IPaycometMBWayFormProps {
  onResult: (outcome: OutcomeResult) => void;
  rbiOrderId: string;
}

export const PaycometMBWayForm = ({ rbiOrderId, onResult }:IPaycometMBWayFormProps) => {
  .....
  .....
  .....
  
  const handlePayment = () => {
    setIsLoading(true)
    handleInitiate();
  }
  
  return(
    {isWaitingPayment ? 
      <TimerForm/> :
      <CellphoneForm onClick={handlePayment}/>
    }
  )
}

Handle Fulfillment Initiate

This task focuses more on handling the information after the user enters the phone number and clicks "Continue." This stage involves communication with the "Initiate Payment" endpoint and returning the result. Additionally, this screen includes the invocation of the error modal.

...

...

structure

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-4%3A-Create-and-add-a-new-method-in-payment-method-option-structure

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-5%3A-Adjust--account-payment-method-lists-to-deal-with-the-new-method

ref:

time: 2d

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

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

ref:

time: 2h

Setup MBWay Payment

This is the second stage of the development tasks in the frontend. This phase involves the development of MBWay, where the screens and payment handling will be developed.

Create a mb way payment method

This is the first payment screen via MBWay. After selecting this payment method from the dropdown, the screen with the phone number input field should appear. This involves both the development of the screen and the validation and masking of the input.

...

export interface IPaycometMBWayFormProps {
  onResult: (outcome: OutcomeResult) => void;
  rbiOrderId: string;
}

export const PaycometMBWayForm = ({ rbiOrderId, onResult }:IPaycometMBWayFormProps) => {
  .....
  .....
  .....
  
  const handlePayment = () => {
    setIsLoading(true)
    handleInitiate();
  }
  
  return(
    {isWaitingPayment ? 
      <TimerForm/> :
      <CellphoneForm onClick={handlePayment}/>
    }
  )
}

Handle Fulfillment Initiate

This task focuses more on handling the information after the user enters the phone number and clicks "Continue." This stage involves communication with the "Initiate Payment" endpoint and returning the result. Additionally, this screen includes the invocation of the error modal.

handleInitiateMBWayPayment(() => {
  const result = initiatePayment({
    cellphone: input.cellphone,
    amount: order.amount,
    rbiOrderId: order.id,
  })
  
  if(response.graphqlErrors[0]){
    showModal(true);
    return
  }
  
  LocalStorage.setItem(
    StorageKeys.PENDING_PAYMENTS,
    JSON.stringify({orderId: order.id})
  );  
  
  isProcessingMbWayPayment(true);
  placeOrder(true); // it is necessary placeOrder to enable backend commit order
})

Handle Commit Order

This task covers the order commit, where we will add a new field called 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: {
    paymentRequestTimeLimit: 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.

...

export const routes = {
  pendingPage: 'pendingPage'
}

const MBWayPaymentPage: LazyRoute = lazyWithFallback(() => import('pages/mbway'));

return(
  ...
      <Route
        noIndex
        path={`${routes.pendingPage}/:orderId`}
        element={<pendingPage />}
      />
  ...
)

const pendingPage = () => {
  const result{ orderId } = initiatePaymentuseParams({);
  const MBWayPendingPayment cellphone: input.cellphone,= LocalStorage.getItem(StorageKeys.PENDING_PAYMENT);
  
 amount: order.amount,
 let data;
   rbiOrderId: order.id,if(MBWayPendingPayment && MBWayPendingPayment.id === orderId){
    data = MBWayPendingPayment;
  }) else {
    if(response.graphqlErrors[0]){
    showModal(truetry{
      const orders = GetUserOrders(); 
   return   }// map the order list to LocalStorage.setItem(show only the latest  StorageKeys.PENDING_PAYMENTS,information needed
    JSON.stringify({orderId: order.id}) data = )orders[0];
    }
  isProcessingMbWayPayment(true);}
  
  return placeOrder(true);
// it is necessary placeOrder to enable backend commit order
})

Handle Commit Order

This task covers the order commit, where we will add a new field called paymentRequestCreatedAt, 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 = {<MBWayComponent data={data} />
  )
}

Backend

Packages

This task aims to add mbway to the payment method enums

export declare enum PaymentMethodType {
    ...commitInput,
  payment: { MBWay = 'MBWay'
 paymentRequestCreatedAt: 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.

...

}

export declare enum RBIPaymentType {
    ...
    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 const routes = {
  pendingPage: 'pendingPage' enum CartPaymentType {
  ...
  MBWay = 'MBWay',
}

const MBWayPaymentPage: LazyRoute = lazyWithFallback(() => import('pages/mbway'));

return(export interface IPaycometPaymentSaleEvent extends IBaseSale {
  ...
  paymentRequestTimeLimit?: number;
}

paycometSale = <Route{
  ...
  paymentRequestTimeLimit: payment?.paymentRequestTimeLimit,
 noIndex};

private mapPaymentMethod(
    params: IPaycometPaymentSaleEvent,
  path={`${routes.pendingPage}/:orderId`}): {
    paymentMethodType: string;
   element={<pendingPage />}
 paymentMethod: string;
  } {
 />   ...
)

const pendingPage = () => {
  const { orderId } = useParams();
  const MBWayPendingPayment = LocalStorage.getItem(StorageKeys.PENDING_PAYMENT);
    return {
      paymentMethodType: params.paymentRequestTimeLimit &&
              let data;   if(MBWayPendingPayment && MBWayPendingPayment.id === orderId){     dataparams.paymentMethodType = MBWayPendingPayment;
  } else {? 'MBWay' : 'scheme',
       trypaymentMethod: JSON.stringify({
      const orders = GetUserOrders();type: 'scheme',
       // map the order list to show only the latest information needed
      data = orders[0];
    }
  }
  
  return (
    <MBWayComponent data={data} />
  )
}

Backend

Packages

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

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

Commit Order Graphql/Fulfillment

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

export interface IPaycometPaymentSaleEvent extends IBaseSale {
  ...
  paymentRequestCreatedAt?: number;
}subtype: 'onetime',
      }),
    };
  }

//PaymentType = MBWay;
//PaymentMethodBrand = null;

CommitOrderInput
  Input.payment.mbway = {
    cellphone: string
    createdAt: number;
  }

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

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.

paycometSaleexport enum =TypePayment {
  ...
  MBWay paymentRequestCreatedAt: payment.paymentRequestCreatedAt,= 'MBWay'
};

privateexport mapPaymentMethod(abstract class PspInitiateRequestDto {
 params: IPaycometPaymentSaleEvent, @AmountApiProperty()
  @IsOptional():
{
    paymentMethodType: string;
    paymentMethod: string;  @IsNumber()
  }public {amount: number;
  
...  @RbiOrderIdApiProperty()
  @IsString()
return { @IsNotEmpty()
  public rbiOrderId!: string;
paymentMethodType: params.paymentRequestCreatedAt &&
  @IsOptional()
  @IsNumber()
  public cellphone: number;
  
  @IsString()
  @IsNotEmpty()
  public method!: string;
}

public initiatePayment(
params.paymentMethodType ? 'MBWay' : @Headers('scheme',
      paymentMethod: JSON.stringify({region') region: string,
    @Body() pspInitiateRequestDto: PspInitiateRequestDto,
  type): 'scheme',Promise<ApiResult<unknown>> {
    if(pspInitiateRequestDto.method === TypePayment.MBWAY){
subtype: 'onetime',     return initiatePaymentMBWay(region, }pspInitiateRequestDto),;
    };
  }

//PaymentType = MBWay;
//PaymentMethodBrand = null;

CommitOrderInputreturn throw ApiErrorHttpException.createConflict(
     Input.payment.mbway = { new ApiError(501, 'Initiate Payment cellphone: string
request failed', 'initiatePayment'),
   createdAt: number);
  }

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

input PaycometCaptureContextInput {
  amount: number!
  rbiOrderId: String!
  cellphone: numberpublic async initiatePaymentMBWay(
    methodregion: string!,
 }  input InitiatePaymentInputrequest: {InitiateRequestDto,
  storeId): String!Promise<InitiateResult> {
 paymentMethodType: String!  try{
cybersourcePaSetup: CybersourcePaSetupInput   cybersourceCaptureContext: CybersourceCaptureContextInput const result paycometCaptureContext: PaycometCaptureContextInput
}

Create a new endpoint in Paycomet PSP Service

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

export abstract class PspInitiateRequestDto {
  @AmountApiProperty()
  @IsOptional()
  @IsNumber()
  public amount: number= this.createPaymentMBWayRequest(request);
      // Add log about payment initiation attempt
      if(result.errorCode === TransactionStatus.SUCCESSFUL){
        return this.handleSuccesful(region, request, result);
     @RbiOrderIdApiProperty() }
 @IsString()   @IsNotEmpty()   public rbiOrderId!: string;
  return this.handleFailure(region, request, result);
  @IsOptional()  } @IsNumbercatch(error){
  public cellphone: number;   
  @IsString()
  @IsNotEmpty()return this.handleFailure(region, request, error);
  public method!: string;}
}

Update the makePayment endpoint in Paycomet PSP Service

publicprivate initiatePayment(
    @Headers('region') region: string,
    @Body() pspInitiateRequestDto: PspInitiateRequestDto,
  ): Promise<ApiResult<unknown>> {isOneTimePayment(paymentMethod: PaymentMethod): paymentMethod is OneTimeSchemeDto {
return (
    if(pspInitiateRequestDtopaymentMethod.methodtype === TypePaymentPaymentMethodType.MBWAY){Scheme ||
     return initiatePaymentMBWay(region, pspInitiateRequestDto);
paymentMethod.type === PaymentMethodType.MBWay) &&
   }
    return throw ApiErrorHttpException.createConflict(
        new ApiError(501, 'Initiate Payment request failed', 'initiatePayment'),
  paymentMethod.subtype === SchemePaymentMethodType.OneTime
  );
 
}

public async initiatePaymentMBWaygetPaymentLinkId(
  ...
 region): string,TypePayment | undefined {
 request: InitiateRequestDto,
  ): Promise<InitiateResult>if (!methodId) {
    try{const paymentLink = transaction?.payment?.history.find(
   const result = this.createPaymentMBWayRequest(requestorder); =>
     // Add log about payment initiation attempt... ||
        if(resultorder.errorCodemethodId === TransactionStatusTransactionMethodId.SUCCESSFUL){APPLEPAYLINK ||
       return this.handleSuccesful(region, request, result);
order.methodId === TransactionMethodId.MBWAY ||,
    );
}
    methodId  return this.handleFailure(region, request, result= Number(paymentLink?.methodId);
  }
 } catch(error){
      return this.handleFailure(region, request, error);
    }
}

Update the order to include the time left to finish the MB Way Payment

...

}

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",
}

...