The dark checkout page comes with a soft charcoal page and bright accents. Lower the effort of paying. This checkout page has clear steps, short forms and an order summary that stays in view. The dark version keeps form fields easy to see.
What is included
- A progress bar with four steps
- Contact and shipping forms
- A payment card with Card, UPI and Net banking tabs
- An order summary with a place order button
Where to use it
Use it for a store or a booking site. Add or remove payment tabs as needed.
How to use it
Copy the component with the copy button and paste it into your Figma file with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can change text, colors and spacing without breaking the design. The text uses Plus Jakarta Sans, which is free on Google Fonts. Install it before you paste so the text looks the same.
Built for editing
Spacing follows a 4 point scale, corners are rounded to match, and layers have clear names, so developers can find what they need. Where a design has a picture, the frame is ready for your own image, so the layout stays the same.
Dark version
This listing is the dark version. The light version is listed separately, so you can pick the one that fits your project.
