Page Comparison

...

[Insert here the same solutions page if applicable]

Figma Link: https://www.figma.com/design/wEeYkRHLwLdMJHKvQJOdd0/%5BIBFEC-1795%5D-Remove-Pre-filled-Name-On-Card-field?node-id=7979-30251 ) 

Important: there are 2 different Payment Pages designs for each type of order: Delivery and Pick-up orders. By now, this should not affect the Dev Team but the Core FE.  

Also important: the pick-up orders flow has 2 variations depending on when the confirmation store was configurated to be displayed in the front: Store Confirmation page is activated before or after Order Payment page. 

DoD 

In Whitelabel-app: 

• The pre-filled info in the “Name on Card” field has been removed. 

• The “Name on Card” field appears empty, only showing the place holder (which is the “Default” State in the Design System) 

• The required fields are marked with “*”. 

...

• Show the Label in “Focus” “Filled” and “Error” field states, so the user has an extra guidance of what they are filling up: 

Focus State: 

...

Filled State: 

...

Error State:

Image Added

Fix the type of keyboard displayed when the expiration date field is active: 

Image Added

On the left, the current flow in which the alphanumeric keyboard is displayed. On the right, the new solution which shows the numeric keyboard.  

• Change the icon for “Add new card” dropdown so it is more aligned to the copy description: 

Current icon: 

Image Added

New icon: 

Image Added

• Show the title “Payment Details” before the dropdown: 

Image Added

...