Stripe Add Subscription Modal

stripeAddSub.html

<div class="modal" style="opacity: 1; -webkit-transform: none; top: 130px; display: block;"><div class="subscription-add-or-edit-view standard modal-dialog-form-content-view"><div class="modal-inner">

    <div class="modal-header">
        <h2>Add subscription</h2>
    </div>

    <div class="modal-sheet-inner">
        <div class="modal-content">

          <span class="modal-error">
          </span>

          

          <div class="content"><div class="subscription-form-view"><div class="create-form">



<form class="form">
  <div class="error form_error form_message">
  </div>
  <div class="container">
    <div class="dropdown-container"><div class="placeholder full_field" name="plan"><div class="dropdown-search-field-view form-row plan">
<div class="dropdown-search-widget-view plan">
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_kqi84cvkm0m86w29" style="width: auto;">   <span class="select2-chosen">&nbsp;</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="kqi84cvkm0m86w29" class="field select2-offscreen" type="hidden" name="plan" placeholder="Choose a plan..." tabindex="-1" title="">
</div>
<span class="tooltip_placeholder"></span>
<span id="plan_error" class="field_error "></span>
<span id="plan_success" class="field_success"></span>
</div></div></div>

      <!-- Plan list -->
      <!-- Loading state -->
      <div class="loading" style="display: none;">
        Loading plans...
      </div>

      <!-- Has subscriptions -->
      <div class="plans">
        
        <div class="empty hidden">
          
            <p>You have no plans yet.  <a class="create_plan">Create one.</a></p>
          
        </div>
      </div>

      <div class="prorate-option checkbox-field-view form-row" style="display: none;">
        <div class="placeholder full_field" name="prorate"><div class="checkbox-field-view form-row prorate"><label class="default-label" for="prorate"><div class="checkbox-widget-view prorate"><input class="edit_mode field" type="checkbox" name="prorate" id="prorate" value="" style="display: none;">
</div>Prorate fee<span class="tooltip_placeholder"></span></label>

<span id="prorate_error" class="field_error "></span>
<span id="prorate_success" class="field_success"></span></div></div>
        <div class="prorate-option-explanation">
  <em class="prorate-explanation">
    Prorating means we'll automatically adjust for the exact time spent on each plan. <a class="arrow" target="_blank" href="https://stripe.com/docs/api#update_subscription">Learn more</a>
  </em>
  <p class="prorate-forced-off-explanation">
    <em>This change keeps your trialing subscription still in trialing mode, so there's nothing to prorate.</em>
  </p>
  <p class="prorate-forced-on-explanation">
    <em>We'll immediately end the old subscription, restart the billing cycle, and credit the customer for unused time on the old subscription when you switch billing intervals (or vice versa) or add a trial period when the subscription wasn't trialing (or vice versa).</em>
  </p>
</div>
      </div>
    </div>

    <div class="show-advanced-options-control" style="display: block;"><div class="disclosure-triangle-view open"><a><span></span> More options</a></div></div>

    <!-- extra options -->
    <div class="container advanced-options" style="display: block;">
      <div class="placeholder full_field" name="quantity"><div class="form-field-view form-row quantity"><label for="quantity" class="default-label">Quantity:</label>
<div class="text-widget-view quantity">
<input id="kxp30vd38tmrhpvi" class="field" type="text" name="quantity">
</div>
<span class="tooltip_placeholder"></span>
<span id="quantity_error" class="field_error "></span>
<span id="quantity_success" class="field_success"></span>
</div></div>
      <div class="placeholder full_field" name="trial_end"><div class="date-to-timestamp-field-view form-row trial_end"><label for="trial_end" class="default-label">Trial end:</label>
<div class="date-to-timestamp-widget-view trial_end">
<input id="0puqhr4gbpjve7b9" class="field hasDatepicker" type="text" name="trial_end">
</div>
<span class="tooltip_placeholder"></span>
<span id="trial_end_error" class="field_error "></span>
<span id="trial_end_success" class="field_success"></span>
</div></div>
      <div class="placeholder full_field" name="coupon"><div class="dropdown-search-field-view form-row coupon"><label for="coupon" class="default-label">Coupon:</label>
<div class="dropdown-search-widget-view coupon">
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_c24bhkn6jxhnz5mi" style="width: auto;">   <span class="select2-chosen">&nbsp;</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="c24bhkn6jxhnz5mi" class="field select2-offscreen" type="hidden" name="coupon" placeholder="Select a coupon..." tabindex="-1" title="">
</div>
<span class="tooltip_placeholder"></span>
<span id="coupon_error" class="field_error "></span>
<span id="coupon_success" class="field_success"></span>
</div></div>
    </div>

    <div id="projection" class="hidden"></div>

  </form></div>




</div></div>
        </div>

        <div class="modal-footer">
            <div class="content"></div>
            <div class="spinner"><div class="spinner-view" style="display: none;"></div></div>
            
            <button name="close_modal" class="button medium grey"><span>Cancel</span></button>
            
            <button name="confirm" class="button medium blue"><span>Add subscription</span></button>
        </div>
    </div>
</div>
</div></div>