This module allows payments through Adyen Payments from Vue Storefront using Magento as backend.
The module follows Adyen's recomendations for integrating a PWA using their magento extension.
Before starting to integrate this module in your VueStorefront project, you will have to set-up the following:
$ git clone https://github.com/jimmylion/vsf-payment-adyen.git ./vue-storefront/src/modules/adyen
config/local.json
Add API Key and paypal endpoint to hendle PayPal result from adyen.
"adyen": {
"originKey": "origin_key",
"paypalResultHandler": "https://your-backend/adyen-end-points/paypal",
"environment": "test",
"saveCards": true/false,
"allow3DS2": true/false,
"originKeys": {
"http://localhost:3000": "your localhost origin_key",
"https://staging.your-vsf.com": "your staging origin_key",
"https://your-vsf.com": "your production origin key"
}
},
set Driver for adyen
"localForage": {
"defaultDrivers": {
...
"adyen": "LOCALSTORAGE"
}
}
In ./src/modules/index.ts
...
import { PaymentAdyen } from './payment-adyen';
export const registerModules: VueStorefrontModule[] = [
...,
PaymentAdyen
]
Under your theme components/core/blocks/Checkout/Payment.vue
.
export default {
components: {
...
AdyenPayments: () =>
import("src/modules/payment-adyen/components/AdyenPayments.vue")
},
@todo - explain where and how to include the FinishPayment component. In our case it is in: src/themes/jimmylion-theme/pages/Checkout.vue src/themes/jimmylion-theme/components/ui/Checkout/OrderReview.vue
Also add form component to your template:
<AdyenPayments
v-show="payment.paymentMethod === 'adyen_cc' && adyenVisible"
@providedAdyenData="providedAdyenData"
/>
export default {
name: 'CardForm',
data () {
return {
...
csfSetupObj: {