~sircmpwn/meta.sr.ht

ref: 72548bd7545f78670878667674cc7645835a17bd meta.sr.ht/metasrht/templates/new-payment.html -rw-r--r-- 4.5 KiB
72548bd7Drew DeVault API: Updates per core-go auth changes 1 year, 1 month ago
                                                                                
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
{% extends "layout.html" %}
{% block title %}
<title>Add payment method - {{cfg("sr.ht", "site-name")}}</title>
{% endblock %}
{% block content %}
<div class="row">
  <div class="col-md-4">
    <p>
      Thank you for supporting {{cfg("sr.ht", "site-name")}}!
      {% if current_user.user_type != UserType.active_paying %}
      You will be charged when you click "submit payment", and your plan will
      be automatically renewed at the end of the term.
      {% endif %}
      Your payment information is securely processed by
      <a href="https://stripe.com/" target="_blank">Stripe</a>.
    </p>
  </div>
  <div class="col-md-8">
    <h3>Payment information</h3>
    <noscript>
      <div class="alert alert-danger">
        <strong>JavaScript required</strong>.
        This is the only page which requires JavaScript. We require it here
        to protect your payment information by transmitting it directly to
        the payment processor. To proceed, please enable JavaScript and
        refresh the page. You can disable it again once your payment is
        complete and the rest of the site will work normally.
      </div>
    </noscript>
    <form method="POST" id="payment-form" style="display: none">
      {{csrf_token()}}
      <div class="form-group">
        <label for="card-element" style="font-weight: bold">
          Payment details
        </label>
        <div id="card-element" class="form-control"></div>
        <div id="card-error" class="invalid-feedback">
        </div>
      </div>
      {% if error %}
      <div class="alert alert-danger">
        {{error}}
      </div>
      {% endif %}
      <fieldset style="margin-bottom: 1rem">
        <legend style="font-weight: bold">Payment term</legend>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="radio"
            name="term"
            id="term-monthly"
            value="monthly"
            checked>
          <label class="form-check-label" for="term-monthly">
            ${{"{:.2f}".format(amount / 100)}} per month
          </label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="radio"
            name="term"
            id="term-yearly"
            value="yearly">
          <label class="form-check-label" for="term-yearly">
            ${{"{:.2f}".format(amount / 100 * 10)}} per year
          </label>
        </div>
      </fieldset>
      <input type="hidden" name="stripe-token" id="stripe-token" />
      <div class="form-group">
        {% if current_user.user_type == UserType.active_paying %}
        <button class="btn btn-primary" type="submit">
          Add payment method
          {{icon('caret-right')}}
        </button>
        {% else %}
        <button class="btn btn-primary" type="submit">
          Submit payment
          {{icon('caret-right')}}
        </button>
        {% endif %}
      </div>
      <p>
        Your payment is securely processed with
        <a href="https://stripe.com/">Stripe</a> over an encrypted connection.
        Your credit card details are never sent
        to {{cfg("sr.ht", "site-name")}} servers.
      </p>
    </form>
  </div>
</div>
<script src="https://js.stripe.com/v3/?advancedFraudSignals=false"></script>
<script>
document.getElementById('payment-form').style.display = 'block';
var stripe = Stripe('{{cfg("meta.sr.ht::billing", "stripe-public-key")}}');
var elements = stripe.elements();
var amount = {{amount}};
var card = elements.create('card');
card.mount('#card-element');
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-error');
  var cardElement = document.getElementById('card-element');
  if (event.error) {
    displayError.textContent = event.error.message;
    cardElement.classList.add('is-invalid');
  } else {
    displayError.textContent = '';
    cardElement.classList.remove('is-invalid');
  }
});
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      var errorElement = document.getElementById('card-error');
      var cardElement = document.getElementById('card-element');
      errorElement.textContent = result.error.message;
      cardElement.classList.add('is-invalid');
    } else {
      document.getElementById('stripe-token').value = result.token.id;
      form.submit();
    }
  });
});
</script>
{% endblock %}