custom-payment-flow/client/html/becs-debit.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>BECS Direct Debit</title>

    <link rel="stylesheet" href="css/base.css" />
    <script src="https://js.stripe.com/v3/"></script>

    <script src="/utils.js" defer></script>
    <script src="/becs-debit.js" defer></script>
  </head>
  <body>
    <main>
      <a href="/">home</a>
      <h1>BECS Direct Debit</h1>

      <p>
        Note: BECS Direct Debit requires a Stripe account with an <code>aud</code> bank account.
      </p>

      <p>
        <h3>Test account details</h3>
        <span>BSB: <code>000-000</code></span>
        <span>Account: <code>000123456</code></span>
      </p>

      <form id="payment-form">
        <label for="name"> Name </label>
        <input id="name" placeholder="Jenny Rosen" required />

        <label for="email"> Email Address</label>
        <input id="email" type="email" placeholder="jenny.rosen@example.com" />

        <label for="au-bank-account-element">
          Bank Account
        </label>
        <div id="au-bank-account-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>

        <div id="bank-name"></div>

        <!-- Used to display form errors. -->
        <div id="error-message" role="alert"></div>

        <!-- Display mandate acceptance text. -->
        <div class="col" id="mandate-acceptance">
          By providing your bank account details and confirming this payment,
          you agree to this Direct Debit Request and the
          <a href="stripe.com/au-becs-dd-service-agreement/legal">Direct Debit Request service agreement</a>,
          and authorise Stripe Payments Australia Pty Ltd ACN 160 180 343
          Direct Debit User ID number 507156 (“Stripe”) to debit your account
          through the Bulk Electronic Clearing System (BECS) on behalf of
          (the "Merchant") for any amounts separately
          communicated to you by the Merchant. You certify that you are either
          an account holder or an authorised signatory on the account listed above.
        </div>

        <button id="submit-button">Pay</button>
      </form>

      <div id="messages" role="alert"></div>
    </main>
  </body>
</html>