Document Status | CLOSED |
---|---|
Document Owner(s) | |
Reviewers |
Context
Currently, when a user cancels a payment via a popup, the backend returns a generic error known as PAYMENT_ERROR. This results in a frontend message that does not accurately reflect the reason for the cancellation. The generic nature of this error prevents customization of the message, meaning that any changes would mislead users about the nature of other errors sharing the same code.
To improve user communication, it is crucial for the backend to return a specific cancellation code. This aligns with the new error detail model established in the RFC-056 and /wiki/spaces/IN/pages/4550328658.
Implementing this will ensure that users receive accurate messages regarding payment cancellations.
This will ensure that the correct message (backend to frontend - Graphql to Whitelabel) regarding payment cancellations is presented to the user.
β Proposed Solution
Instead of solely returning the generic PAYMENT_ERROR, the backend will provide a specific cancellation code.
This enhancement will allow the frontend to display more informative and contextually appropriate error messages, thus improving clarity and the overall user experience.
Backend
The cancel code will be 2.005
for all processing popup cancellations.
Paycomet Code | Error Code | Public Message (Logs/Amplitude) | Documentation |
---|---|---|---|
142 |
| Operation cancelled | Represents an error when the operation was cancelled.
|
1425 |
| Paypal transaction cancelled | Represents an error when the operation was cancelled with PAYPAL. |
1342 |
| Bizum transaction cancelled | Represents an error when the operation was cancelled with BIZUM. |
After the solution is approved, it will add the code error on: /wiki/spaces/RWLAPPwiki/pages/4858741214
The Strategies solution: /wiki/spaces/TRX/pages/4464050308
Waylet doesnβt have a cancel button and there is not a code error. But can be canceled the transaction by Waylet App or via Apple Pay, in these cases, will return the cancelation generic error 142.
Workflow
intl-packages
Create a new constant error:
path:
intl-packages/packages/psp-base/src/errors/psp-error-2/psp-error-2.ts
const GenericRbiPaymentErrorCodes = { ... OPERATION_CANCELLED_ERROR: '2.005', ... } as const;
Create a new class:
OperationCancelledError
generic class:path:
intl-packages/packages/psp-base/src/errors/psp-error-2/generic/operation-cancelled-error.ts
export class OperationCancelledError extends ExternalValidationError2 { ... constructor(params?: TPspError2) { const { httpStatus = HttpStatus.UNPROCESSABLE_ENTITY, message = 'Operation cannot be completed/continued as it has been cancelled.', metadata, responseBody, rbiErrorCode = RbiPaymentErrorCodes.OPERATION_CANCELLED_ERROR, } = params ?? {}; super({ ...params, httpStatus, message, metadata, rbiErrorCode, responseBody }); } }
intl-psp-paycomet-service
Mapper the errors on
PspErrorMap
path:
intl-psp-paycomet-service/src/errors/paycomet-error-map.ts
export const errorMap: PspErrorMap = new Map([ ... [ 142, { classNameRef: OperationCancelledError, info: 'Operation canceled.', }, ], ... [ 1342, { classNameRef: OperationCancelledError, info: 'Bizum transaction cancelled', }, ], ... [ 1425, { classNameRef: OperationCancelledError, info: 'Paypal transaction cancelled', }, ], ]);
Frontend
After backend changes, will need to handle the error.
Translation
Create a new keys to translate the error message:
{ ... "error.payment.2.005.title": "Purchase cancelled", "error.payment.2.005.cta": "Go Back to Checkout", "error.payment.2.005": "Your purchase has been successfully cancelled.", ... }
Change error validation
Change the validation on
isCanceledOperation
path:
intl-whitelabel-app/workspaces/frontend/src/hooks/use-paycomet-pay-link-popup/utils.ts
before:
export const isCanceledOperation = (e: MessageEvent) => { const isCanceledOperation = e.data && typeof e.data === 'object' && Object.values(CanceledCodeOperationType).includes(e.data?.body?.code); return !!(e.data === ClosedWindowType.CLOSED || isCancelation); };
after:
export const isCanceledOperation = (e: MessageEvent) => { const isCancelation = e.data && typeof e.data === 'object' && <FF_FLAG> && Object.values(CanceledCodeOperationType).includes(e.data?.body?.code); return !!(e.data === ClosedWindowType.CLOSED || isCancelation); };
Potential Challenges
N/A
π° Cost
Describe any additional cost this solution may imply.
ποΈ Configuration
It will be created a temporary feature flag: enable-cancellation-error-modal-on-payment-link
After the stories activation in prod, the feature flags will be removed.
π Metrics
N/A
ποΈ Delivery Plan
Link to the task or list of all the tasks required to deliver the solution, along with its progress.
π§βπ QA Plan
N/A
β οΈ Call-outs
Tip: Document here any improvement or discussion regarding the feature
Add Comment