Can handle apple pay requests with local certificate files.

frontend/components/ui/applePay.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="apple-pay-button-with-text apple-pay-button-white-with-text">
+    <div class="apple-pay-button-with-text apple-pay-button-white-with-text" @click="createPaymentRequest">
       <span class="text">Buy with</span>
       <span class="logo"></span>
     </div>
@@ -8,6 +8,88 @@
 </template>
 
 <script>
+export default {
+  methods: {
+    getApplePaySession(validationURL) {
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ validationURL })
+      };
+
+      return fetch('/api/applepay/validateSession', options)
+        .then(resp => resp.json())
+    },
+    makeApplePayPaymentTransaction(payment) {
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ payment })
+      };
+
+      return fetch('/api/applepay/pay', options)
+        .then(resp => resp.json())
+    },
+    createPaymentRequest() {
+      const paymentRequest = {
+        countryCode: 'NO',
+        currencyCode: 'NOK',
+        shippingMethods: [{
+          label: 'Free Shipping',
+          amount: 0.00,
+          identifier: 'free',
+          detail: 'Delivers in five business days'
+        }, {
+          label: 'Express Shipping',
+          amount: 5.00,
+          identifier: 'express',
+          detail: 'Delivers in two business days',
+        }],
+        lineItems: [{
+          label: 'Shipping',
+          amount: 0.00
+        }],
+        total: {
+          label: 'Apple Pay Example',
+          amount: 8.99
+        },
+        supportedNetworks: [ 'amex', 'discover', 'masterCard', 'visa'],
+        merchantCapabilities: [ 'supports3DS'],
+        requiredShippingContactFields: [ 'postalAddress', 'email' ]
+      };
+
+      const session = new ApplePaySession(6, paymentRequest);
+
+      session.onvalidatemerchant = event => {
+        console.log("Validate merchante");
+        console.log('event: ', event);
+
+        const validationURL = event.validationURL;
+        this.getApplePaySession(validationURL).then(response => {
+          console.log('response from getApplePaySession:', response);
+          session.completeMerchantValidation(response);
+        })
+      }
+
+      session.onpaymentauthorized = event => {
+        this.makeApplePayPaymentTransaction(event.payment).then(response => {
+          console.log('response from pay:', response);
+
+          if (response.approved)
+            session.completePayment(ApplePaySession.STATUS_SUCCESS)
+          else
+            session.completePayment(ApplePaySession.STATUS_FAILURE)
+        })
+      }
+
+      session.begin();
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -21,9 +103,6 @@
     .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;
     }