Credit card checkout details

I made credit card checkout details to do #DailyUI #002

I started with some sketches.

First, I thought some inputs must need when we add cards in system.

There would be

Additionally, setting card nickname could be useful when some user has many cards.

I tried to refer to as many references as I could.

Also I used grid.

Since I'm not familiar with designing app screens, I'm practicing by keeping the grid on while designing.

These days, with convenient payment systems like Apple Pay and PayPal,

I thought it would be necessary to include that option for card payments as well.

If you want to add card, you will be entered at screen on the right side.

These input things are necessary except card nickname, so I marked 'must-be filled' things with red stars.

[Colors I used]