[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Fcheckout-screen":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":33,"showcases":526,"links":527,"dates":589},"\u002Fexamples\u002Ftags\u002Fcheckout-screen","collection","screens",true,{"example_count":9,"app_count":10},1045,213,{"id":12,"title":13,"description":14},20595,"Checkout screen","",{"title":16,"description":17,"og_image":18},"Checkout screen screen examples - Nicelydone","Checkout screen screen design examples from SaaS apps. Browse examples from Dock, Circleback, Fourthwall.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7a1255f1-b78d-4232-9bd8-d30d58a5a384.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"Checkout screen screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"1045 screens",[34,83,139,173,206,236,278,305,345,391,448,482],{"uuid":35,"title":36,"description":37,"canonical_path":38,"image":18,"width":39,"height":40,"image_alt":41,"published_at":42,"kind":43,"patterns":44,"component_categories":60,"app":69},"7a1255f1-b78d-4232-9bd8-d30d58a5a384","Chargebee Checkout","Checkout screen where the user reviews their standard plan order, account details, billing address, and payment method before subscribing.","\u002Fexamples\u002Fapps\u002Fdock\u002Fscreens",3024,1758,"Chargebee Checkout from Dock","2026-07-13T15:30:47.000Z","screen",[45,54],{"id":46,"label":47,"slug":48,"rank":49,"group":50},130,"Checkout","checkout",0,{"id":51,"label":52,"slug":53},14,"Payments & Checkout","payments-and-checkout",{"id":55,"label":56,"slug":57,"rank":58,"group":59},131,"Payment Form","payment-form",1,{"id":51,"label":52,"slug":53},[61,65],{"id":62,"title":63,"slug":64},174,"Card","card",{"id":66,"title":67,"slug":68},175,"Button","button",{"slug":70,"title":71,"logo":72,"baseline":73,"categories":74},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[75,79],{"id":76,"title":77,"slug":78},23,"Collaboration","collaboration",{"id":80,"title":81,"slug":82},29,"Task Management","task-management",{"uuid":84,"title":85,"description":86,"canonical_path":87,"image":88,"width":39,"height":89,"image_alt":90,"published_at":91,"kind":43,"patterns":92,"component_categories":106,"app":117},"f925e6ce-02c9-41d7-842a-a849cd0eecf4","Welcome - Circleback","Checkout page where the user enters their credit card details to start a trial, alongside a customer testimonial.","\u002Fexamples\u002Fapps\u002Fcircleback\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff925e6ce-02c9-41d7-842a-a849cd0eecf4.png",1780,"Welcome - Circleback from Circleback","2025-10-13T14:40:38.000Z",[93,95,97],{"id":46,"label":47,"slug":48,"rank":49,"group":94},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":96},{"id":51,"label":52,"slug":53},{"id":98,"label":99,"slug":100,"rank":101,"group":102},91,"Trial","trial",2,{"id":103,"label":104,"slug":105},9,"Plans & Limits","plans-and-limits",[107,111,115,116],{"id":108,"title":109,"slug":110},232,"Testimonial","testimonial",{"id":112,"title":113,"slug":114},169,"Avatar","avatar",{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":118,"title":119,"logo":120,"baseline":121,"categories":122},"circleback","Circleback","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcircleback-srajedn3.png","Unbelievably good meeting notes",[123,127,131,135],{"id":124,"title":125,"slug":126},30,"Productivity","productivity",{"id":128,"title":129,"slug":130},82,"Communication","communication",{"id":132,"title":133,"slug":134},22,"Knowledge Management","knowledge-management",{"id":136,"title":137,"slug":138},80,"Artificial Intelligence","artificial-intelligence",{"uuid":140,"title":141,"description":142,"canonical_path":143,"image":144,"width":39,"height":89,"image_alt":145,"published_at":146,"kind":43,"patterns":147,"component_categories":150,"app":155},"fd1f2156-a0d3-4bc6-8e3c-2ac6a0e8bf74","Checkout | Nicelydone","Checkout page for a free digital product where the user provides contact and billing details without requiring payment.","\u002Fexamples\u002Fapps\u002Ffourthwall\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffd1f2156-a0d3-4bc6-8e3c-2ac6a0e8bf74.png","Checkout | Nicelydone from Fourthwall","2025-07-07T13:03:35.000Z",[148],{"id":46,"label":47,"slug":48,"rank":49,"group":149},{"id":51,"label":52,"slug":53},[151],{"id":152,"title":153,"slug":154},260,"Badge","badge",{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"fourthwall","Fourthwall","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6cf581b1-c7fa-41be-a627-bf2934115d62.png","Launch your brand. On your terms",[161,165,169],{"id":162,"title":163,"slug":164},3,"Shopping","shopping",{"id":166,"title":167,"slug":168},58,"Social Commerce","social-commerce",{"id":170,"title":171,"slug":172},7,"Web Development","web-development",{"uuid":174,"title":175,"description":176,"canonical_path":177,"image":178,"width":39,"height":179,"image_alt":180,"published_at":181,"kind":43,"patterns":182,"component_categories":189,"app":192},"55ae198d-b901-44ef-9c37-4762f6dfd985","Jasper","Checkout page where the user enters their credit card details to start a 7-day free trial of the Pro plan, with an order summary showing monthly billing.","\u002Fexamples\u002Fapps\u002Fjasper\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F55ae198d-b901-44ef-9c37-4762f6dfd985.png",1778,"Jasper from Jasper","2025-06-09T19:56:39.000Z",[183,185,187],{"id":46,"label":47,"slug":48,"rank":49,"group":184},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":186},{"id":51,"label":52,"slug":53},{"id":98,"label":99,"slug":100,"rank":101,"group":188},{"id":103,"label":104,"slug":105},[190,191],{"id":152,"title":153,"slug":154},{"id":66,"title":67,"slug":68},{"slug":193,"title":175,"logo":194,"baseline":195,"categories":196},"jasper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fjasper-9e3545c6.png","AI Copywriter",[197,198,202],{"id":136,"title":137,"slug":138},{"id":199,"title":200,"slug":201},25,"Marketing","marketing",{"id":203,"title":204,"slug":205},59,"Writing tools","writing-tools",{"uuid":207,"title":208,"description":209,"canonical_path":210,"image":211,"width":39,"height":212,"image_alt":213,"published_at":214,"kind":43,"patterns":215,"component_categories":220,"app":228},"b455a657-ab6a-44ea-a4e3-5b5d5662e39a","responsive-luminism's Clone Studio | Delphi","Checkout page where the user enters payment details to subscribe to the Delphi Starter Monthly plan.","\u002Fexamples\u002Fapps\u002Fdelphi\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb455a657-ab6a-44ea-a4e3-5b5d5662e39a.png",2848,"responsive-luminism's Clone Studio | Delphi from Delphi","2025-05-26T14:55:22.000Z",[216,218],{"id":46,"label":47,"slug":48,"rank":49,"group":217},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":219},{"id":51,"label":52,"slug":53},[221,225,226,227],{"id":222,"title":223,"slug":224},227,"Stepper","stepper",{"id":152,"title":153,"slug":154},{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"delphi","Delphi","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdelphi-4341n6b6.png","Your Mind. Now on Demand",[234,235],{"id":136,"title":137,"slug":138},{"id":132,"title":133,"slug":134},{"uuid":237,"title":238,"description":239,"canonical_path":240,"image":241,"width":39,"height":179,"image_alt":242,"published_at":243,"kind":43,"patterns":244,"component_categories":257,"app":264},"2883681c-b961-482c-80bb-016f555e6f92","Mangomint App","Master-detail view where the user can select a past sale from a list and manage an open checkout for a specific client, including adding a gift card and proceeding to payment.","\u002Fexamples\u002Fapps\u002Fmangomint\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2883681c-b961-482c-80bb-016f555e6f92.png","Mangomint App from Mangomint","2025-05-19T12:33:31.000Z",[245,247,249],{"id":46,"label":47,"slug":48,"rank":49,"group":246},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":248},{"id":51,"label":52,"slug":53},{"id":250,"label":251,"slug":252,"rank":101,"group":253},47,"Table","table",{"id":254,"label":255,"slug":256},4,"Data & Analysis","data-and-analysis",[258,259,263],{"id":112,"title":113,"slug":114},{"id":260,"title":261,"slug":262},240,"Horizontal navigation","horizontal-navigation",{"id":66,"title":67,"slug":68},{"slug":265,"title":266,"logo":267,"baseline":268,"categories":269},"mangomint","Mangomint","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F25bad55a-e8c6-455f-a94a-ec8e1b845320.png","Everything you need to power your salon and spa",[270,274],{"id":271,"title":272,"slug":273},41,"Health and Wellness","health-and-wellness",{"id":275,"title":276,"slug":277},101,"Calendar","calendar",{"uuid":279,"title":280,"description":281,"canonical_path":282,"image":283,"width":39,"height":89,"image_alt":284,"published_at":285,"kind":43,"patterns":286,"component_categories":292,"app":295},"2c216f47-cb08-4deb-b354-21992e87c623","Sora","Onboarding step where the user selects a subscription tier between Free, Plus, and Pro plans for image and video generation.","\u002Fexamples\u002Fapps\u002Fsora\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2c216f47-cb08-4deb-b354-21992e87c623.png","Sora from Sora","2025-04-14T09:27:56.000Z",[287],{"id":288,"label":289,"slug":290,"rank":49,"group":291},89,"Pricing","pricing",{"id":103,"label":104,"slug":105},[293,294],{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":296,"title":280,"logo":297,"baseline":298,"categories":299},"sora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsora-2oq6gygg.png","Bring your imagination to life with text, image, or video",[300,301],{"id":136,"title":137,"slug":138},{"id":302,"title":303,"slug":304},100,"Video","video",{"uuid":306,"title":307,"description":308,"canonical_path":309,"image":310,"width":39,"height":311,"image_alt":312,"published_at":313,"kind":43,"patterns":314,"component_categories":327,"app":334},"d2cf6f82-7f3f-44d6-8bf7-5173c1c42cd4","Shuttle – Your files. Your rules.","List view where the user is checking out via a payment modal, currently in a processing state after entering their billing address and tax ID.","\u002Fexamples\u002Fapps\u002Fshuttle\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd2cf6f82-7f3f-44d6-8bf7-5173c1c42cd4.png",1726,"Shuttle – Your files. Your rules. from Shuttle","2025-03-31T12:54:20.000Z",[315,317,319],{"id":46,"label":47,"slug":48,"rank":49,"group":316},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":318},{"id":51,"label":52,"slug":53},{"id":320,"label":321,"slug":322,"rank":101,"group":323},120,"Loading","loading",{"id":324,"label":325,"slug":326},12,"States & Feedback","states-and-feedback",[328,332,333],{"id":329,"title":330,"slug":331},284,"Modal","modal",{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":335,"title":336,"logo":337,"baseline":338,"categories":339},"shuttle","Shuttle","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fshuttle-1876ce5e.png","Manage and share your assets your way",[340,344],{"id":341,"title":342,"slug":343},71,"File sharing","file-sharing",{"id":76,"title":77,"slug":78},{"uuid":346,"title":347,"description":348,"canonical_path":349,"image":350,"width":39,"height":351,"image_alt":352,"published_at":353,"kind":43,"patterns":354,"component_categories":363,"app":381},"9e4479a5-790f-4507-b9c3-17f16df6a47d","Budgeting | Monarch Money","Feature page explaining the app's budgeting capabilities, highlighting flexible and category-based budgeting options with UI previews and educational resources.","\u002Fexamples\u002Fapps\u002Fmonarch\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9e4479a5-790f-4507-b9c3-17f16df6a47d.png",10672,"Budgeting | Monarch Money from Monarch","2025-03-17T14:09:52.000Z",[355],{"id":356,"label":357,"slug":358,"rank":49,"group":359},138,"Feature Page","feature-page",{"id":360,"label":361,"slug":362},15,"Marketing Page Types","marketing-page-types",[364,368,372,376,380],{"id":365,"title":366,"slug":367},258,"Header","header",{"id":369,"title":370,"slug":371},189,"FAQ","faq",{"id":373,"title":374,"slug":375},202,"Footer","footer",{"id":377,"title":378,"slug":379},233,"Tabs","tabs",{"id":62,"title":63,"slug":64},{"slug":382,"title":383,"logo":384,"baseline":385,"categories":386},"monarch","Monarch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmonarch-58e7e32a.png","The modern way to manage money",[387],{"id":388,"title":389,"slug":390},36,"Finance","finance",{"uuid":392,"title":393,"description":394,"canonical_path":395,"image":396,"width":39,"height":179,"image_alt":397,"published_at":398,"kind":43,"patterns":399,"component_categories":428,"app":432},"ef5b43a8-6d7a-468e-b062-6e2c05389001","Readme.md - TaskMaster - Replit","Cloud development environment showing a markdown file editor, a file explorer sidebar, and a live preview of a task management application in an empty state.","\u002Fexamples\u002Fapps\u002Freplit\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fef5b43a8-6d7a-468e-b062-6e2c05389001.png","Readme.md - TaskMaster - Replit from Replit","2025-03-10T14:11:20.000Z",[400,408,415,420],{"id":401,"label":402,"slug":403,"rank":49,"group":404},53,"Code Editor","code-editor",{"id":405,"label":406,"slug":407},5,"Media & Tools","media-and-tools",{"id":136,"label":409,"slug":410,"rank":58,"group":411},"Files","files",{"id":412,"label":413,"slug":414},8,"Pages & Content","pages-and-content",{"id":416,"label":417,"slug":418,"rank":101,"group":419},115,"Empty State","empty-state",{"id":324,"label":325,"slug":326},{"id":421,"label":422,"slug":423,"rank":162,"group":424},104,"Team Management","team-management",{"id":425,"label":426,"slug":427},10,"Settings & Admin","settings-and-admin",[429,430,431],{"id":377,"title":378,"slug":379},{"id":260,"title":261,"slug":262},{"id":66,"title":67,"slug":68},{"slug":433,"title":434,"logo":435,"baseline":436,"categories":437},"replit","Replit","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freplit-7961c4fc.png","Turn your ideas into apps with AI",[438,439,443,444],{"id":136,"title":137,"slug":138},{"id":440,"title":441,"slug":442},48,"Developer Tools","developer-tools",{"id":170,"title":171,"slug":172},{"id":445,"title":446,"slug":447},96,"No code","no-code",{"uuid":449,"title":450,"description":451,"canonical_path":452,"image":453,"width":39,"height":454,"image_alt":455,"published_at":456,"kind":43,"patterns":457,"component_categories":467,"app":475},"d8647112-9385-42b3-b6df-08dac7f12a97","Choose how to pay | WeTransfer","Checkout page where the user enters credit card and billing details to purchase a WeTransfer Ultimate monthly subscription, featuring an order summary and a yearly-billing upsell.","\u002Fexamples\u002Fapps\u002Fwetransfer\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd8647112-9385-42b3-b6df-08dac7f12a97.png",2204,"Choose how to pay | WeTransfer from WeTransfer","2025-02-24T16:12:09.000Z",[458,460,465],{"id":46,"label":47,"slug":48,"rank":49,"group":459},{"id":51,"label":52,"slug":53},{"id":461,"label":462,"slug":463,"rank":58,"group":464},132,"Payment Method","payment-method",{"id":51,"label":52,"slug":53},{"id":288,"label":289,"slug":290,"rank":101,"group":466},{"id":103,"label":104,"slug":105},[468,472,473,474],{"id":469,"title":470,"slug":471},177,"Breadcrumb","breadcrumb",{"id":260,"title":261,"slug":262},{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":476,"title":477,"logo":478,"baseline":479,"categories":480},"wetransfer","WeTransfer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwetransfer-3e886b18.png","The simplest way to send your files around the world.",[481],{"id":341,"title":342,"slug":343},{"uuid":483,"title":484,"description":485,"canonical_path":486,"image":487,"width":39,"height":179,"image_alt":488,"published_at":489,"kind":43,"patterns":490,"component_categories":507,"app":515},"e7fc91d0-63a6-4691-ac65-bc4ba163059e","Sending addresses | Flodesk","Settings page where the user is prompted to confirm the deletion of an email sender profile.","\u002Fexamples\u002Fapps\u002Fflodesk\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe7fc91d0-63a6-4691-ac65-bc4ba163059e.png","Sending addresses | Flodesk from Flodesk","2025-02-24T15:36:57.000Z",[491,496,502],{"id":492,"label":493,"slug":494,"rank":49,"group":495},114,"Confirmation","confirmation",{"id":324,"label":325,"slug":326},{"id":103,"label":497,"slug":498,"rank":58,"group":499},"Delete","delete",{"id":101,"label":500,"slug":501},"Actions","actions",{"id":503,"label":504,"slug":505,"rank":101,"group":506},94,"Account Settings","account-settings",{"id":425,"label":426,"slug":427},[508,512,513,514],{"id":509,"title":510,"slug":511},167,"Alert","alert",{"id":152,"title":153,"slug":154},{"id":62,"title":63,"slug":64},{"id":66,"title":67,"slug":68},{"slug":516,"title":517,"logo":518,"baseline":519,"categories":520},"flodesk","Flodesk","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fflodesk-57ced817.png","Design emails people love to open. Sell online.",[521,525],{"id":522,"title":523,"slug":524},27,"Email Newsletters","email-newsletters",{"id":199,"title":200,"slug":201},[],[528,530,533,535,537,539,541,543,545,547,549,551,553,556,559,562,565,568,571,574,577,580,583,586],{"label":47,"to":529,"count":412},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":56,"to":531,"count":532},"\u002Fexamples\u002Fscreens\u002Fpayment-form",6,{"label":289,"to":534,"count":101},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":99,"to":536,"count":101},"\u002Fexamples\u002Fscreens\u002Ftrial",{"label":504,"to":538,"count":58},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":402,"to":540,"count":58},"\u002Fexamples\u002Fscreens\u002Fcode-editor",{"label":493,"to":542,"count":58},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":497,"to":544,"count":58},"\u002Fexamples\u002Fscreens\u002Fdelete",{"label":417,"to":546,"count":58},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":409,"to":548,"count":58},"\u002Fexamples\u002Fscreens\u002Ffiles",{"label":321,"to":550,"count":58},"\u002Fexamples\u002Fscreens\u002Floading",{"label":462,"to":552,"count":58},"\u002Fexamples\u002Fscreens\u002Fpayment-method",{"label":554,"to":555},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":557,"to":558},"Circleback design examples","\u002Fexamples\u002Fapps\u002Fcircleback",{"label":560,"to":561},"Fourthwall design examples","\u002Fexamples\u002Fapps\u002Ffourthwall",{"label":563,"to":564},"Jasper design examples","\u002Fexamples\u002Fapps\u002Fjasper",{"label":566,"to":567},"Delphi design examples","\u002Fexamples\u002Fapps\u002Fdelphi",{"label":569,"to":570},"Mangomint design examples","\u002Fexamples\u002Fapps\u002Fmangomint",{"label":572,"to":573},"Sora design examples","\u002Fexamples\u002Fapps\u002Fsora",{"label":575,"to":576},"Shuttle design examples","\u002Fexamples\u002Fapps\u002Fshuttle",{"label":578,"to":579},"Monarch design examples","\u002Fexamples\u002Fapps\u002Fmonarch",{"label":581,"to":582},"Replit design examples","\u002Fexamples\u002Fapps\u002Freplit",{"label":584,"to":585},"WeTransfer design examples","\u002Fexamples\u002Fapps\u002Fwetransfer",{"label":587,"to":588},"Flodesk design examples","\u002Fexamples\u002Fapps\u002Fflodesk",{"published_at":590,"updated_at":591},"2024-12-15T05:02:10.000Z","2026-09-05T20:19:45.265Z"]