4 Payment Page Design Examples To Copy

Have you outgrown your current payments solution? Download the guide


4 Payment Page Design Examples To Copy

Written by: Onur Hasbay

Fill in the blanks:

Most online checkout pages are   (adjective)  and   (adjective).

I don’t know about you, but I’d fill in “intimidating” and “time-consuming” (and maybe a couple of other words I can’t say here). You can switch out the adjectives, but the point remains the same: I’m betting that your checkout page is probably about as appealing to your customers as a Star Wars marathon is to Star Trek fans (I’m not saying which side I’m on, sorry).

That’s a problem. Your checkout page is a critical piece of your brand’s user experience, so if your shoppers aren’t enjoying the process right down to inputting the last number in their credit card sequence, the risk of user abandonment is real. At any moment, they might come to their senses and:

  • Realize they’re spending money.
  • Remember why they hate filling out form fields.
  • Get distracted if the process takes more than thirty seconds.

So, what does it take to create a payment page that’s frictionless? I dug around for some exemplary payment page examples, which you’ll find below, along with a few notes about their appeal. Take a look and see how your own payment page design compares.

4 Stellar Payment Page Design Examples

1. The Noun Project


Why I like it: It’s simple, clean, and keeps form fields to a minimum.

Clean, clean, clean—this page is simple times 10. And payment information is kept to a minimum. As a merchant, the only fields you really need to complete a credit card transaction online are the customer’s credit card number, the card expiration date, and the card security code (CVC/CVV). All other information is extraneous (though a zip code is often recommended to help reduce instances of fraud). If you can’t get away with those fields alone, keep the form as simple as possible. I’m feeling so good here, I’d probably be willing to shell out whatever amount was necessary to get hold of that slick moustache-man icon.

2. UI8


Why I like it: There are no distractions.

It’s a mistake to design a checkout page with your usual navigation menu at the top. Think about it: You’ve worked so hard to bring potential customers to this point; once they’re here, don’t bother them! Like this page from UI8, get what you need to complete the sale and keep the process moving. The best checkout pages don’t give customers an opportunity to wander off, even if it’s right back into your store, because every delay holds the potential for disrupting the sale altogether.

Read about the seven conversion strategies the most successful eCommerce businesses use to ensure friction-free checkout.

I also like the way UI8 has outlined the checkout process at the top left: review, payment, and download. Customers understand where they are in the process and how far they are from completion. There’s no danger of getting lost in a payment maze on this site.

3. Prezi


Why I like it: It makes me happy. Literally.

OK, so they’re asking me for a bit more information than I typically like (I wish I didn’t have to open an account to buy their product), but I actually smiled when I was filling out the form fields at the messages that popped up as a result of my answers (I agree, my name is great). Payments are important, but that doesn’t mean they have to put us to sleep. If your company has any personality lurking underneath that slick payment facade, let it out! It only makes customers happier to be associated with you.

4. InVision


Why I like it: The form incorporates best practices.

Sticking to certain best practices when it comes to designing payment page form fields is key to providing a good checkout experience. Among them:

  • Putting spaces between number groups in the 16-digit card number field.
  • Being clear about the format for inputting dates.
  • Providing friendly reminders about the CVC/CVV.
  • Automatically recognizing the user’s card type.

In addition, it’s a beautiful payment page design and not intimidating in any way whatsoever. In short, I wouldn’t hesitate to collaborate with InVision on any future activities that involve the decrease of my bank account balance.

Other Payment Page Best Practices

  • Keep coupons low-key. Calling attention to coupon and promo codes is like waking up the theoretical tiger. When people see an empty field asking them to insert a coupon code, they immediately want to fill it in—even if they don’t have a coupon. Many customers will leave your site, head to Google, and start searching. The internet being what it is, it’s the ultimate distraction. People may eventually get pulled away from the task of searching and abandon the purchase altogether or, even worse, stumble on a coupon for the competition. Instead, make the coupon field available for those in possession of this bit of shopper’s gold with some subtle positioning of that tiny phrase, “Have a coupon?” Those who have one will find it; those who don’t will ignore it and continue the checkout process.
  • Offer one-click order options like Visa Checkout and Masterpass. By placing these buttons as options on your checkout page, you’re streamlining the payment process to the point of almost being nonexistent. These and other digital wallets are catching on fast among consumers, thanks to their convenience and flexibility; they also offer a greater level of security for both customers and merchants.

How does your payment page stack up?

Now that you’ve seen these examples, take another look at your own checkout page—how does it compare? If some or all of these elements are missing, there’s more you can do to up your payment page game.

BlueSnap’s Payment API makes it easy for you to build a custom checkout experience that truly reflects your brand while we do the heavy lifting on payment processing. Plus, our payment gateway lets you add the one-click order options that make checkout a breeze. Our wide range of payment tools has everything you need to design a high-converting checkout page.

I’ll say it again: Most online checkout pages are… what? If you’re ready to change those adjectives as they apply to your own checkout page, we’re here if you need us!

Looking for ways to improve your online checkout experience? We’d love to help. Get your custom report card today.

Related Resources: