Checkout step 3 free Sketch template

Last Updated on July 24, 2026 by Editorial Team

Sketch freebie created by Drasius M with ultra-clean design. It includes step two of the checkout process and shopping cart.

Download Step 1
Download Step 2

What makes this payment step work so well is how little it asks of the eye. The stepper at the top quietly confirms progress, with “01 Customer Info” and “02 Shipping Info” faded back and “03 Payment Selection” underlined in solid black, so a shopper always knows exactly how far along they are without a single line of extra copy. Below that, the card selection sits on its own elevated white panel, popping slightly forward from the page thanks to a subtle shadow, which draws the eye straight to the one decision that actually matters right now: how to pay.

The credit card option is treated as the default, active state, with a filled blue radio button, a short reassuring line of microcopy about safe transfer, and small payment network badges lined up to the right. That badge row does a lot of trust-building work in very little space. Underneath, the card number field uses a placeholder of zeros grouped in fours, which is a small touch that helps users mentally map where their real digits will go, paired with a tiny card icon for extra visual confirmation. The three-column layout for name, expiry, and CVV keeps related fields grouped logically, and the little question mark next to the CVV box is a nice, unobtrusive way to hint that help text or a tooltip could live there without cluttering the form.

Below the credit card panel, the PayPal option is visible in its collapsed, unselected state, just a radio button, the logo, and a line explaining the redirect behavior. This layered reveal, one method expanded and detailed while the other stays compact, is a pattern worth studying if you’re designing any multi-option payment flow. It keeps the page from feeling overwhelming even though two very different payment experiences are being described on the same screen.

Where This Template Fits

This screen is built specifically for the final, highest-stakes moment of an ecommerce or subscription checkout, so it’s most useful for:

• Online stores and marketplaces designing or redesigning a multi-step checkout flow
• SaaS products handling billing setup or plan upgrades that require card details
• Booking platforms, ticketing sites, or donation forms that need a trustworthy payment moment
• Design portfolios or case studies that want to show a full, realistic purchase flow rather than just a landing page

Because it pairs naturally with the step 1 and step 2 templates linked above, it’s especially handy if you’re assembling a complete checkout prototype and don’t want the payment screen to feel like a stylistic afterthought.

Customizing the Payment Options

The panel is simple enough to adapt without touching its overall structure. A few practical edits to consider:

• Swap the card network badges for the specific processors your project actually supports, keeping their spacing and sizing consistent so the row doesn’t look lopsided
• Recolor the selected radio button and the underline on the active step to match your brand’s accent color instead of the blue shown here
• Add or remove payment methods below PayPal, such as Apple Pay or bank transfer, following the same collapsed radio-row pattern so the hierarchy stays intact
• Adjust the corner radius and shadow depth on the white panel if your product uses flatter or more pronounced elevation elsewhere

Keep the input field labels in that same muted, uppercase, small-caps style used for “CARD NUMBER” and “NAME ON CARD.” That typographic restraint is a big part of why the form feels calm rather than clinical, and it’s worth preserving even as you restyle colors or swap in your own product’s fonts.