integrate stripe

snippets/abos.html

@@ -8,13 +8,13 @@
 {{range .LastMetrics}}
 <div class="columns is-vcentered is-marginless">
   <div class="column is-full has-background-primary">
-    <span id="alias_{{.Deveui}}" class="is-size-5">{{.Alias}}</span>
-    <div class="select is-pulled-right is-vcentered">
+    <span id="alias_{{.Deveui}}" class="is-size-7-mobile is-size-4-tablet">{{.Alias}} (bis 01.01.2099)</span>
+    <div class="select is-pulled-right is-vcentered is-size-7-mobile">
       <select class="has-background-light">
-        <option>keine Verl&auml;ngerung</option>
-        <option>1 Jahr verl&auml;ngern</option>
-        <option>2 Jahre verl&auml;ngern</option>
-        <option>3 Jahre verl&auml;ngern</option>
+        <option>keine</option>
+        <option>1 Jahr</option>
+        <option>2 Jahre</option>
+        <option>3 Jahre</option>
       </select>
     </div>
   </div>
@@ -23,8 +23,27 @@
   <div class="column is-full"></div>
 </div>
 {{end}}
+<div>
+<button id="pay-button" class="button is-success">Pay</button>
 </div>
 
+<script src="https://js.stripe.com/v3/"></script>
+
+<script>
+
+var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
+
+$("#pay-button").click(function() {
+  stripe.redirectToCheckout({
+    sessionId: '{{.CheckoutSessionID}}'
+  }).then(function (result) {
+    // If `redirectToCheckout` fails due to a browser or network
+    // error, display the localized error message to your customer
+    // using `result.error.message`.
+  });
+});
+</script>
+
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
 {{end}}

snippets/payment_cancelled.html

@@ -0,0 +1,4 @@
+{{define "body_content"}}
+<p class="title is-4">Zahlung abgebrochen!</p>
+<p>Zahlung wurde abgebrochen</p>
+{{end}}

snippets/payment_received.html

@@ -0,0 +1,4 @@
+{{define "body_content"}}
+<p class="title is-4">Danke schoen!</p>
+<p>Danke fuer die Zahlung!</p>
+{{end}}

snippets/scales.html

@@ -103,11 +103,11 @@ Device ID: <span id="deveui"></span>
       </nav>
     </div>
   </div>
-  <p id="paid_until_{{.Deveui}}" class="has-text-centered" style="align-items: center;"><a class="button is-warning is-small" href="/abos.html">
-    <span class="icon">
-      <i class="fa fa-shopping-cart"></i>
+  <p id="paid_until_{{.Deveui}}" class="has-text-centered"><a class="button is-warning is-small" href="/abos.html">
+    <span class="has-text-centered is-size-6">aktiv bis 01.01.1999&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    <span class="icon is-medium">
+      <i class="fa fa-2x fa-cart-plus"></i>
     </span>
-    <span>Abo verl&auml;ngern (aktiv bis 01.01.1999)</span>
   </a></p>
 </div>
 <div>