Kidl / vsf-apple-pay

Vue Storefront Apple Pay Payment Extension

The Apple Pay Payment module for vue-storefront.

Installation

By hand (preferer):

git clone [e-mail]:AbsoluteWebServices/vsf-apple-pay.git ./vue-storefront/src/modules/

Registration the ApplePay module. Go to ./vue-storefront/src/modules/index.ts

...
import { ApplePay } from './vsf-apple-pay';

export const registerModules: VueStorefrontModule[] = [
  ...
  ApplePay
]

Add following settings to your config file.

  "applePay": {
    "environment": "Sandbox",
    "merchantId": "merchant.com.example.mystore",
    "merchantName": "Example merchant name",
    "supportedNetworks": ["visa", "masterCard", "amex", "discover"],
    "merchantCapabilities": ["supports3DS", "supportsCredit", "supportsDebit", "supportsEMV"],
    "endpoint": {
      "paymentSession": "http://localhost:8080/api/ext/apple-pay/paymentSession"
    }
  },

Add Apple Pay button to checkout page. It is recommended to replace "Place order" button with Apple Pay button when Apple Pay selected as payment method.

...
import ApplePayButton from 'src/modules/vsf-apple-pay/components/ApplePayButton'

export default {
  ...
  components: {
    ...
    ApplePayButton
  },
  ...
  computed: {
    ...
    paymentMethod () {
      return this.$store.state.checkout.paymentDetails.paymentMethod
    }
  }
  ...
}

<apple-pay-button
  v-if="paymentMethod == 'applePay'"
  @payment-authorized="placeOrder"
/>

API extension

Install additional extension for vue-storefront-api:

cp -f ./vue-storefront/src/modules/vsf-apple-pay/API/apple-pay ./vue-storefront-api/src/api/extensions/

Add the config to your api config.

"extensions":{
   "apple-pay": {
     "merchantId": "merchant.com.example.mystore",
     "merchantName": "Example merchant name"
  }

Create a merchant identity certificate and place it to ./vue-storefront-api/config/certificates/apple-pay-merchant-identity-certificate.cer