Skip to content
P1 Blocks

Block 75 of 297

Checkout Form

Contact, shipping, delivery method and billing beside an order summary. Card entry is left to your payment processor.

Puck key
CheckoutFormBlock
Export
checkoutFormBlock
React component
<CheckoutForm />
Path
components/puck/checkout-form-block.tsx
Dependencies
None
License
MIT

Live demo

Try this block in a real editor

Pick the editor your team uses. Both run in your browser, and nothing is saved.

  • Pantheon Content Publisher (P1)

    Puck

    The visual editor P1 is built on. Drag blocks onto a page, edit their fields in the sidebar, then publish to see the result.

    Open in Puck

  • WordPress

    Gutenberg

    WordPress's block editor, running in your browser. Insert blocks from the library, then change their settings in the sidebar.

    Open in Gutenberg

The editors work best on a larger screen.

Edit it in Puck or Gutenberg. Nothing is saved.

Editor fields

What content editors see in the P1 sidebar when they select this block.

  • Headingtext
  • Heading levelselect
  • Order URLtext
  • Countriestextarea
  • Delivery methodsarray
  • Payment headingtext
  • Payment notetextarea
  • Button texttext
  • Terms notetextarea
  • Summary headingtext
  • Order itemsarray
  • Summary rowsarray
  • Total labeltext
  • Totaltext