Commercetools: Quickstart
Like the Adyen Integration, this guide is framework-agnostic. The examples focus on the integration. Use whatever conventions your framework uses.
Prerequisites
Before you start, make sure you have a project that meets the following requirements:
1
2
Configuration For Commercetools
Add Adyen configuration to your middleware.config.ts
// ...
adyen: {
location: '@vsf-enterprise/adyen-commercetools-api/server',
configuration: {
ctApi: {
apiHost: '<CT_HOST_URL>',
authHost: '<CT_AUTH_URL>',
projectKey: '<CT_PROJECT_KEY>',
clientId: '<CT_CLIENT_ID>',
clientSecret: '<CT_CLIENT_SECRET>',
scopes: ['manage_payments:<ADYEN_PROJECT_IDENTIFIER>', 'manage_orders:<ADYEN_PROJECT_IDENTIFIER>', 'view_types:<ADYEN_PROJECT_IDENTIFIER>']
},
adyenApiKey: '<ADYEN_API_KEY>',
adyenMerchantAccount: '<ADYEN_MERCHANT_ACCOUNT>',
adyenEnvironment: 'TEST',
integrationName: 'adyen', // Keyname containing this integration object
origin: 'https://my-alokai-frontend.local', // URL of frontend
}
},
// ...
Coming back from redirect based payment method
3
Register SDK module for Adyen commercetools
// ...
import { adyenCtModule } from '@vsf-enterprise/adyen-commercetools-sdk';
export const { getSdk } = createSdk(
options,
({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders, defaults }) => {
return {
// ...
adyen: buildModule(
adyenCtModule, {
apiUrl: `${middlewareUrl}/adyen`,
adyenClientKey: 'test_******',
adyenEnvironment: 'test',
}
)
};
},
);
4
Create Payment Component/Page For Commercetools
Add the payment-element to the template:
// In your template, e.g. Payment.vue
...
<div id="adyen-payment-element"></div>
...
Prepare logic responsible for handling payment, and call it:
This snippet has placeholder to inject logic responsible for placing an order. You can find it easily by looking for the following string and replacing it with your code for placing an order.
// Here put a code to place an order and redirect to success page.
If you are using redirect-based payments, there is an additional step required.
React in strict mode in development calls useEffect(fn, []); twice. This can break Adyen Drop-in. Please make sure you call createAdyenDropin only once.
Make sure you passed shopperLocale to the createAdyenDropin function in order to have Adyen Drop-in in expected language.
5