README
Features
- Nuxt module for Payment in vue-storefront.
Install & Basic Usage
npm i vue-storefront-commercetools-adyen-payment
<PaymentAdyenProvider
v-model="loading_payment"
v-if="cart"
:cart="cart"
@loaded="Loaded"
@paid="handlePaymentSuccess"
@failed = "handleFailed"/>
Example
<template>
<div class="form">
<div class="form__element payment-methods" v-if="!paid">
<PaymentAdyenProvider v-model="loading_payment" v-if="cart" :cart="cart" @paid="paymentSuccess"/>
</div>
<div class="form__action">
<SfButton class="form__action-button" @click.prevent="loading_payment = true" :disabled="loading.billingAddress || loading_payment" v-else-if="!paid">
{{ $t('Select payment method') }}
</SfButton>
</div>
</div>
</template>
<script>
import { useCart} from '@vue-storefront/commercetools';
export default {
name: 'Payment',
data(){
return {
loading_payment: false,
}
},
computed: {
paid: function(){
return !!this.cart.paymentInfo.payments
}
},
setup(props, context) {
const { cart, load: loadCart } = useCart();
onSSR(async () => {
// await loadPaymentMethods();
await loadCart();
});
const handleFormSubmit = async () => {
await setBillingDetails(billingDetails.value, { save: true });
context.root.$router.push('/checkout/order-review');
};
return { cart };
},
methods:{
paymentSuccess(state){
if (state == true)
this.handleFormSubmit()
}
},
};
</script>
Nuxt Config Setting(Nuxt.config.js)
add the module in buildModules
['vue-storefront-commercetools-adyen-payment/nuxt',
{
API_URL_MERCHANT: "https://your merchander server for payments",
# allowed payment methods
ADYEN_PAYMENT_METHODS: [
"scheme",
"ideal",
"paypal",
"visa",
...
],
ADYEN_CLIENT_KEY: "test_xxx",
PAYPAL_MERCHANT_ID: "13-digit"
}]