...

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

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.

...

WEB

...

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 openWebModal and openNativeModal methods 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'

...

...

{
    "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.

...

NATIVE

• We will add a new attribute toolbar=no and change the location=no on InAppBrower to remove the toolbar, making it possible to close the native modal.

  • const win = InAppBrowser.open(url, '_blank', 'location=no,toolbar=no');

    • IOS: currently

      Image Removed

    • IOS: after the change

      Image Removed

    • ANDROID: currently

      Image Removed

    • ANDROID: after the change

      Image Removed

2. 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.

Expand

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

Potential Challenges

...