Plugins-2 icon

SiteGenesis code changes

SiteGenesis code changes for cartridge v22.1.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 v22.1.0 or later.

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:

Copy code
    <field formid="selectedPaymentMethodID" type="string" default-value="CREDIT_CARD">

with:

Copy code
    <field formid="selectedPaymentMethodID" type="string" default-value="AdyenComponent">

js/pages/account.js

  1. Require the Adyen Checkout module: 

    Copy code
    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');
  2. Modify the initializePaymentForm function:

    Copy code
    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

  1. Require the Adyen Checkout module: 

    Copy code
    var ajax = require('../../ajax'),
    formPrepare = require('./formPrepare'),
    giftcard = require('../../giftcard'),
    util = require('../../util'),
    // ---------------------- ADD THE CODE BELOW ----------------------
    adyenCheckout = require('../../adyen-checkout');
  2. Add the following functions: 

    Copy code
    /**
    * @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();
    }
     
  3. In the exports.init function, add the following variable definitions: 

    Copy code
    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();
  4. Modify the exports.init function: 

    Copy code
    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');
    }
    });
  5. Add code to the  exports.init function:

    Copy code
    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

  1. Add Adyen helper:

    Copy code
    /**
    * Resource helper
    *
    */
    //...
    var ProductAvailabilityModel = require('dw/catalog/ProductAvailabilityModel');
    // ---------------------- ADD THE CODE BELOW ----------------------
    /* Script Modules */
    var AdyenHelper = require ("int_adyen_overlay/cartridge/scripts/util/adyenHelper");
  2. Add a new validation message:

    Copy code
    // Validation messages
    // ...
    VALIDATE_MIN : Resource.msg('validate.min', 'forms', null),
     
    // ---------------------- ADD THE CODE BELOW ----------------------
    ADYEN_CC_VALIDATE : Resource.msg('adyen.creditcard', 'adyen', null)
  3. Modify the ResourceHelper.getPreferences function:

    Copy code
    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

  1. Add code under the specified line:

    Copy code
    <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/>
  2. Close the tag: 

    Copy code
    <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: 

Copy code
<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:

