on-prem-payment/index.html at master · koding/on-prem-payment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
---
layout: default
title: Koding Custom Billing
---

<!-- HEADER -->
{% include header.html has_sticky_navigation='true' exclude_main_nav='true' %}
<style>{% include css/micropage.css %}</style>
<style>{% include css/signup.css %}</style>
<link rel="stylesheet" href="{{ site.url }}/css/custom-radio.css">

<main class="Micropage">
  <div class="Micropage--container">

    <h1>Custom / On-Prem Billing</h1>
    <h3>Please enter your card details</h3>
    <div class="stripe--container">

      <form>
        <div class="group">
          <label>
            <span>Name</span>
            <input name="cardholder-name" class="field" placeholder="Jane Doe" />
          </label>
          <label>
            <span>Email</span>
            <input name="cardholder-email" class="field" placeholder="janedoe@company.com" />
          </label>
          <label>
            <span>Phone</span>
            <input name="cardholder-phone" class="field" placeholder="(123) 456-7890" type="tel" />
          </label>
        </div>
        <div class="group">
          <label>
            <span>Card</span>
            <div id="card-element" class="field"></div>
          </label>
        </div>
        <button id="payment-submit-button" type="submit">SUBMIT</button>
        <div class="outcome">
          <div class="error" role="alert"></div>
        </div>
        <div class='outcome'><img src="{{ site.url }}/assets/powered_by_stripe.svg" alt="Powered by Stripe"></div>
      </form>

    </div>
  </div>
  <figure class="Micropage--UFO"></figure>
  <figure class="Micropage--Ground"></figure>
</main>

{% include analytics.html %}
{% include stripe.html %}