The Apple Pay Payment module for vue-storefront.
By hand (preferer):
git clone git@github.com: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"
/>
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