I simply can't believe they did this. First of all, it shows a definite bias. Cards starting with
4 belong to VISA, so I can imagine all other CC card companies complaining.
Another thing: 4 groups of 4 digits, equalling 16 digits number. It sounds nice.... if it wasn't because I'm an AMEX owner. AMEX cards use the format
NNNN NNNNNN NNNNN (4 digits + 6 digits + 5 digits= 15 digits number). btw, all AMEX starts with number 3, just in case.
Finally.... CC number and expiration date in the same field... wow... talk about confusing users.
What I would do
I really don't know if this sample is just a test drive or what, it really doesn't look as if they gave any thought at all, it took me literally 30 seconds to see the flagrant mistakes listed above, so I have to assume this is just a test.
Anyways, first thing first:
Differentiate fields: there's no way anyone will convince me that different data in the same field won't confuse users. Simply because I have tested this before! So I'd make both fields visible and clearly labeled.
Remove biased placeholders and hints: just take that placeholder and use text like "Enter credit card number here" . K.I.S.S. approach, so to speak. Most important part is NOT to use any number format, since there are differences between brands.
Give users control: If research shows complaints by users, and a desire to have control over the placeholder text, then it's quite obvious the system should have that feature available for their users. This being said, a neutral placeholder should be in place by default unless user changes it. After all, Stripe has knowledge and resources not many users have.
Disclaimer: like anything UX, recommendations should be based on real data, research and best principles. This example clearly ignores best principles, but on the other hand I don't have any research, only Stripe has it. Thus take this with a pinch of salt.