Use at Your own risk.
- Adyen CreditCard payment
- Adyen field validation and encryption.
- Add notifications depend on Adyen callbacks.
- Add other payments methods.
If you have any questions or suggestion then please feel free to drop a line ;)
$ git clone [email protected]:melvin-hamilton-digital/vsf-payment-adyen.git ./vue-storefront/src/modules/adyen
Add API Key to your config/local.json
.
"adyen": {
"originKey": "origin_key"
}
In ./src/modules/index.ts
...
import { Adyen } from './adyen'
export const registerModules: VueStorefrontModule[] = [
...,
Adyen
]
Under your theme components/core/blocks/Checkout/Payment.vue
.
import CardForm from 'src/modules/adyen/components/CardForm'
export default {
components: {
...
CardForm
},
...
computed: {
...
isAdyenValid () {
return this.$store.state.adyen.isAdyenValid
}
},
Also add form component to your template:
<card-form v-if="payment.paymentMethod === 'adyenCreditCard'"/>
and !isAdyenValid to "Go review the order" button, for disabling it until all card data was validate.
<button-full
@click.native="sendDataToCheckout"
data-testid="paymentSubmit"
:disabled="$v.payment.$invalid || !isAdyenValid"
>
{{ $t('Go review the order') }}
</button-full>
In vue-storefront/src/modules/adyen/components/CardForm.vue find csfSetupObj
inside you can add styles, placeholders, define rootNode etc.
export default {
name: 'CardForm',
data () {
return {
...
csfSetupObj: {