SlowlyCheckout
Build the checkout page from ordinary blocks, wired to the WooCommerce Store API.
The checkout page is built like any other page in Slowly, from ordinary blocks. A small runtime, loaded only on the checkout page, connects those blocks to the WooCommerce Store API, the same API family the cart uses. Inputs become address fields, containers receive shipping and payment choices, and a button places the order.
Composing the page
Lay out the page with the usual blocks: inputs for the address, containers for shipping and payment, text blocks for totals, a button to submit. Then mark each block with a data attribute through its HTML attributes panel in the Advanced tab. The runtime finds the attributes and wires everything together.
| Attribute | Goes on | What it does |
|---|---|---|
data-cc-checkout | The container wrapping the whole checkout | Marks the root; without it the runtime stays idle |
data-cc-checkout-field="billing_email" | Each input | Names the field: billing_*, shipping_*, or customer_note. Prefilled from the draft order and pushed back to it after the shopper edits the field |
data-cc-checkout-shipping | An empty container | Shipping rate choices render here |
data-cc-checkout-payments | An empty container | Payment method choices render here |
data-cc-checkout-total="total_price" | A text block | Shows a running total, formatted in the store currency; also total_items, total_shipping, total_tax, total_discount |
data-cc-checkout-notice | A container | Error and status messages render here |
data-cc-checkout-submit | The place-order button | Submits the order |
Address changes refresh the totals and shipping choices after a short pause, and choosing a shipping rate refreshes the totals. While a request is in flight, the root carries a data-cc-checkout-busy attribute, a styling hook for a loading state. On submit the order is placed, and the shopper follows the payment redirect if the gateway asks for one.
Payment gateways
Payment methods render as a list of choices, one per gateway enabled in WooCommerce. A gateway that needs no extra fields at the point of choosing it, bank transfer, cash on delivery, cheque, and similar, completes an order today. Mounting a gateway's own fields into the checkout, the path for Stripe, PayPal, and the rest of the WooCommerce Blocks-compatible set, is built against the same architecture but not yet wired into this runtime. Exotic gateways that only function through their own redirect flow are out of scope regardless.