All tags/Modal

Terms at checkout

The terms of sale in a dialog over the checkout - closed again with Escape, the cross or a click beside it.

1 The template modal/terms.pad pad

<div style="width:100%; max-width:560px">
  <h2>Checkout</h2>
  <p>Your order: 1 × Aurora electric kettle, <strong>€ 79.00</strong></p>
  <p>
    <label><input type="checkbox" required> I accept the terms of sale</label>
  </p>
  {modal 'terms', title='Terms of sale', button='Read the terms'}
    <p>These terms apply to every order placed in this shop.</p>
    <ol>
      <li>Prices include VAT; shipping is free above € 50.</li>
      <li>You may return an unused product within 30 days for a full refund.</li>
      <li>Every appliance carries a two-year warranty from the date of delivery.</li>
      <li>Your data is used to deliver your order and never sold.</li>
    </ol>
    <p>Questions? Write to <a href="mailto:shop@example.com">shop@example.com</a>.</p>
  {/modal}
</div>

2 The result rendered on the server

Checkout

Your order: 1 × Aurora electric kettle, € 79.00

I accept the terms of sale