Legacy Adyen commercetools to SDK v2
We created this migration guide to help you get up and running quickly with the new Adyen integration. If you have any questions, please reach out to us on Discord, or contact your dedicated Alokai Customer Support Contact.
There were breaking changes in v11. If you do not upgrade your extension and notification module to version ^11 payments will not work.
The extension and notification module versions ^11 are not compatible with @vsf-enterprise/adyen-commercetools You must
manage the deployment so that compatible versions are deployed together.
See the compatibility matrix to see which versions are compatible with one another.
Prerequisites
Before you start, make sure you have a project that meets the following requirements:
1
2
Update configuration
Remove payment error view
- {
- name: 'adyen-payment-error',
- path: '/adyen-payment-error',
- component: resolve(__dirname, 'pages/AdyenPaymentError.vue')
- }
Update useRawSource configuration
{
useRawSource: {
- dev: ['@vue-storefront/core', '@vsf-enterprise/commercetools', '@vsf-enterprise/adyen-commercetools'],
- prod: ['@vue-storefront/core', '@vsf-enterprise/commercetools', '@vsf-enterprise/adyen-commercetools'],
+ dev: ['@vue-storefront/core', '@vsf-enterprise/commercetools', '@vsf-enterprise/adyen-commercetools-sdk'],
+ prod: ['@vue-storefront/core', '@vsf-enterprise/commercetools', '@vsf-enterprise/adyen-commercetools-sdk']
}
}
Remove outdated Adyen module configuration
- ['@vsf-enterprise/adyen-commercetools/nuxt', {
- availablePaymentMethods: ['scheme', 'paypal', 'ideal', 'klarna', 'klarna_account', 'klarna_paynow', 'paywithgoogle'],
- clientKey: '****',
- environment: 'test',
- recurringPayments: true,
- methods: {
- paypal: {
- merchantId: '****',
- intent: 'authorize'
- }
- }
- }],
Update Adyen commercetools integration's configuration in middleware.config.js
adyen: {
- location: '@vsf-enterprise/adyen-commercetools/server',
+ location: '@vsf-enterprise/adyen-commercetools-api/server',
configuration: {
ctApi: {
apiHost: '<API_HOST>',
authHost: '<AUTH_HOST>',
projectKey: '<PROJECT_KEY>
clientId: '<CLIENT_ID',
clientSecret: '<CLIENT_SECRET>',
- scopes: ['manage_project:<CT_PROJECT_KEY>']
+ scopes: ['manage_payments:<CT_PROJECT_KEY>', 'manage_orders:<CT_PROJECT_KEY>', 'view_types:<CT_PROJECT_KEY>']
},
adyenApiKey: '<ADYEN_API_KEY>',
adyenMerchantAccount: '<ADYEN_MERCHANT_ACCOUNT>',
- adyenRecurringApiBaseUrl: 'https://pal-test.adyen.com',
- adyenCheckoutApiBaseUrl: '<ADYEN_CHECKOUT_API_BASE_URL>',
+ adyenEnvironment: 'TEST',
+ integrationName: 'adyen',
+ origin: 'https://my-alokai-frontend.local', // URL of frontend
- buildRedirectUrlAfterAuth: (paymentAndOrder) => `/checkout/thank-you?paymentId=${paymentAndOrder.id}`,
- buildRedirectUrlAfterError: () => '/adyen-payment-error'
- buildCustomPaymentAttributes: (client: CommercetoolsClient & { cartId: string, paymentId: string }): Promise<Record<string, any>> => {},
+ buildCustomPaymentAttributes: (params: BuildCustomPaymentAttributesParams): Promise<Record<string, any>> => {},
}
}
The signature of the buildCustomPaymentAttributes function changed. But it's still used to extend payload sent to the POST /payments.
Coming back from redirect based payment method
4
Initialize SDK
Create a directory and file for the SDK configuration (@/sdk/index.ts):
It's fine to still use composable to communicate with commercetools. But not for Adyen anymore. We installed both here for simplicity.
import { initSDK, buildModule } from '@vue-storefront/sdk';
import { adyenCtModule } from '@vsf-enterprise/adyen-commercetools-sdk';
export const sdk = initSDK({
adyen: buildModule(
adyenCtModule, {
apiUrl: 'http://localhost/api/adyen',
adyenClientKey: '<ADYEN_CLIENT_KEY>',
adyenEnvironment: '<ADYEN_ENV>'
}
)
});
5
Update pages/Checkout/Payment.vue
Replace PaymentAdyenProvider in template:
<template>
...
<PaymentAdyenProvider
:afterPay="afterPayAndOrder"
/>
...
</template>
With:
<template>
...
<div id="adyen-payment-element"></div>
...
</template>
Import useRoute:
- import { ref, computed, watch, onMounted, useRouter, useContext } from '@nuxtjs/composition-api';
+ import { ref, computed, watch, onMounted, useRoute, useRouter, useContext } from '@nuxtjs/composition-api';
Remove PaymentAdyenProvider import:
- import PaymentAdyenProvider from '@vsf-enterprise/adyen-commercetools/src/PaymentAdyenProvider';
Import sdk:
<script>
import { sdk } from '~/sdk';
</script>
Add useRoute to setup:
<script>
export default {
setup() {
const route = useRoute();
...
}
}
</script>
Replace afterPayAndOrder with createAdyenDropin in setup:
Remove afterPayAndOrder function and return statement:
<script>
export default {
setup() {
...
- const afterPayAndOrder = async ({ order }) => {
- context.root.$router.push(`/checkout/thank-you?order=${order.id}`);
- setCart(null);
- };
return {
- afterPayAndOrder,
...
}
}
</script>
Fetch available payment methods and mount payment element:
You don't need to export the sdk variable for the template
Call createAdyenDropin in onMounted.