Agreement

In a Form, Agreement stands in the submit and return region with the payment it governs.

In a Stepped flow whose commit it authorises, Agreement stands around the commit, and the way back follows it.

CompleteDetails
Card
Not startedConfirmation

By saving this card, you allow Oakmere Village Hall to charge it for this booking and for later invoices on their due date. You can remove the card from your account at any time. Read the card terms.

Back to details

In a Dialog, Agreement wraps the Dialog’s Primary action, and its closing action follows it.

Change card

Change card while the current card is being checked

After the action, the words agreed to stay with the record and go to the person who agreed.

Card terms, accepted

Version: 1

Accepted by: Aisha Khan

Accepted: 3 February 2025 at 11:40

History

Messages

You 3 February 2025 at 11:40

By paying, you agree to the card terms and privacy statement.

Delivered to aisha@oakmereprimary.org

Card terms

Oakmere Village Hall keeps your card to charge the invoices you owe for your bookings. Each charge is taken on the invoice’s due date and is never more than the invoice’s amount due.

We email you the invoice before its due date. You can remove your card from your account at any time; invoices after that are paid by bank transfer.

Return to payment

Privacy statement

Your payment details are kept with your invoice.

Return to payment

After the action

Each task above submits here. The page shows its own success.

Source

<p>In a Form, Agreement stands in the submit and return region with the payment it governs.</p>
<form data-kit-layout="form" action="#role-agreement-result" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="task-context"><h2>Pay invoice</h2><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Oakmere Primary School</dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Invoice</dt><dd data-kit-region="value"><code><span>OH-</span><span>INV-</span><span>003</span></code></dd></dl></div></section>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group" data-kit-width="medium"><label for="role-agreement-form-name">Name on card</label><input id="role-agreement-form-name" name="name" autocomplete="cc-name" value="Aisha Khan" /><output for="role-agreement-form-name">Aisha Khan</output></div>
  </div>
  <section data-kit-role="inline-consequence" aria-label="Pay invoice OH-INV-003">
    <h3 data-kit-region="subject">Invoice OH-INV-003</h3>
    <p data-kit-region="consequence">Paying takes £84.00 from this card.</p>
    <p data-kit-region="effective-time">The payment is taken as soon as you pay.</p>
    <p data-kit-region="correction-path">A payment made in error is refunded from <a href="#role-agreement">the invoice</a>.</p>
  </section>
  <div data-kit-role="action-group" data-kit-region="submit-return">
    <div id="role-agreement-declined" data-kit-role="refusal" role="alert" aria-atomic="true"><p data-kit-region="line">The payment was declined. Use another card.</p></div>
    <div data-kit-role="agreement">
      <p data-kit-region="text">By paying, you agree to the <a href="#role-agreement-terms">card terms</a> and <a href="#role-agreement-privacy">privacy statement</a>.</p>
      <div data-kit-role="action-group" data-kit-region="action"><div data-kit-role="form-group" data-kit-width="medium"><label for="role-agreement-signature">Your full name, to sign</label><input id="role-agreement-signature" name="signature" autocomplete="name" /><output for="role-agreement-signature">Not signed</output></div><button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Pay £84.00</span></button></div>
    </div>
    <a href="#role-agreement" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
  <p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<p>In a Stepped flow whose commit it authorises, Agreement stands around the commit, and the way back follows it.</p>
<div data-kit-layout="stepped-flow">
  <div data-kit-region="notices" aria-live="polite"></div>
  <ol data-kit-role="progress" data-kit-region="progress" aria-label="Booking progress">
    <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Details</span></li>
    <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Card</span></li>
    <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Confirmation</span></li>
  </ol>
  <form data-kit-region="current-step" id="role-agreement-commit-step" aria-labelledby="role-agreement-commit-step-title" action="#role-agreement-result" method="get">
    <h2 id="role-agreement-commit-step-title">Save a card</h2>
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group" data-kit-width="medium"><label for="role-agreement-commit-name">Name on card</label><input id="role-agreement-commit-name" name="name" autocomplete="cc-name" value="Aisha Khan" /><output for="role-agreement-commit-name">Aisha Khan</output></div>
  </form>
  <div data-kit-role="action-group" data-kit-region="back-continue-or-commit">
    <div data-kit-role="agreement">
      <p data-kit-region="text">By saving this card, you allow Oakmere Village Hall to charge it for this booking and for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms">Read the card terms</a>.</p>
      <div data-kit-role="action-group" data-kit-region="action"><button type="submit" form="role-agreement-commit-step" data-kit-role="primary-action"><span data-kit-region="label">Save card</span></button></div>
    </div>
    <a href="#role-agreement" data-kit-role="way-back"><span data-kit-region="label">Back to details</span></a>
  <p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<p>In a Dialog, Agreement wraps the Dialog’s Primary action, and its closing action follows it.</p>
