SiteGenesis code changes

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 to app.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(data) function:

    function billing(data) {
   // ---------------------- 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("paypalStateData").value()) {
        AdyenController.ShowConfirmationPaymentFromComponent();
        return;
    }

Also in the billing(data) function, replace:

app.getController('COSummary').Start();

with

 if(!paymentInformation.get("paypalStateData").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, replace showConfirmation(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, replace wallet.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;
   }

Next steps

required

Set up the cartridge

Configure the cartridge in the Adyen Customer Area and in the Business Manager.

required

Set up payment methods

Set up the payment methods that you want to offer.

Are you looking for test card numbers?

Would you like to contact support?

SiteGenesis code changes

Files to copy from Adyen's cartridge

Storefront core changes

forms/default/billing.xml

js/pages/account.js

js/pages/checkout/billing.js

scripts/util/Resource.ds

templates/default/account/payment/paymentinstrumentdetails.isml

templates/default/checkout/billing/billing.isml

templates/default/checkout/billing/paymentmethods.isml

Storefront controller changes

controllers/COBilling.js

controllers/COPlaceOrder.js

controllers/COSummary.js:

controllers/PaymentInstruments.js

Next steps