SiteGenesis code changes

SiteGenesis code changes for cartridge version 21.2.0 or later.

If you are using SiteGenesis, you need to add Adyen-specific code to the storefront core code. This page explains the code changes you need to add when using cartridge version 21.2.0 or later.

If you're using an earlier version of the cartridge, refer to SiteGenesis code changes for cartridge v21.1.0 instead.

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 : dw.order.PaymentMgr.getPaymentMethod('AdyenComponent').isActive()
    || (dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD') && ['Adyen_Component', 'ADYEN_CREDIT'].indexOf(dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD').getPaymentProcessor().getID()) > -1)

templates/default/account/payment/paymentinstrumentdetails.isml

Add code under the specified line:

<isscript>
   <!--  ... -->
   var numberAttributes = {
   maxlength: 16,
   size: 17
};
</isscript>

<!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
<isif condition="${dw.order.PaymentMgr.getPaymentMethod('AdyenComponent').isActive()
        || (dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD')
        && ['Adyen_Component', 'ADYEN_CREDIT'].indexOf(dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD').getPaymentProcessor().getID()) > -1) }">
<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="${dw.order.PaymentMgr.getPaymentMethod('AdyenComponent').isActive()
            || (dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD')
            && ['Adyen_Component', 'ADYEN_CREDIT'].indexOf(dw.order.PaymentMgr.getPaymentMethod('CREDIT_CARD').getPaymentProcessor().getID()) > -1) }">
         <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 AdyenConfigs = require("int_adyen_overlay/cartridge/scripts/util/adyenConfigs");
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 AdyenSessionsResponse = AdyenController.Sessions(customer);

start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenSessionsResponse : AdyenSessionsResponse} );

If you are using POS, replace it with:

var AdyenSessionsResponse = AdyenController.Sessions(customer);
var AdyenPosTerminals = AdyenController.GetTerminals();
start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenSessionsResponse : AdyenSessionsResponse, AdyenPosTerminals : AdyenPosTerminals});

Modify the validatePayment function:

function validatePayment(cart) {
var paymentAmount, countryCode, invalidPaymentInstruments, result;

   // ---------------------- ADD THE CODE BELOW ----------------------
if (cart.getPaymentInstrument() &&
    [
    constants.METHOD_ADYEN_POS,
    constants.METHOD_ADYEN_COMPONENT,
    ].indexOf(cart.getPaymentInstrument().getPaymentMethod()) !== -1
) {
      result = true;
      return result;
   }

In the saveCreditCard function, add code under the specified line:

function saveCreditCard() {

   // ---------------------- ADD THE CODE BELOW ----------------------
   if (AdyenConfigs.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 ----------------------
    // restore cart and redirect to billing stage if successful
    if(session.privacy.currentOrderNumber && session.privacy.currentOrderToken) {
    var order = OrderMgr.getOrder(session.privacy.currentOrderNumber, session.privacy.currentOrderToken);

    // Clear cache so the order restore will only be attmpted once per order
    session.privacy.currentOrderNumber = null;
    session.privacy.currentOrderToken = null;

    Transaction.wrap(function () {
        OrderMgr.failOrder(order, true);
    });
        publicStart();
        return;
    }

   if(!validateBilling()) {
    var 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 start function, add code under the specified line:

function start() {
   // ...
    var handlePaymentsResult = handlePayments(order);
    var constants = require('*/cartridge/adyenConstants/constants');
    var URLUtils = require('dw/web/URLUtils');

   // ---------------------- ADD THE CODE BELOW ----------------------           
    // Cache current order number in order to potentially restore cart.
    session.privacy.currentOrderNumber = order.orderNo;
    session.privacy.currentOrderToken = order.orderToken;

In the start function, Replace this part:

function start() {
   // ... 
    continueUrl: URLUtils.url(
    'Adyen-ShowConfirmation',
    'authorized', 'true',
    'merchantReference', order.orderNo).toString(),       

    //Replace with

    continueUrl: URLUtils.url(
        'Adyen-ShowConfirmation',
        'authorized', 'true',
        'merchantReference', order.orderNo,
        'orderToken', order.orderToken,
    ).toString(),

In the clearForms function, add code under the specified line:

function clearForms() {
   // ...
    session.forms.singleshipping.clearFormElement();
    session.forms.multishipping.clearFormElement();
    session.forms.billing.clearFormElement(); 

   // ---------------------- ADD THE CODE BELOW ----------------------           
    // clear cached order number
    session.privacy.currentOrderNumber = null;
    session.privacy.currentOrderToken = null;

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.isAdyen) {
                return authorizationResult;
            }
       }
    }

Replace var handlePaymentsResult = handlePayments(order) with the following:

var handlePaymentsResult = handlePayments(order);
var constants = require('*/cartridge/adyenConstants/constants');
var URLUtils = require('dw/web/URLUtils');
var submitOrder =
    handlePaymentsResult.isAdyen === false || //adyen is not the payment processor for this payment
    handlePaymentsResult.isAdyen && !handlePaymentsResult.action || // isAdyen and no action
    (handlePaymentsResult.action && handlePaymentsResult.action.type === constants.ACTIONTYPES.VOUCHER) || // action type is voucher
    (!handlePaymentsResult.action && !handlePaymentsResult.isFinal); // no action and payment is not final (SEPA)

In the handlePayments function, add code under the specified line:

function handlePayments(order) {
   // ...
      if (handlePaymentsResult.error) {
         return Transaction.wrap(function () {
            OrderMgr.failOrder(order);
            return {

   // ---------------------- ADD THE CODE BELOW ----------------------           
       continueUrl: URLUtils.url(
         'Adyen-ShowConfirmation',
         'error', 'true',
         'errorStatus', 'confirm.error.technical').toString()

Replace var orderPlacementStatus = Order.submit(order); with the following:

if (submitOrder) {
        var orderPlacementStatus = Order.submit(order);
        if (!orderPlacementStatus.error) {
            clearForms();
        }
        if(handlePaymentsResult.isAdyen) {
            return {
                continueUrl: URLUtils.url(
                    'Adyen-ShowConfirmation',
                    'authorized', 'true',
                    'merchantReference', order.orderNo).toString(),
            }
        }
        return orderPlacementStatus;
    }
}
return handlePaymentsResult;

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.isAdyen || placeOrderResult.continueUrl) {
        const responseUtils = require('*/cartridge/scripts/util/Response');
        responseUtils.renderJSON(placeOrderResult);
    } 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");
var adyenSessions = require('int_adyen_overlay/cartridge/scripts/adyenSessions');

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});
   var paymentInstruments = getAdyenPaymentInstruments();

Add the following function:

function getSessionData() {
    var sessionsResponse =  adyenSessions.createSession(
        null,
        customer,
        '',
    );
    return {
        id: sessionsResponse.id,
        sessionData: sessionsResponse.sessionData,
    };
}

Modify the create function:

function create() {

// ---------------------- ADD THE CODE BELOW ----------------------

if (getAdyenPaymentInstruments())   {
    return adyenSaveCreditCard.create();
}

Also in the create function:

function create() {
....
var wallet = customer.getProfile().getWallet();
var paymentInstruments = wallet.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD);

change the following:

if (AdyenHelper.getAdyenRecurringPaymentsEnabled()) {

into:

if (AdyenConfigs.getAdyenRecurringPaymentsEnabled()) {

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 (AdyenConfigs.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 (getAdyenPaymentInstruments())   {
      return true;
   }

After the verifyCreditCard function, add the following function:

function getAdyenPaymentInstruments() {
    var wallet = customer.getProfile().getWallet();
    return wallet.getPaymentInstruments(constants.METHOD_ADYEN_COMPONENT);
}

Modify the "add" function to include the following:

function add(clearForm) {
var paymentForm = app.getForm('paymentinstruments');
...

app.getView({
    ContinueURL: URLUtils.https('PaymentInstruments-PaymentForm'),
    // ---------------------- ADD THE LINE BELOW ----------------------
    SessionData: JSON.stringify(getSessionData()),

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