<details>
  <summary>Change card</summary>
  <button type="button" id="role-agreement-dialog-opener" data-kit-role="secondary-action" commandfor="role-agreement-dialog" command="show-modal"><span data-kit-region="label">Change card</span></button>
  <dialog id="role-agreement-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="role-agreement-dialog-title">
    <h2 data-kit-region="heading" id="role-agreement-dialog-title">Change card</h2>
    <div data-kit-region="form-groups">
      <form id="role-agreement-dialog-card" action="#role-agreement-result" method="get">
        <div data-kit-role="form-group" data-kit-width="medium"><label for="role-agreement-dialog-name">Name on card</label><input id="role-agreement-dialog-name" name="name" autocomplete="cc-name" value="Aisha Khan" /><output for="role-agreement-dialog-name">Aisha Khan</output></div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <div data-kit-role="agreement">
        <p data-kit-region="text">By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms" target="_blank" rel="noopener">Read the card terms</a>.</p>
        <div data-kit-role="action-group" data-kit-region="action"><button type="submit" form="role-agreement-dialog-card" data-kit-role="primary-action"><span data-kit-region="label">Save card</span></button></div>
      </div>
      <button type="button" data-kit-role="secondary-action" commandfor="role-agreement-dialog" command="close"><span data-kit-region="label">Keep current card</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<details>
  <summary>Change card while the current card is being checked</summary>
  <button type="button" id="role-agreement-inert-dialog-opener" data-kit-role="secondary-action" commandfor="role-agreement-inert-dialog" command="show-modal"><span data-kit-region="label">Change card</span></button>
  <dialog id="role-agreement-inert-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="role-agreement-inert-dialog-title">
    <h2 data-kit-region="heading" id="role-agreement-inert-dialog-title">Change card</h2>
    <div data-kit-region="form-groups">
      <form id="role-agreement-inert-dialog-card" action="#role-agreement-result" method="get">
        <div data-kit-role="form-group" data-kit-width="medium"><label for="role-agreement-inert-dialog-name">Name on card</label><input id="role-agreement-inert-dialog-name" name="name" autocomplete="cc-name" value="Aisha Khan" /><output for="role-agreement-inert-dialog-name">Aisha Khan</output></div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <div data-kit-role="agreement">
        <p data-kit-region="text">By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms" target="_blank" rel="noopener">Read the card terms</a>.</p>
        <div data-kit-role="action-group" data-kit-region="action"><button type="submit" form="role-agreement-inert-dialog-card" id="role-agreement-save-card" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="role-agreement-save-card-words"><span data-kit-region="label">Save card</span></button><p data-kit-region="words" id="role-agreement-save-card-words">Wait for the current card to be checked before saving.</p></div>
      </div>
      <button type="button" data-kit-role="secondary-action" commandfor="role-agreement-inert-dialog" command="close"><span data-kit-region="label">Keep current card</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p>After the action, the words agreed to stay with the record and go to the person who agreed.</p>
<div data-kit-layout="record" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="facts-related-records" aria-labelledby="role-agreement-accepted-title">
    <h2 id="role-agreement-accepted-title">Card terms, accepted</h2>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Version</dt><dd data-kit-region="value">1</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Accepted by</dt><dd data-kit-region="value">Aisha Khan</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Accepted</dt><dd data-kit-region="value"><time datetime="2025-02-03T11:40+00:00"><span>3 February 2025</span><wbr><span> at 11:40</span></time></dd></dl>
    </div>
  </section>
  <section data-kit-region="notes-files-history" aria-labelledby="role-agreement-accepted-history-title">
    <h2 id="role-agreement-accepted-history-title">History</h2>
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">Messages</h3>
      <div data-kit-region="content">
        <article data-kit-role="message-entry">
          <header>
            <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">OH</span></span>You</span>
            <time data-kit-region="time" datetime="2025-02-03T11:40+00:00"><span>3 February 2025</span><wbr><span> at 11:40</span></time>
          </header>
          <div data-kit-region="body" data-kit-authored-text="true"><p>By paying, you agree to the card terms and privacy statement.</p></div>
          <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to aisha@oakmereprimary.org</span></p>
        </article>
      </div>
    </div>
  </section>
</div>
<section id="role-agreement-terms" aria-labelledby="role-agreement-terms-title">
  <h3 id="role-agreement-terms-title">Card terms</h3>
  <p>Oakmere Village Hall keeps your card to charge the invoices you owe for your bookings. Each charge is taken on the invoice’s due date and is never more than the invoice’s amount due.</p>
  <p>We email you the invoice before its due date. You can remove your card from your account at any time; invoices after that are paid by bank transfer.</p>
  <p><a href="#role-agreement" data-kit-role="way-back"><span data-kit-region="label">Return to payment</span></a></p>
</section>
<section id="role-agreement-privacy" aria-labelledby="role-agreement-privacy-title">
  <h3 id="role-agreement-privacy-title">Privacy statement</h3>
  <p>Your payment details are kept with your invoice.</p>
  <p><a href="#role-agreement" data-kit-role="way-back"><span data-kit-region="label">Return to payment</span></a></p>
</section>
<section id="role-agreement-result" aria-labelledby="role-agreement-result-title">
  <h3 id="role-agreement-result-title">After the action</h3>
  <p>Each task above submits here. The page shows its own success.</p>
</section>

Previous, Attention item Next, Refusal

Human support