For older versions of the Adyen Payments Cartridge, see our older documentation. You can also learn more about how to migrate to Adyen Payments Cartridge version 20.1.0.
If you are using SiteGenesis, you need to add Adyen-specific code to the storefront core code.
For a controller-based integration, you also need to implement changes in the storefront controller code. For a description of these changes, refer to Storefront controller changes.
If you use SFRA, you can skip this page – there are no code changes needed.
Files to copy from Adyen's cartridge
To include Adyen's client side js files, copy all files from /int_adyen_controllers/cartridge/js/pages/checkout/ and paste them in /app_storefront_core/cartridge/js/.
Storefront core changes
Below are the changes that you have to implement in the storefront core code, for each file.
forms/default/billing.xml
Replace the following:
<field formid="selectedPaymentMethodID" type="string" default-value="CREDIT_CARD">
with:
<field formid="selectedPaymentMethodID" type="string" default-value="AdyenComponent">
js/pages/account.js
-
Require the Adyen Checkout module:
var giftcert = require('../giftcert'), tooltip = require('../tooltip'), util = require('../util'), dialog = require('../dialog'), page = require('../page'), login = require('../login'), validator = require('../validator'), // ---------------------- ADD THE CODE BELOW ---------------------- adyenCheckout = require('../adyen-checkout');
-
Modify the
initializePaymentForm
function:function initializePaymentForm() { $('#CreditCardForm').on('click', '.cancel-button', function (e) { e.preventDefault(); dialog.close(); }); // ---------------------- ADD THE CODE BELOW ---------------------- if (SitePreferences.ADYEN_SF_ENABLED) { adyenCheckout.initAccount(); }
js/pages/checkout/billing.js
-
Require the Adyen Checkout module:
var ajax = require('../../ajax'), formPrepare = require('./formPrepare'), giftcard = require('../../giftcard'), util = require('../../util'), // ---------------------- ADD THE CODE BELOW ---------------------- adyenCheckout = require('../../adyen-checkout');
-
Add the following functions:
/** * @function * @description Changes the payment type or issuerId of the selected payment method * @param {String, Boolean} value of payment type or issuerId and a test value to see which one it is, to which the payment type or issuerId should be changed to */ function updatePaymentType(selectedPayType, issuerType) { if(issuerType){ $('#dwfrm_adyPaydata_issuer').val(selectedPayType); } else{ $('input[name="brandCode"]').removeAttr('checked'); $('input[value=' + selectedPayType + ']').prop('checked', 'checked'); } // if the payment type has hidden fields reveal it $('#component_' + selectedPayType).show(); formPrepare.validateForm(); }
-
In the
exports.init
function, add the following variable definitions:exports.init = function () { // ... var selectedPaymentMethod = $selectPaymentMethod.find(':checked').val(); // ---------------------- ADD THE CODE BELOW ---------------------- var $payType = $('[name="brandCode"]'); var $issuer = $('.issuer'); var selectedPayType = $payType.find(':checked').val();
-
Modify the
exports.init
function:exports.init = function () { // ... $selectPaymentMethod.on('click', 'input[type="radio"]', function () { updatePaymentMethod($(this).val()); // ---------------------- ADD THE CODE BELOW ---------------------- if ($(this).val() == 'Adyen' && $payType.length > 0) { // set payment type of Adyen to the first one updatePaymentType((selectedPayType) ? selectedPayType : $payType[0].value, false); } else { $payType.removeAttr('checked'); } });
-
Add code to the
exports.init
function:exports.init = function () { // ... $giftCertCode.on('keydown', function (e) { if (e.which === 13) { e.preventDefault(); $addGiftCert.click(); } }); // ---------------------- ADD THE CODE BELOW ---------------------- if (SitePreferences.ADYEN_SF_ENABLED) { adyenCheckout.initBilling(); } $payType.on('change', function() { $('#selectedIssuer').val(""); $issuer.hide(); $('.checkoutComponent').hide(); $('#component_' + $(this).val()).show(); if($(this).siblings( ".issuer").length > 0){ $('#selectedIssuer').val($(this).siblings( ".issuer" ).val()); $(this).siblings('.issuer').show(); } });
scripts/util/Resource.ds
-
Add Adyen helper:
/** * Resource helper * */ //... var ProductAvailabilityModel = require('dw/catalog/ProductAvailabilityModel'); // ---------------------- ADD THE CODE BELOW ---------------------- /* Script Modules */ var AdyenHelper = require ("int_adyen_overlay/cartridge/scripts/util/adyenHelper");
-
Add a new validation message:
// Validation messages // ... VALIDATE_MIN : Resource.msg('validate.min', 'forms', null), // ---------------------- ADD THE CODE BELOW ---------------------- ADYEN_CC_VALIDATE : Resource.msg('adyen.creditcard', 'adyen', null)
-
Modify the
ResourceHelper.getPreferences
function:ResourceHelper.getPreferences = function(pageContext) { var cookieHintAsset = ContentMgr.getContent('cookie_hint'); return { // ... CHECK_TLS:Site.getCurrent().getCustomPreferenceValue('checkTLS'), // ---------------------- ADD THE CODE BELOW ---------------------- ADYEN_SF_ENABLED : AdyenHelper.getAdyenSecuredFieldsEnabled()
templates/default/account/payment/paymentinstrumentdetails.isml
-
Add code under the specified line:
<isscript> <!-- ... --> var numberAttributes = { maxlength: 16, size: 17 }; </isscript> <!-- ---------------------- ADD THE CODE BELOW ---------------------- --> <isset name="AdyenHelper" value="${require('int_adyen_overlay/cartridge/scripts/util/adyenHelper')}" scope="pdict" /> <isset name="AdyenSecuredFieldsEnabled" value="${pdict.AdyenHelper.getAdyenSecuredFieldsEnabled()}" scope="page" /> <isif condition="${AdyenSecuredFieldsEnabled}"> <isinclude template="account/payment/adyenpaymentinstrumentdetails"/> <iselse/>
-
Close the tag:
<button class="cancel cancel-button simple" type="submit" name="${pdict.CurrentForms.paymentinstruments.creditcards.cancel.htmlName}" value="${Resource.msg('global.cancel','locale',null)}"> ${Resource.msg('global.cancel', 'locale', null)} </button> </div> <!-- ---------------------- ADD THE CODE BELOW ---------------------- --> </isif>
templates/default/checkout/billing/billing.isml
Replace the following:
<div class="form-row form-row-button">
<button class="button-fancy-large" type="submit" name="${pdict.CurrentForms.billing.save.htmlName}" value="${Resource.msg('global.continueplaceorder','locale',null)}"><span>${Resource.msg('global.continueplaceorder','locale',null)}</span></button>
</div>
with:
<div class="form-row form-row-button">
<isif condition="${(pdict.AdyenHelper && pdict.AdyenHelper.getAdyenSecuredFieldsEnabled()) || pdict.AdyenSecuredFieldsEnabled === true}">
<button class="button-fancy-large" type="hidden" id="billing-submit-hidden" style="display:none" name="${pdict.CurrentForms.billing.save.htmlName}" value="${Resource.msg('global.continueplaceorder','locale',null)}"><span>${Resource.msg('global.continueplaceorder','locale',null)}</span></button>
<button class="button-fancy-large" type="submit" id="billing-submit" name="${pdict.CurrentForms.billing.save.htmlName}" value="${Resource.msg('global.continueplaceorder','locale',null)}"><span>${Resource.msg('global.continueplaceorder','locale',null)}</span></button>
<iselse/>
<button class="button-fancy-large" type="submit" name="${pdict.CurrentForms.billing.save.htmlName}" value="${Resource.msg('global.continueplaceorder','locale',null)}"><span>${Resource.msg('global.continueplaceorder','locale',null)}</span></button>
</isif>
</div>
templates/default/checkout/billing/paymentmethods.isml
-
In the Custom processor section, add the AdyenComponent payment method:
<iscomment> Custom processor -------------------------------------------------------------- </iscomment> <div class="payment-method <isif condition="${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID=='PayPal'}">payment-method-expanded</isif>" data-method="Custom"> <!-- Your custom payment method implementation goes here. --> ${Resource.msg('billing.custompaymentmethod','checkout',null)} </div> <!-- ---------------------- ADD THE CODE BELOW ---------------------- --> <div class="payment-method <isif condition="${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID=='AdyenComponent'}">payment-method-expanded</isif>" data-method="AdyenComponent"> <isinclude template="checkout/billing/adyenComponent"/> </div>
-
To accept payments from POS devices, add code under the specified line:
<div class="payment-method <isif condition="${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID=='AdyenComponent'}">payment-method-expanded</isif>" data-method="AdyenComponent"> <isinclude template="checkout/billing/adyenComponent"/> </div> <!-- ---------------------- ADD THE CODE BELOW ---------------------- --> <div class="payment-method <isif condition="${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID=='AdyenPOS'}">payment-method-expanded</isif>" data-method="AdyenPOS"> <isinclude template="pos"/> </div>
Storefront controller changes
If you integrate via the controller method, you have to implement changes in the storefront controller code. Below are the changes that you have to implement, for each file. To find these files, go to app_storefront_controllers > cartridge.
controllers/COBilling.js
-
Add Adyen helpers:
/* Script Modules */ var app = require('~/cartridge/scripts/app'); var guard = require('~/cartridge/scripts/guard'); // ---------------------- ADD THE CODE BELOW ---------------------- var AdyenController = require("int_adyen_controllers/cartridge/controllers/Adyen"); var AdyenHelper = require("int_adyen_overlay/cartridge/scripts/util/adyenHelper"); var BasketMgr = require('dw/order/BasketMgr'); var constants = require("*/cartridge/adyenConstants/constants"); var OrderMgr = require('dw/order/OrderMgr');
-
In the
returnToForm
function, add the Adyen helper as a key toapp.getView
:if (params) { app.getView(require('~/cartridge/scripts/object').extend(params, { Basket: cart.object, // ---------------------- ADD THE FOLLOWING LINE ---------------------- AdyenHelper : AdyenHelper, ContinueURL: URLUtils.https('COBilling-Billing') })).render('checkout/billing/billing'); } else { app.getView({ Basket: cart.object,
-
In the
publicStart
function, add the following code:initEmailAddress(cart); // ---------------------- ADD THE FOLLOWING LINE ---------------------- // Get the Saved Cards from Adyen to get latest saved cards if (customer.authenticated) { require("int_adyen_overlay/cartridge/scripts/updateSavedCards").updateSavedCards( { CurrentCustomer: customer } ); }
-
In the
publicStart
function, remove the following line:start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards});
If you are not using POS, replace it with:
var AdyenPaymentMethods = AdyenController.GetPaymentMethods(cart, customer); start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenPaymentMethods : AdyenPaymentMethods} );
If you are using POS, replace it with:
var AdyenPaymentMethods = AdyenController.GetPaymentMethods(cart, customer); var AdyenPosTerminals = AdyenController.GetTerminals(); start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenPaymentMethods : AdyenPaymentMethods, AdyenPosTerminals : AdyenPosTerminals});
-
Modify the
validatePayment
function:function validatePayment(cart) { var paymentAmount, countryCode, invalidPaymentInstruments, result; // ---------------------- ADD THE CODE BELOW ---------------------- if (AdyenHelper.getAdyenSecuredFieldsEnabled()) { result = true; return result; }
-
In the
saveCreditCard
function, add code under the specified line:function saveCreditCard() { // ---------------------- ADD THE CODE BELOW ---------------------- if (AdyenHelper.getAdyenRecurringPaymentsEnabled()) { //saved credit cards are handling in COPlaceOrder and Login for Adyen - saved cards are synced with Adyen ListRecurringDetails API call return true; } else {
-
Close the else condition:
customer.getProfile().getWallet().removePaymentInstrument(creditcard); } } }); } return true // ---------------------- ADD THE CODE BELOW ---------------------- }
- Modify the
billing()
function:function billing() { // ---------------------- ADD THE CODE BELOW ---------------------- if(!validateBilling()) { let responseUtils = require('~/cartridge/scripts/util/Response'); responseUtils.renderJSON({fieldErrors: true}); } var paymentInformation = app.getForm('adyPaydata'); if(paymentInformation.get("paymentFromComponentStateData").value()) { AdyenController.ShowConfirmationPaymentFromComponent(); return; }
- Also in the
billing()
function, replace:app.getController('COSummary').Start();
with
if(!paymentInformation.get("paymentFromComponentStateData").value()) { // A successful billing page will jump to the next checkout step. app.getController('COSummary').Start(); }
controllers/COPlaceOrder.js
-
In the
handlePayments
function, add code under the specified line:function handlePayments(order) { // ... if (authorizationResult.not_supported || authorizationResult.error) { return { error: true }; } // ---------------------- ADD THE CODE BELOW ---------------------- if(authorizationResult.authorized3d == true) { return {view: authorizationResult.view}; } else if(authorizationResult.redirectObject) { return {redirectUrl: authorizationResult.redirectObject.url}; } } }
-
Replace
var handlePaymentsResult = handlePayments(order)
with the following:var skipSubmitOrder = false; var handlePaymentsResult = handlePayments(order); if (handlePaymentsResult.view){ //3DS transaction skipSubmitOrder = true; }
-
Replace
var orderPlacementStatus = Order.submit(order);
with the following:if (handlePaymentsResult.redirectUrl) { return { Order: order, redirectUrl: handlePaymentsResult.redirectUrl }; } else { if (skipSubmitOrder) { return { Order: order, view : handlePaymentsResult.view, skipSubmitOrder : skipSubmitOrder }; } else { var orderPlacementStatus = Order.submit(order); } }
controllers/COSummary.js:
-
At the top of the file, add the following code:
var AdyenController = require("int_adyen_controllers/cartridge/controllers/Adyen");
-
In the
submit
function, replaceshowConfirmation(placeOrderResult.Order);
with:if (placeOrderResult.redirectUrl) { AdyenController.Redirect(placeOrderResult.Order, placeOrderResult.redirectUrl); } else if (placeOrderResult.skipSubmitOrder) { // skipSubmitOrder is for 3DS transactions if (placeOrderResult.view.token3ds2) { //3DS2 placeOrderResult.view.render('adyenpaymentredirect'); } else { // 3DS1 placeOrderResult.view.render('adyenform'); } } else { showConfirmation(placeOrderResult.Order); } }
-
In the 'showConfirmation(order)' function:
function showConfirmation(order) { // ---------------------- ADD THE CODE BELOW ---------------------- var AdyenHelper = require('*/cartridge/scripts/util/adyenHelper'); var adyenGivingConfig = AdyenHelper.getAdyenGivingConfig(order);
- Also in the 'showConfirmation(order)' function:
app.getView({ Order: order, // ---------------------- ADD THE CODE BELOW ---------------------- AdyenGivingConfig: adyenGivingConfig,
controllers/PaymentInstruments.js
-
At the top of the file, add the following code:
/*API includes*/ var PaymentInstrument = require('dw/order/PaymentInstrument'); var Logger = require('dw/system/Logger');
-
At the top of the file, add the following code:
/*Script Modules*/ var AdyenHelper = require('int_adyen_overlay/cartridge/scripts/util/adyenHelper'); var constants = require("*/cartridge/adyenConstants/constants"); var adyenSaveCreditCard = require("*/cartridge/scripts/adyenSaveCreditCard");
-
Modify the
list
function:function list() { // ---------------------- ADD THE CODE BELOW ---------------------- // Get the Saved Cards from Adyen to get latest saved cards require('int_adyen_overlay/cartridge/scripts/updateSavedCards').updateSavedCards({CurrentCustomer : customer});
-
Modify the
create
function:function create() { // ---------------------- ADD THE CODE BELOW ---------------------- if (AdyenHelper.getAdyenSecuredFieldsEnabled()) { return adyenSaveCreditCard.create(); }
- Modify the
handlePaymentForm
function:
Replace the following:add(false);
With:
response.redirect(URLUtils.https('PaymentInstruments-List', 'error', 'AuthorisationFailed'));
-
In the
Delete
function, replacewallet.removePaymentInstrument(action.object);
with:var paymentInstrument = action.object; if (!empty(paymentInstrument)) { if (AdyenHelper.getAdyenRecurringPaymentsEnabled() && !empty(paymentInstrument.getCreditCardToken())) { var result = require('int_adyen_overlay/cartridge/scripts/adyenDeleteRecurringPayment').deleteRecurringPayment({ Customer: customer, RecurringDetailReference: paymentInstrument.getCreditCardToken() }); if (result == PIPELET_NEXT) { wallet.removePaymentInstrument(paymentInstrument); } } else { wallet.removePaymentInstrument(paymentInstrument); } }
-
Modify the
verifyCreditCard
function:function verifyCreditCard() { var newCreditCardForm = app.getForm('paymentinstruments.creditcards.newcreditcard'); // ---------------------- ADD THE CODE BELOW ---------------------- if (AdyenHelper.getAdyenSecuredFieldsEnabled()) { return true; }