American TESOL Course Upgrade — form code

Copy this code into the page on americantesol.com where the form should appear. Students already enrolled can add a course to their program for $150.

<div id="ati-upgrade">
  <style>
    #ati-upgrade { width: 100%; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0a0a0a; max-width: 560px; margin: 0 auto; }
    #ati-upgrade .ati-title { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
    #ati-upgrade .ati-sub { color: #6b7280; font-size: 14px; margin: 0 0 20px; }
    #ati-upgrade label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
    /* 16px inputs stop iOS Safari zooming in when a field is tapped */
    #ati-upgrade input, #ati-upgrade select { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid #d4d4d8; border-radius: 8px; font-size: 16px; background: #fff; color: #0a0a0a; }
    #ati-upgrade input:focus, #ati-upgrade select:focus { outline: none; border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(161,161,170,.25); }
    #ati-upgrade .ati-field { margin-bottom: 16px; }
    #ati-upgrade .ati-row { display: flex; gap: 16px; }
    #ati-upgrade .ati-row > * { flex: 1; }
    #ati-upgrade button { width: 100%; height: 48px; margin-top: 8px; border: 0; border-radius: 8px; background: #18181b; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
    #ati-upgrade button:disabled { opacity: .6; cursor: default; }
    #ati-upgrade .ati-secure { text-align: center; color: #6b7280; font-size: 12px; margin: 10px 0 0; }
    #ati-upgrade .ati-error { color: #b91c1c; font-size: 14px; margin: 10px 0 0; }
    /* payment step: hold the same width as the form */
    #ati-upgrade-checkout { width: 100%; }
    #ati-upgrade-checkout iframe { width: 100% !important; display: block; border: 0; }
    /* phones: this column has no width of its own, so give it the full page width */
    @media (max-width: 799px) {
      .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    }
    /* stack the name fields sooner so they don't crowd on phones */
    @media (max-width: 600px) { #ati-upgrade .ati-row { flex-direction: column; gap: 0; } }
  </style>

  <form id="ati-upgrade-form" novalidate>
    <h2 class="ati-title">American TESOL Course Upgrade</h2>
    <p class="ati-sub">Add a course to your current program.</p>

    <div class="ati-row">
      <div class="ati-field">
        <label for="ati-upgrade-first">First</label>
        <input id="ati-upgrade-first" autocomplete="given-name" />
      </div>
      <div class="ati-field">
        <label for="ati-upgrade-last">Last</label>
        <input id="ati-upgrade-last" autocomplete="family-name" />
      </div>
    </div>

    <div class="ati-field">
      <label for="ati-upgrade-email">Email *</label>
      <input id="ati-upgrade-email" type="email" autocomplete="email" />
    </div>

    <div class="ati-field">
      <label for="ati-upgrade-phone">Phone Number *</label>
      <input id="ati-upgrade-phone" type="tel" autocomplete="tel" />
    </div>

    <div class="ati-field">
      <label for="ati-upgrade-program">TESOL Program of Enrollment *</label>
      <select id="ati-upgrade-program">
        <option value="">- Select One -</option>
        <option value="advanced">TESOL Advanced Certification - $150</option>
        <option value="children">TESOL for Children Certification - $150</option>
        <option value="business">TESOL for Business Certification - $150</option>
      </select>
    </div>

    <button id="ati-upgrade-submit" type="submit">Continue to payment</button>
    <p class="ati-secure">Secure payment handled by Stripe</p>
    <p class="ati-error" id="ati-upgrade-error" hidden></p>
  </form>

  <div id="ati-upgrade-checkout"></div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
(function () {
  var STRIPE_PUBLISHABLE_KEY = 'pk_live_51CHshuLg9H2xFA5IuUrncK0Rrle10xMJwxDTSU2K9oiVBifPxDr7J1azZNOPfObRyiyjcxjiA9xLQGOI5sqSMaE200CIUaA54z';
  var ENDPOINT = 'https://americantesol.base44.app/functions/createCourseCheckout';
  var SUCCESS_URL = 'https://americantesol.com/study.html';

  // Each dropdown entry maps to the course key the server prices at $150.
  var PROGRAMS = {
    'advanced': 'upgrade_advanced',
    'children': 'upgrade_children',
    'business': 'upgrade_business'
  };

  var form = document.getElementById('ati-upgrade-form');
  var button = document.getElementById('ati-upgrade-submit');
  var errorEl = document.getElementById('ati-upgrade-error');
  var programEl = document.getElementById('ati-upgrade-program');
  var stripe = null;

  var value = function (id) { return document.getElementById(id).value.trim(); };
  var fail = function (message) {
    errorEl.textContent = message;
    errorEl.hidden = false;
    button.disabled = false;
    button.textContent = 'Continue to payment';
  };

  form.addEventListener('submit', async function (event) {
    event.preventDefault();
    errorEl.hidden = true;

    var student = {
      first_name: value('ati-upgrade-first'),
      last_name: value('ati-upgrade-last'),
      email: value('ati-upgrade-email'),
      phone: value('ati-upgrade-phone')
    };
    var course = PROGRAMS[programEl.value];

    if (!student.first_name || !student.last_name || !student.email || !student.phone) {
      fail('Please complete every required field.');
      return;
    }
    if (!course) {
      fail('Please choose your TESOL program of enrollment.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(student.email)) {
      fail('Please enter a valid email address.');
      return;
    }
    if (window.self !== window.top) {
      fail('This payment form must sit directly on the page — it can’t run inside a frame. Open americantesol.com in its own browser tab and try again.');
      return;
    }

    button.disabled = true;
    button.textContent = 'Starting secure checkout…';

    try {
      var res = await fetch(ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ course: course, embedded: true, successUrl: SUCCESS_URL, student: student })
      });
      var data = await res.json();
      if (!res.ok || !data.clientSecret) throw new Error(data.error || 'Checkout could not be started.');

      form.hidden = true;
      stripe = stripe || Stripe(STRIPE_PUBLISHABLE_KEY);
      var checkout = await stripe.initEmbeddedCheckout({ clientSecret: data.clientSecret });
      checkout.mount('#ati-upgrade-checkout');
    } catch (e) {
      fail(e.message || 'Checkout could not be started. Please try again.');
    }
  });
})();
</script>