Copy code
<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

  1. In the Custom processor section, add the AdyenComponent payment method: 

    Copy code
    <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>
  2. To accept payments from POS devices, add code under the specified line: 

    Copy code
    <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

  1. Add Adyen helpers:

    Copy code
    /* 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');
  2. In the returnToForm function, add the Adyen helper as a key to app.getView:

    Copy code
    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,
  3. In the publicStart function, add the following code: 

    Copy 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 }
    );
    }
  4. In the publicStart function, remove the following line:

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

    If you are not using POS, replace it with: 

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

    If you are using POS, replace it with:  

    Copy code
    var AdyenSessionsResponse = AdyenController.Sessions(customer);
    var AdyenPosTerminals = AdyenController.GetTerminals();
    start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenSessionsResponse : AdyenSessionsResponse, AdyenPosTerminals : AdyenPosTerminals});
  5. Modify the validatePayment function:

    Copy code
    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;
  6. In the saveCreditCard function, add code under the specified line: 

    Copy code
    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 {
  7. Close the else condition: 

    Copy code
    customer.getProfile().getWallet().removePaymentInstrument(creditcard);
    }
    }
    });
    }
    return true
    // ---------------------- ADD THE CODE BELOW ----------------------
    }
  8. Modify the billing() function:

    Copy code
    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 attempted 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;
    }
  9. Also in the billing() function, replace:

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

    with

    Copy code
    if(!paymentInformation.get("paymentFromComponentStateData").value()) {
    // A successful billing page will jump to the next checkout step.
    app.getController('COSummary').Start();
    }

controllers/COPlaceOrder.js

  1. In the start function, add code under the specified line: 

    Copy code
    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;
  2. In the start function, Replace this part: 

    Copy code
    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(),
  3. In the clearForms function, add code under the specified line: 

    Copy code
    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;
  4. In the handlePayments function, add code under the specified line: 

    Copy code
    function handlePayments(order) {
    // ...
    if (authorizationResult.not_supported || authorizationResult.error) {
    return {
    error: true
    };
    }
    // ---------------------- ADD THE CODE BELOW ----------------------
    if (authorizationResult.isAdyen) {
    return authorizationResult;
    }
    }
    }
  5. Replace var handlePaymentsResult = handlePayments(order) with the following:

    Copy code
    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)
  6. In the handlePayments function, add code under the specified line: 

    Copy code
    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()
  7. Replace var orderPlacementStatus = Order.submit(order); with the following:

    Copy code
    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:

  1. At the top of the file, add the following code:

    Copy code
    var AdyenController = require("int_adyen_controllers/cartridge/controllers/Adyen");
  2. In the submit function, replace showConfirmation(placeOrderResult.Order); with:

    Copy code
    if(placeOrderResult.isAdyen || placeOrderResult.continueUrl) {
    const responseUtils = require('*/cartridge/scripts/util/Response');
    responseUtils.renderJSON(placeOrderResult);
    } else {
    showConfirmation(placeOrderResult.Order);
    }
    }
  3. In the 'showConfirmation(order)' function:

    Copy code
    function showConfirmation(order) {
    // ---------------------- ADD THE CODE BELOW ----------------------
    var AdyenHelper = require('*/cartridge/scripts/util/adyenHelper');
    var adyenGivingConfig = AdyenHelper.getAdyenGivingConfig(order);
  4. Also in the 'showConfirmation(order)' function:

    Copy code
    app.getView({
    Order: order,
    // ---------------------- ADD THE CODE BELOW ----------------------
    AdyenGivingConfig: adyenGivingConfig,

controllers/PaymentInstruments.js

  1. At the top of the file, add the following code: 

    Copy code
    /*API includes*/
    var PaymentInstrument = require('dw/order/PaymentInstrument');
    var Logger = require('dw/system/Logger');
  2. At the top of the file, add the following code: 

    Copy 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');
  3. Modify the list function:

    Copy code
    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();
  4. Add the following function:

    Copy code
    function getSessionData() {
    var sessionsResponse = adyenSessions.createSession(
    null,
    customer,
    '',
    );
    return {
    id: sessionsResponse.id,
    sessionData: sessionsResponse.sessionData,
    };
    }
  5. Modify the create function:

    Copy code
    function create() {
    // ---------------------- ADD THE CODE BELOW ----------------------
    if (getAdyenPaymentInstruments()) {
    return adyenSaveCreditCard.create();
    }
  6. Also in the create function:

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

    change the following:

    Copy code
    if (AdyenHelper.getAdyenRecurringPaymentsEnabled()) {

    into:

    Copy code
    if (AdyenConfigs.getAdyenRecurringPaymentsEnabled()) {
  7. Modify the handlePaymentForm function:
    Replace the following:

    Copy code
    add(false);

    With:

    Copy code
    response.redirect(URLUtils.https('PaymentInstruments-List', 'error', 'AuthorisationFailed'));
  8. In the Delete function, replace wallet.removePaymentInstrument(action.object); with:

    Copy code
    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);
    }
    }
  9. Modify the verifyCreditCard function: 

    Copy code
    function verifyCreditCard() {
    var newCreditCardForm = app.getForm('paymentinstruments.creditcards.newcreditcard');
    // ---------------------- ADD THE CODE BELOW ----------------------
    if (getAdyenPaymentInstruments()) {
    return true;
  10. After the verifyCreditCard function, add the following function:

    Copy code
    function getAdyenPaymentInstruments() {
    var wallet = customer.getProfile().getWallet();
    return wallet.getPaymentInstruments(constants.METHOD_ADYEN_COMPONENT);
    }
  11. Modify the "add" function to include the following:

    Copy code
    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