Help with payment gateway input fields



Hi Guys.
Im working on a project in the online payment space and need feedback regarding the UX of some design choices.
I have 2 options here in respect to how i intend to implement the input fields.

What are you thoughts?
Option A takes the traditional form approach. Label on top, input field below while option B makes use of common area & closure visual cues. The major downside for Option B is the input fields arent well defined.
I’ll like to know your thoughts


I prefer A. I don’t have any good reason. I just picked what I liked.


I prefer A because it’s what I’m used to seeing.


I’m seeing adaptive placeholders (B) more and more and I think the UX is great but if being picky, since fields with text inside are less noticeable, going to have to go with A.


@Rei_Hino - I think I have an idea, but I want to be sure. What’s an adaptive placeholder?


An adaptive placeholder has placeholder text that moves up when your cursor is placed inside the field Example


Option A seems better


Hi everyone. Pardon the late reply. Thanks a lot for your input. Very appreciated.
@Rei_Hino, Hi. The second image wasnt intended to illustrate an adaptive placeholder. Its actually a static input label.
I noticed it being used in several applications lately. take a look at Attempt the demo.
@Piper_Wilson. You have ideas? :slight_smile:


I also prefer A.