API

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

• @vsf-enterprise/adyen-commercetools exports a useAdyen composable.
• @vsf-enterprise/adyen-commercetools/src/PaymentAdyenProvider exports a VSF Payment Provider (opens new window) component as a default.

useAdyen composable

useAdyen composable contains properties and methods described below.

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

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 commercetools. 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 - Sets a value of the custom field named makePaymentRequest in the commercetools' payment object. Commercetools will send it to the Adyen and save the response in the paymentObject object.
• submitAdditionalPaymentDetails - Sets a value of the custom field named submitAdditionalPaymentDetailsRequest in the commercetools' payment object. Commercetools will send it to the Adyen and save the response in the paymentObject object.

interface AdyenConfigBuilder {
  paymentMethodsResponse,
  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 '@vsf-enterprise/commercetools';
import PaymentAdyenProvider from '@vsf-enterprise/adyen-commercetools/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 => Promise<config> - Called just before creating an instance of the AdyenCheckout and mounting a Drop-In.
• beforePay - (stateData, adyenHookName: 'onSubmit'|'onAdditionalDetails') => Promise<stateData> - Called just before calling a payAndOrder or submitAdditionalPaymentDetails. You can modify the payload inside of it before it's sent to Adyen. If you return false here then you will prevent payment.
• afterPay - paymentAndObject: PaymentAndOrder => Promise<void> - Called after when the result code from the Adyen is Authorized and an order has been placed.
• afterSelectedDetailsChange - Called inside onChange of Adyen's Drop-In.
• onError - (data: { action: string, error: Error | string }) => Promise<void> - Called when there is an error from either Adyen or Vue Storefront API.

The component has three named slots. The first is 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 #payment-refused>
    My custom message!
  </template>
</PaymentAdyenProvider>

The second is called price-mismatch. It is a message in the box that shows above Adyen's Drop-in if price of your cart has been changed since payment has been initialized. It might happen if you modify the cart. Our integration will handle change, generate new payment object and ask user to provide payment details once again with refreshed price. You can use it to change the message and the whole box.

<PaymentAdyenProvider
  :afterPay="afterPayAndOrder"
>
  <template #price-mismatch>
    My custom message!
  </template>
</PaymentAdyenProvider>

The third is called payment-refused-by-beforePay. It is a message in the box that shows above Adyen's Drop-in just after you return false in beforePay hook.

<PaymentAdyenProvider
  :afterPay="afterPayAndOrder"
>
  <template #payment-refused-by-beforePay>
    My custom message!
  </template>
</PaymentAdyenProvider>