Credit card fields can be long. The standard credit card form can have anything from 4-8 fields.

The required fields:

 

The optional fields:

 

While massively popular and widely used in North America, credit cards aren’t the kings of online payments in other regions of the world. Mobile wallets (WeChat Pay, M-Pesa) are widely popular in China and parts of Africa. Europeans tend to prefer digital wallets (PayPal, iDeal, Giropay), and Latin Americans prefer paying by wire transfer most of the time.

Even in areas where shoppers prefer using credit cards, a subset of them might prefer using other payment methods like Paypal. Some might also opt for an installment plan (if you offer it) by choosing a method like Klarna.

Due to the existence of multiple payment methods, you should not display credit card fields by default on the checkout page. Take PayPal for example. When a customer chooses it as a payment method, they’re redirected to a checkout page where they have to log into their PayPal account and approve the charge. For such a customer the credit card fields are completely irrelevant and needlessly clutter the checkout page.

A tabbed design with all the payment methods is the best approach. That way if a user doesn’t opt to pay with a credit card, they don’t have to contend with unnecessary fields that might be visually annoying. If a customer chooses the credit card option, you can then expand to show the fields they need to fill in.

Examples