vue-storefront-next-adyen

concurrent with merchant server for Merchant server with payment client key

Usage no npm install needed!

<script type="module">
  import vueStorefrontNextAdyen from 'https://cdn.skypack.dev/vue-storefront-next-adyen';
</script>

README

Features

  • Nuxt module for Payment in vue-storefront.

Install & Basic Usage

npm i vue-storefront-next-adyen
 <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-next-adyen/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"
}]