[% INCLUDE 'billing/tier.html' %]

<form action="/billing/[% billing.id %]/verify" method="POST" id="payment-form">
  <div class="payment-errors o-media o-media--error u-padding u-margin hide">
    <div class="o-media__img">[% flashIcon(level='error') %]</div>
    <p id="card-errors" class="o-media__body"></p>
  </div>

  <div class="o-layout o-layout--center u-margin-top">
    <div class="o-layout__item u-1/1 u-2/3@tablet u-3/5@desktop">

      <div class="input-container">
        <label for="number">Credit card</label>
      </div>

      <div id="card-element">
      </div>

      <div class="u-padding-vertical">
        <button type="submit" name="submit-btn" class="c-btn c-btn--primary u-1/1">
          [% i18n("Pay") %]
        </button>
      </div>
    </div>
  </div>

</form>

<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script id="variables" type="text/json">
  {
    "publishable_key": "[% billing.publishable_key %]"
  }
</script>
<script type="text/javascript" src="/content/billing/stripe.js"></script>
