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;
     }

server/controllers/applePay.js

@@ -0,0 +1,46 @@
+const fetch = require('node-fetch')
+const fs = require('fs')
+const path = require('path')
+const https = require('https')
+
+const validateWithApple = (appleUrl) => {
+  const httpsAgent = new https.Agent({
+    rejectUnauthorized: false,
+    cert: fs.readFileSync(path.join(__dirname, '../assets/certificate_sandbox.pem')),
+    key: fs.readFileSync(path.join(__dirname, '../assets/certificate_sandbox.key'))
+  })
+
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({
+      merchantIdentifier: 'merchant.com.planetposen.sandbox',
+      domainName: 'planet.kevinmidboe.com',
+      displayName: 'Planetposen'
+    }),
+    agent: httpsAgent
+  }
+
+  return fetch(appleUrl, options)
+    .then(resp => resp.json())
+}
+
+const validateSession = async (req, res) => {
+  const { validationURL } = req.body;
+
+  const appleData = await validateWithApple(validationURL)
+  return res.json(appleData)
+}
+
+const pay = (req, res) => {
+  const { payment } = req.body;
+
+  const { token } = payment;
+  console.log('payment data: ', token);
+
+  res.send({ approved: true })
+}
+
+module.exports = {
+  validateSession,
+  pay
+}