...
Figma Link (still WIP): https://www.figma.com/design/wEeYkRHLwLdMJHKvQJOdd0/%5BIBFEC-1795%5D-Remove-Pre-filled-Name-On-Card-field?node-id=7913-1549
Technical refinement
| Info |
|---|
This change will be just to Paycomet (IBERIA) |
The payment page is one of the most critical steps in a customer's purchasing journey.
Any difficulty faced at this stage may result in errors or, even worse, dropouts, directly impacting conversion rates and customer satisfaction.
We recently carried out a technical analysis and identified points for improvement that can reduce possible errors and dropouts.
One of the points observed is the close button on the payment pop-up.
If the user chooses to close it, the payment page enters an infinite loading state, with no completion.
This behavior forces the customer to take drastic actions, such as closing the page and redoing the flow, which interrupts the purchase flow and can potentially cause frustration.
...
To solve this problem, we will recover the user's action of closing the popup and when this happens, they will be redirected to the cart page and a new OrderId will be generated and consequently a new TransactionId.
There is also the possibility of closing the popup inside the iframe (Bizum and Paypal), in this case, the PSP (Paycomet) returns an error code that will be used to validate this scenario and consequently, execute the same flow mentioned above.
| Info |
|---|
This change will be doing just the link payments (Bizum, Waylet and Paypal), being that, the cancel payment action inside of the iframe by the user, will be just (Bizum and Paypal). |
...
| title | Technical refinement |
|---|
...
We will recover the user action at the click moment to close the popup
path:
src/hooks/use-paycomet-pay-link-popup/use-paycomet-pay-link-popup.ts
There is the openWebModalmethod when our new code will be.
...
When the user clicks to popup’s close will generate the event: e.data = 'payment-pay-link-closed'
...
Inside this condition, we will create a redirect code:
navigate((routes.cart), { replace: true });
When the user clicks to cancel, inside the iframe, will generate the event: e.data = 'payment-pay-link-closed'
...
...
| Code Block | ||
|---|---|---|
| ||
{
"type": "payment-outcome",
"body": {
"type": "Failed",
"code": 1425,
"messages": {
"errorCode": 0,
"error": {
"amount": "1029",
"amountDisplay": "10,29 €",
"amountEur": "0.00",
"amountEurDisplay": "-",
"costumerCountry": "PT",
"currency": "EUR",
"errorCode": 1425,
"errorDescription": "PayPal - Operación cancelada por el usuario",
"feeEuro": "0",
"feePercent": "0",
"methodId": "10",
"operationId": 241447100,
"operationName": "Autorización",
"operationType": 1,
"order": "e281e9ec-3ae5-47d8-84d3-80858eb9eec0",
"originalIp": "89.114.65.195",
"paycometId": "241663819",
"response": "KO",
"state": 0,
"stateName": "Fallida",
"terminal": 51647,
"terminalCurrency": "EUR",
"terminalName": "www.burgerking.es - BANKSTORE (TEST)",
"timestamp": "20240619125924",
"user": "Zu2SJQBx",
"history": [
{
"amount": "1029",
"amountDisplay": "10,29 €",
"amountEur": "0.00",
"amountEurDisplay": "-",
"costumerCountry": "PT",
"currency": "EUR",
"errorCode": 1425,
"errorDescription": "PayPal - Operación cancelada por el usuario",
"feeEuro": "0",
"feePercent": "0",
"methodId": "10",
"operationId": 241447100,
"operationName": "Autorización",
"operationType": 1,
"order": "e281e9ec-3ae5-47d8-84d3-80858eb9eec0",
"originalIp": "89.114.65.195",
"paycometId": "241663819",
"productDescription": "Menu The Cheesy Onion Large",
"response": "KO",
"state": 0,
"stateName": "Fallida",
"terminal": 51647,
"terminalCurrency": "EUR",
"terminalName": "www.burgerking.es - BANKSTORE (TEST)",
"timestamp": "20240619125924",
"user": "Zu2SJQBx"
}
]
}
}
}
} |
To validate when the user cancels the payment in the same condition above, we will validate the code:
e.data?.body?.codeCancel code number:
Bizum:
1342Paypal:
1425
...
Create a new logger code to send to mParticle when the user cancels or closes the iframe.
Another point of improvement found is the button to close the payments page.
This button remains enabled throughout the transaction process, which may allow the user to cancel (by clicking this button the user is redirected to the cart) the purchase for any reason, a simple delay in payment processing, or any other non-apparent reason.
...
This may leave the impression that the payment has been canceled or the impression that the payment has been made but the order has not, which no longer occurs due to account of the new changes to the intl-transactions team.
This change is more focused on the user experience since ghost order errors have already been resolved as mentioned above.
With these changes, we hope to not only minimize errors and dropouts but also provide a more fluid and satisfactory purchasing process for customers.
| Info |
|---|
This change will be to all payment methods by Paycomet |
Expand
| title | Technical refinement |
|---|
To remove the close page button, we will need to add a new attribute disableClose={isLoading} on StyledFullPageScreen component.
src/pages/cart/payment/order-payment/paycomet-hosted-page-payment/paycomet-hosted-page-payment.tsxRFC: /wiki/spaces/IN/pages/4842520719 
Potential Challenges
| Info |
|---|
List here potential challenges that have come across the opportunity definition or from the potential solutions so far. |
...