From 6f889cdfd4d6c3178886a222cccc9a0e7b29c294 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 19 Jul 2020 23:38:52 +0200
Subject: [PATCH] ApplePay checkout button (only frontend).

---
 frontend/components/Cart.vue        | 16 ++++-
 frontend/components/ui/applePay.vue | 91 +++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/ui/applePay.vue

diff --git a/frontend/components/Cart.vue b/frontend/components/Cart.vue
index 166fe15..9337f83 100644
--- a/frontend/components/Cart.vue
+++ b/frontend/components/Cart.vue
@@ -94,7 +94,10 @@
             </tbody>
           </table>
 
-          <Button color="blue" :scaleRotate="true">Gå til kassen</Button>
+        </div>
+        <div class="checkout-actions margin-top--lg">
+          <applePay />
+          <Button color="green" :small="true" :scaleRotate="true">Gå til kassen</Button>
         </div>
       </section>
     </div>
@@ -106,12 +109,14 @@
 import store from '@/store';
 import Picker from '@/components/ui/Picker'
 import Button from '@/components/ui/Button'
+import applePay from '@/components/ui/applePay';
 
 export default {
   name: 'Cart',
   components: {
     Picker,
-    Button
+    Button,
+    applePay
   },
   computed: {
     cartInventory() {
@@ -129,6 +134,7 @@ export default {
 
 <style lang="scss" scoped>
 @import 'frontend/styles/variables';
+@import 'frontend/styles/spacing';
 
 .checkout {
   @include desktop {
@@ -302,6 +308,12 @@ table {
   margin: 0 auto;
 }
 
+.checkout-actions {
+  > *:not(last-of-type) {
+    margin-bottom: 1rem;
+  }
+}
+
 .header {
   h2 {
     font-weight: 400;
diff --git a/frontend/components/ui/applePay.vue b/frontend/components/ui/applePay.vue
new file mode 100644
index 0000000..21e676b
--- /dev/null
+++ b/frontend/components/ui/applePay.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="apple-pay-button-with-text apple-pay-button-white-with-text">
+      <span class="text">Buy with</span>
+      <span class="logo"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+@supports (-webkit-appearance: -apple-pay-button) {
+    .apple-pay-button-with-text {
+        display: inline-block;
+        -webkit-appearance: -apple-pay-button;
+        -apple-pay-button-type: buy;
+        cursor: pointer;
+    }
+    .apple-pay-button-with-text > * {
+        display: none;
+    }
+    .apple-pay-button-black-with-text {
+        -apple-pay-button-style: black;
+    }
+    .apple-pay-button-white-with-text {
+        -apple-pay-button-style: white;
+    }
+    .apple-pay-button-white-with-line-with-text {
+        -apple-pay-button-style: white-outline;
+    }
+}
+
+@supports not (-webkit-appearance: -apple-pay-button) {
+    .apple-pay-button-with-text {
+        cursor: pointer;
+        --apple-pay-scale: 1; /* (height / 32) */
+        display: inline-flex;
+        justify-content: center;
+        font-size: 12px;
+        border-radius: 5px;
+        padding: 0px;
+        box-sizing: border-box;
+        min-width: 200px;
+        min-height: 32px;
+        max-height: 64px;
+    }
+    .apple-pay-button-black-with-text {
+        background-color: black;
+        color: white;
+    }
+    .apple-pay-button-white-with-text {
+        background-color: white;
+        color: black;
+    }
+    .apple-pay-button-white-with-line-with-text {
+        background-color: white;
+        color: black;
+        border: .5px solid black;
+    }
+    .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
+        background-image: -webkit-named-image(apple-pay-logo-white);
+        background-color: black;
+    }
+    .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
+        background-image: -webkit-named-image(apple-pay-logo-black);
+        background-color: white;
+    }
+    .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
+        background-image: -webkit-named-image(apple-pay-logo-black);
+        background-color: white;
+    }
+    .apple-pay-button-with-text > .text {
+        font-family: -apple-system;
+        font-size: calc(1em * var(--apple-pay-scale));
+        font-weight: 300;
+        align-self: center;
+        margin-right: calc(2px * var(--apple-pay-scale));
+    }
+    .apple-pay-button-with-text > .logo {
+        width: calc(35px * var(--scale));
+        height: 100%;
+        background-size: 100% 60%;
+        background-repeat: no-repeat;
+        background-position: 0 50%;
+        margin-left: calc(2px * var(--apple-pay-scale));
+        border: none;
+    }
+}
+</style>