[0]
I am using dynamic panel for Checkout page, what you see is typical payment method step.
[3]
Part A: Displays list of steps of a standard checkout
[7]
Part B: Show order details here
Part C: Shows various payment methods
[9]
Part D: Various design elements which I will be using to create a form
[12]
Double-click the checkout dynamic panel to open the Dynamic Panel State Manager.
[15]
Double-click “state 1” to open it for editing.
[16]
Let's start creating a form in this area
[20]
Drag a Label, Box 1, and Text Field onto the canvas of “State 1”
[29]
Change Label to "Name on card"
[35]
Name Box as "bg-nameoncard"
[40]
Name Text feild as "tx-nameoncard"
[46]
Creating custom text box by combining box and Text field
[80]
Repeat the same steps to create "Debit/Credit card number" field
[117]
Go to Interaction style, click "selected" to set red border, this we will use in step 2 to show inline validation
[122]
Repeat same steps for "Name on card" element
[130]
For card number, add 4 Text Field , name and style them same way we did "Name on card" element
[165]
Name each text field and set max length to 4 and hint text to "1111" ( you can set it to any text)
[225]
Place credit card icon on the right side of the card number
[228]
Convert it to dynamic panel. we will add
logic to identify credit card type here later in step 3
[243]
Place credit card icons
[255]
Follow same steps as card number to create "Valid thru" element
[282]
Give name, set hint as "MM" and "YY" and set max length for both as 2
[350]
Copy paste Valid thru to create CVV field, set hint as "111" and max length as 3
[383]
Move CVV help icon next to the field
[392]
Finally add button to complete the form layout
[418]
Click on Preview to check the layout in browser
