Versions Compared

Old Version 2

changes.mady.by.user Pereira, Filipa (Deactivated)

Saved on

compared with

New Version 3

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

  1. 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).
At this moment, Waylet there isn’t the possibility to manually cancel payment action inside of the iframe.

Expand
titleTechnical 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'

      image-20240619-105139.pngImage Addedimage-20240619-105226.pngImage Added

      • 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'

      image-20240619-105856.pngImage Addedimage-20240619-105952.pngImage Added

      image-20240619-105809.pngImage Added

      Code Block
      languagejson
      {
    "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?.code

      • Cancel code number:

        • Bizum: 1342

        • Paypal: 1425

    • Create a new logger code to send to mParticle when the user cancels or closes the iframe.

  1. 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
titleTechnical refinement

  • To remove the close page button, we will need to add a new attribute disableClose={isLoading} on StyledFullPageScreen component.

    • path: src/pages/cart/payment/order-payment/paycomet-hosted-page-payment/paycomet-hosted-page-payment.tsx

(warning)Potential Challenges

Info

List here potential challenges that have come across the opportunity definition or from the potential solutions so far.

...