API

On this page, you can learn what public API we share.

useAdyen composable

useAdyen composable contains properties and methods described below.


 



 
 
 
 
 
 
 
 
 




<script>
import { useAdyen } from '@vsf-enterprise/adyen-magento2';

export default {
  setup() {
    const {
      error,
      loading,
      paymentObject,
      createContext,
      buildDropinConfiguration,
      payAndOrder,
      submitAdditionalPaymentDetails
    } = useAdyen();
  }
};
</script>

Properties

  • error - Computed<AdyenError> - object containing errors' from asynchronous methods.
  • loading - Computed<Boolean> - a boolean value that indicates whether any async methods are pending.
  • paymentObject - Computed<any> - contains payment object from the Magento. It's value is updated by createContext, payAndOrder, submitAdditionalPaymentDetails methods described below.
interface AdyenError {
  submitAdditionalPaymentDetails: Error | null,
  createContext: Error | null,
  payAndOrder: Error | null
}

Methods

  • createContext - Loads a cart, then fetches available payment methods for the loaded cart and saves the response in the paymentObject object.
  • buildDropinConfiguration - (config: AdyenConfigBuilder): any - Builds a configuration object for Adyen's Web Drop-In.
  • payAndOrder - Initializes a payment process and creates an order in Magento. The response will be stored in the paymentObject object.
  • submitAdditionalPaymentDetails - Sends additional details of payment to the Adyen. The response will be stored in the paymentObject object.
interface AdyenConfigBuilder {
  paymentMethodsResponse,
  paymentMethodsExtraDetails,
  onChange = (state, component) => {},
  onSubmit = (state, component) => {},
  onAdditionalDetails = (state, component) => {},
  onError = (state) => {},
  onCancel = (state) => {}
}

Components

PaymentAdyenProvider component fetches available payment methods and mounts Adyen's Web Drop-In. It takes care of the whole flow of the payment. It allows you to hook into specific events by passing functions via props:

<template>
  <PaymentAdyenProvider
    :afterPay="afterPayAndOrder"
  />
</template>

<script>
import {
  useCart
} from '@vue-storefront/magento';
import PaymentAdyenProvider from '@vsf-enterprise/adyen-magento2/src/PaymentAdyenProvider';

export default {
  components: {
    PaymentAdyenProvider
  },
  setup(_, context) {
    const { cart, load, setCart } = useCart();
    const afterPayAndOrder = async ({ order }) => {
      context.root.$router.push(`/checkout/thank-you?order=${order.id}`);
      setCart(null);
    };

    return {
      afterPayAndOrder
    }
  }
}
</script>
  • beforeLoad - config => config - Called just before creating an instance of the AdyenCheckout and mounting a Drop-In.
  • beforePay - stateData => stateData - Called just before calling a payAndOrder. You can modify the payload inside of it before it's sent to Adyen.
  • afterPay - paymentAndObject: Payment & { order: { id: string }} => void - Called when the payment is Authorized and an order has been placed.
  • afterSelectedDetailsChange - Called inside onChange of Adyen's Drop-In.
  • onError - (data: { action: string, error: Error | string }) => void - Called when there is an error from either Adyen or Vue Storefront middleware.

The component has one named slot called payment-refused. It is a message in the box that shows above Adyen's Drop-in just after you provide wrong credentials for non-3DS card (e.g. 4646 4646 4646 4644 03/30 with wrong CVC). You can use it to change the message and the whole box.

<PaymentAdyenProvider
  :afterPay="afterPayAndOrder"
>
  <template #price-refused>
    My custom message!
  </template>
</PaymentAdyenProvider>
← Paypal
Changelog →