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
Add Adyen configuration to your middleware.config.js
middleware.config.js
...
api: {
...
scopes: [
'create_anonymous_token:<ADYEN_PROJECT_IDENTIFIER>',
'manage_my_orders:<ADYEN_PROJECT_IDENTIFIER>',
'manage_my_payments:<ADYEN_PROJECT_IDENTIFIER>',
'manage_my_profile:<ADYEN_PROJECT_IDENTIFIER>',
'manage_my_shopping_lists:<ADYEN_PROJECT_IDENTIFIER>',
'view_categories:<ADYEN_PROJECT_IDENTIFIER>',
'view_products:<ADYEN_PROJECT_IDENTIFIER>',
'view_stores:<ADYEN_PROJECT_IDENTIFIER>'
]
...
serverApi: {
clientId: '<CT_CLIENT_ID>',
clientSecret: '<CT_CLIENT_SECRET>',
scopes: [
'manage_customers:<ADYEN_PROJECT_IDENTIFIER>',
'manage_products:<ADYEN_PROJECT_IDENTIFIER>',
'view_project_settings:<ADYEN_PROJECT_IDENTIFIER>',
'view_stores:<ADYEN_PROJECT_IDENTIFIER>'
]
},
...
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>']
},
adyenApiKey: '<ADYEN_API_KEY>',
adyenMerchantAccount: '<ADYEN_MERCHANT_ACCOUNT>',
adyenCheckoutApiBaseUrl: '<ADYEN_CHECKOUT_API_BASE_URL>',
returnUrl: 'http://localhost/adyen-redirect-back'
}
},
...You can read more about each property in the configuration section.
3
Initialize SDK
Create a directory and file for the SDK configuration (sdk/index.ts):
sdk/index.ts
import { ctModule, CTModuleType } from '@vsf-enterprise/commercetools-sdk';
import { initSDK, buildModule } from '@vsf-enterprise/sdk';
import { adyenCtModule } from '@vsf-enterprise/adyen-commercetools-sdk';
export const sdk = initSDK({
commerce: buildModule<CTModuleType>(
ctModule,
{
apiUrl: 'http://localhost/api/ct'
}
),
adyen: buildModule(
adyenCtModule, {
apiUrl: 'http://localhost/api/adyen',
adyenClientKey: '<ADYEN_CLIENT_KEY>',
adyenEnvironment: '<ADYEN_ENV>'
}
)
});4
Create Payment Component/Page
Add the payment-element to the template:
// In your template, e.g. Payment.vue
...
<div id="payment-element"></div>
...Prepare logic responsible for creating a session and mounting payment element, and call it:
const createAdyenDropin = async () => {
const session = await sdk.adyen.createSession();
await sdk.adyen.mountPaymentElement({
session,
paymentDOMElement: '#payment-element',
adyenConfiguration: {
async onPaymentCompleted(result, component) {
if (['Refused', 'Cancelled', 'Error'].includes(result.resultCode)) {
// Handling negative result codes and unmounting the Adyen Drop-in
// To allow the user to try again by recreating session and component
component.unmount();
// Show some meaningful error message
await createAdyenDropin();
} else {
// Handling positive result codes + Pending, by placing an order and
// redirecting to the thank you page
const { data: { me } } = await sdk.commerce.getMe();
const { data: { order } } = await sdk.commerce.createMyOrderFromCart({
cartId: me.activeCart.id,
cartVersion: me.activeCart.version
});
// Clear cart here!
window.location.href = `${window.location.origin}/checkout/thank-you?order=${order.id}`;
}
},
onError(err) {
// You need to decide what to do here on your own
console.error(err);
}
},
dropinConfiguration: {
showRemovePaymentMethodButton: true,
async onDisableStoredPaymentMethod(recurringDetailReference, resolve, reject) {
try {
await sdk.adyen.removeCard({ recurringDetailReference });
return resolve();
} catch (err) {
// Do something with err...
return reject();
}
}
}
});
};
// Call it client-side, e.g. in Nuxt it would be inside onMounted
await createAdyenDropin();