Customize storefront code

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 integrate via the pipeline method, you have to implement changes in the storefront pipeline. For a description of these changes, contact our Support Team.

If you use SFRA, you can skip this page – there are no code changes needed.

Storefront core changes

Below are the changes that you have to implement in the storefront core code, for each file. To find these files, go to app_storefront_core > cartridge

forms/default/creditcard.xml

  1. Add code under the specified line:

    <!-- field for credit card owner --> 
        <field formid="owner" label="creditcard.ownerlabel" type="string" mandatory="true" max-length="40" binding="creditCardHolder" 
    missing-error="creditcard.ownermissingerror"/> 
     
    <!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
        <field formid="encrypteddata" type="string" mandatory="false"/> 
  2. Add code under the specified line:

    <field formid="saveCard" label="creditcard.savecard" type="boolean" mandatory="false" default-value="true" />
     
    <!--  ---------------------- ADD THE CODE BELOW ---------------------- --> 				
    <!-- field for credit card recurring payments / tokenization -->
    <field formid="selectedCardID" mandatory="false" type="string"/>

js/pages/account.js

  1. Require the CSE 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 ----------------------
        adyenCse = require('../adyen-cse');
  2. Modify the initializePaymentForm function:

    function initializePaymentForm() {
       $('#CreditCardForm').on('click', '.cancel-button', function (e) {
          e.preventDefault();
          dialog.close();
       });
     
       // ---------------------- ADD THE CODE BELOW ----------------------
       if (SitePreferences.ADYEN_CSE_ENABLED)  {                 
          adyenCse.initAccount();
       }

js/pages/checkout/billing.js

  1. Require the CSE module: 

    var ajax = require('../../ajax'),
       formPrepare = require('./formPrepare'),
       giftcard = require('../../giftcard'),
       util = require('../../util'),
     
       // ---------------------- ADD THE CODE BELOW ----------------------
       adyenCse = require('../../adyen-cse');
  2. Modify the setCCFields function:

    function setCCFields (data){
       // ...
       $creditCard.find('input[name$="_cvn"]').val('').trigger('change');
     
       // ---------------------- ADD THE CODE BELOW ----------------------
       $creditCard.find('[name$="creditCard_selectedCardID"]').val(data.selectedCardID).trigger('change');
  3. 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, test) {
       if (!test) { 
          $('input[name="brandCode"]').removeAttr('checked');
       }  else { 
          $('input[name="issuerId"]').removeAttr('checked'); 
       } 
       $('input[value=' + selectedPayType + ']').prop('checked', 'checked');
       formPrepare.validateForm(); 
    }
     
    /**
    * @function
    * @description Adyen - Initializes the visibility of HPP fields
    */
    function initializeHPPFields () {
       if($('[name="brandCode"]:checked').hasClass('openInvoice')) {
          $('.additionalfield').hide().find('input').val('');
          $('.additionalfield.' + $('.checkout-billing').find('select.country').val()).show();
       } else {
          $('.additionalfield').hide().find('input').val('');
       }
    }
  4. 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 $issuerId = $('[name="issuerId"]');
       var $issuer = $('ul#issuer');
       var selectedPayType = $payType.find(':checked').val();
       var selectedIssuerId = $issuerId.find(':checked').val();  
  5. 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');
             $issuerId.removeAttr('checked');
          }
       });
     
       $issuerId.on('click', function () {
          updatePaymentType($(this).val(), true);
  6. 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_CSE_ENABLED) {
          adyenCse.initBilling();
       }
       
       // Adyen - Click event for payment methods
       $payType.on('click', function () {
          updatePaymentType($(this).val(), false);
          //if the payment type contains issuerId fields, expand form with the values
          if ($(this).siblings('#issuer').length > 0) {
             $issuer.show();
             updatePaymentType((selectedIssuerId) ? selectedIssuerId : $issuerId[0].value, true);
          }  else {
             $issuer.hide();
             $('input[name="issuerId"]').removeAttr('checked');
          }
          initializeHPPFields();
       });
     
       var currentDate = new Date();
       var currentYear = currentDate.getFullYear();
       var initYear = currentYear - 100;
       $('.openinvoiceInput input[name$="_dob"]').datepicker({
          showOn: 'focus',
          yearRange: initYear + ':' + currentYear,
          changeYear: true
       });

scripts/util/Resource.ds

  1. 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");
  2. 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)
  3. 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_CSE_ENABLED : AdyenHelper.getAdyenCseEnabled()

templates/default/account/payment/paymentinstrumentdetails.isml

  1. 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="AdyenCseEnabled" value="${pdict.AdyenHelper.getAdyenCseEnabled()}" scope="page" />
    <isif condition="${AdyenCseEnabled}">
    <isinclude template="account/payment/adyenpaymentinstrumentdetails"/>
    <iselse/>
  2. 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.getAdyenCseEnabled()) || pdict.AdyenCseEnabled === 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/creditcardjson.isml

Add the following key-value pair:

expirationYear:pdict.SelectedCreditCard.creditCardExpirationYear,
 
<!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
selectedCardID:pdict.SelectedCreditCard.UUID 

templates/default/checkout/billing/paymentmethods.isml

  1. Add code under the specified line: 

    <div class="payment-method <isif condition="${empty(pdict.selectedPaymentID) || pdict.selectedPaymentID=='CREDIT_CARD'}">payment-method-expanded</isif>" data-method="CREDIT_CARD">
     
    <!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
    <isset name="AdyenHelper" value="${require('int_adyen_overlay/cartridge/scripts/util/AdyenHelper')}" scope="pdict"/>
    <isset name="AdyenCseEnabled" value="${pdict.AdyenHelper.getAdyenCseEnabled()}" scope="page" />
    
  2. Replace the following:

    <select name="${pdict.CurrentForms.billing.paymentMethods.creditCardList.htmlName}" id="creditCardList" class="input-select">

    with:

    <isif condition="${AdyenCseEnabled}">
    	<select name="${pdict.CurrentForms.billing.paymentMethods.creditCardList.htmlName}" id="adyenCreditCardList" class="input-select">
    <iselse/>
    	<select name="${pdict.CurrentForms.billing.paymentMethods.creditCardList.htmlName}" id="creditCardList" class="input-select">
    </isif>
    
  3. Add code under the specified line: 

    <isprint value="${creditCardInstr.creditCardExpirationMonth}" formatter="00" />
    <isprint value="${creditCardInstr.creditCardExpirationYear}" formatter="0000" />
    </a>
    </isloop>
    </iscomment>
    </isif>
     
    <!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
    
    <isif condition="${AdyenCseEnabled}">
    	<isinclude template="checkout/billing/adyenpaymentmethods”/>
    	<isinputfield formfield="${pdict.CurrentForms.billing.paymentMethods.creditCard.selectedCardID}" type="hidden"/>
    <iselse/>
  4. Close the tag: 

    <isinputfield formfield="${pdict.CurrentForms.billing.paymentMethods.creditCard.cvn}" type="input" rowclass="cvn" dynamicname="true" help="${help}"/>
     
    <!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
    </isif>
  5. In the Custom processor section, add the Adyen 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=='Adyen'}">payment-method-expanded</isif>" data-method="Adyen"> 
        <isinclude template="hpp"/>
    </div>
  6. To accept payments from POS devices, add code under the specified line: 

    <div class="payment-method <isif condition="${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID=='Adyen'}">payment-method-expanded</isif>" data-method="Adyen">
    			<isinclude template="hpp"/>
    </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>

templates/default/checkout/summary/summary.isml

Add code under the specified line: 

<input type="hidden" name="${dw.web.CSRFProtection.getTokenName()}" value="${dw.web.CSRFProtection.generateToken()}"/>
 
<!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
<iscomment>
Set the brandcode and issuerId in session for when user hits the back button on Adyen hpp
</iscomment>
<isif condition="${!empty(pdict.CurrentHttpParameterMap.brandCode.value) || !empty(session.custom.brandCode)}">
   <isset name="brandCode" value="${!empty(pdict.CurrentHttpParameterMap.brandCode.value) ? pdict.CurrentHttpParameterMap.brandCode.value :    session.custom.brandCode}" scope="page"/>
   <input type="hidden" name="brandCode" value="${brandCode}" />
   <isif condition="${!empty(pdict.CurrentHttpParameterMap.issuerId.value) || !empty(session.custom.issuerId)}">
      <isset name="issuerId" value="${!empty(pdict.CurrentHttpParameterMap.issuerId.value) ? pdict.CurrentHttpParameterMap.issuerId.value :      session.custom.issuerId}" scope="session"/>
      <input type="hidden" name="issuerId" value="${session.custom.issuerId}" />
   </isif>
   <isset name="brandCode" value="${!empty(pdict.CurrentHttpParameterMap.brandCode.value) ? pdict.CurrentHttpParameterMap.brandCode.value : session.custom.brandCode}" scope="session"/>
   <isset name="dob" value="${!empty(pdict.CurrentHttpParameterMap.dob.value) ? pdict.CurrentHttpParameterMap.dob.value : ''}" scope="session"/>
   <isset name="gender" value="${!empty(pdict.CurrentHttpParameterMap.gender.value) ? pdict.CurrentHttpParameterMap.dob.value : ''}" scope="session"/>
</isif>

templates/default/components/header/htmlhead.isml

Add code under the specified line: 

<!--  UI -->
<link rel="stylesheet" href="${URLUtils.staticURL('/css/style.css')}" />

<!--  ---------------------- ADD THE CODE BELOW ---------------------- -->
<link rel="stylesheet" href="${URLUtils.staticURL('/css/checkout.css')}" /> 

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

If you integrate via the pipeline method, you have to implement changes in the storefront pipeline. For a description of these changes, contact our Support Team.

controllers/COBilling.js

  1. 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"); 
  2. 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,
    // ---------------------- ADD THE FOLLOWING LINE ----------------------
             AdyenHelper : AdyenHelper, 
             ContinueURL: URLUtils.https('COBilling-Billing')
             }).render('checkout/billing/billing'); 
       }
  3. In the publicStart function, remove the following line:

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

    If you are not using POS, replace it with: 

    var AdyenHppPaymentMethods = AdyenController.GetPaymentMethods(cart); 
     
    start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenHppPaymentMethods : AdyenHppPaymentMethods} ); 

    If you are using POS, replace it with:  

    var AdyenHppPaymentMethods = AdyenController.GetPaymentMethods(cart); 
    var AdyenPosTerminals = AdyenController.GetTerminals();
    start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards, AdyenHppPaymentMethods : AdyenHppPaymentMethods, AdyenPosTerminals : AdyenPosTerminals});
  4. Modify the validatePayment function:

    function validatePayment(cart) {
    var paymentAmount, countryCode, invalidPaymentInstruments, result;
     
       // ---------------------- ADD THE CODE BELOW ----------------------
       if (AdyenHelper.getAdyenCseEnabled()) {
          result = true;
          return result; 
       } 
  5. 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 { 
  6. Close the else condition: 

                    customer.getProfile().getWallet().removePaymentInstrument(creditcard);
                 }   
             }
          });
       }      
       return true
     
       // ---------------------- ADD THE CODE BELOW ---------------------- 
    }

controllers/COPlaceOrder.js

  1. In the handlePayments function,  add a new variable definition: 

    function handlePayments(order) {
       // ...
       var handlePaymentTransaction = function () {
           paymentInstrument.getPaymentTransaction().setTransactionID(order.getOrderNo());
       };
    
    // ---------------------- ADD THE CODE BELOW ----------------------
       var show3dSecureForm : Boolean = false;
  2. 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 (PaymentMgr.getPaymentMethod(paymentInstrument.getPaymentMethod()).getPaymentProcessor().ID === 'ADYEN_CREDIT'
                      && authorizationResult.authorized3d === true) {
                      var show3dSecureForm : Boolean = true;
                      var view : Object = authorizationResult.view;
    	  }
  3. In the handlePayments function, add code after the specified line: 

    for (var i = 0; i < paymentInstruments.length; i++) {
       var paymentInstrument = paymentInstruments[i];
       if (PaymentMgr.getPaymentMethod(paymentInstrument.getPaymentMethod()).getPaymentProcessor() === null) {
       // ...
       } else {
       // ...        
       }
    }
     
    // ---------------------- ADD THE CODE BELOW ----------------------
    if(shown3dSecureForm) {
       return{view : view};
    }
  4. Replace var handlePaymentsResult = handlePayments(order) with the following:

    var skipSubmitOrder : Boolean = false;
    var handlePaymentsResult = handlePayments(order);
    if (!empty(handlePaymentsResult.view)){ 
       skipSubmitOrder = true; 
    }
  5. Replace var orderPlacementStatus = Order.submit(order); with 

    if (order.paymentInstrument.paymentMethod == "Adyen") {
       return {
          Order: order,
          order_created: true
       };
    } else {
       if (skipSubmitOrder) {
          return {
             Order: order,
             order_created: true,
             view : handlePaymentsResult.view,
             skipSubmitOrder : skipSubmitOrder
          };
       }  else {
          var orderPlacementStatus = Order.submit(order);
       }
    }

controllers/COSummary.js:

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

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

    if (placeOrderResult.Order.paymentInstrument.paymentMethod == "Adyen"){
           AdyenController.Redirect(placeOrderResult.Order);
    } else {
       if (placeOrderResult.skipSubmitOrder === true) {
          placeOrderResult.view.render('adyenform');
       } else {
          showConfirmation(placeOrderResult.Order);
       }
    } 

controllers/PaymentInstruments.js

  1. At the top of the file, add the following 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: 

    /*Script Modules*/
    var AdyenHelper = require('int_adyen_overlay/cartridge/scripts/util/AdyenHelper');
  3. 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});
  4. Modify the create function:

    var paymentInstruments = wallet.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD);
     
    // ---------------------- ADD THE CODE BELOW ---------------------- 
    if (AdyenHelper.getAdyenRecurringPaymentsEnabled()) {
            var createRecurringPaymentAccountResult = AdyenHelper.createRecurringPaymentAccount({
                Customer: customer
            });
            
            if (createRecurringPaymentAccountResult.error) {
                return false;
            }
            pspReference = 'PspReference' in createRecurringPaymentAccountResult && !empty(createRecurringPaymentAccountResult.PspReference) ? createRecurringPaymentAccountResult.PspReference : '';
            tokenID = 'TokenID' in createRecurringPaymentAccountResult && !empty(createRecurringPaymentAccountResult.TokenID) ? createRecurringPaymentAccountResult.TokenID : '';
            /*if  (empty(TokenID)  ||  empty(PspReference))  {
        return   false;                   }*/
            try {
                Transaction.wrap(function() {
                    /*  var  newCreditCard  = customer.getProfile().getWallet().createPaymentInstrument(PaymentInstrument.METHOD_CREDIT_CARD);                                                 
                     * //   copy   the   credit   card   details   to   the   payment   instrument                                 
                     * newCreditCard.setCreditCardHolder(
                                newCreditCard.setCreditCardNumber(
                                newCreditCard.setCreditCardType(                         
                                newCreditCard.setCreditCardToken(tokenID);                          
                                newCreditCard.custom.AdyenPspReference  =  pspReference; */
                    require('int_adyen_overlay/cartridge/scripts/UpdateSavedCards').updateSavedCards({
                        CurrentCustomer: customer,
                        PaymentsMap: createRecurringPaymentAccountResult.PaymentsMap
                    });
                });
            } catch (e) {
                Logger.error('{0}:  {1}', e, e.stack);
                return false;
            }
            return true;
     }
  5. 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);
       }
    }
  6. Modify the verifyCreditCard function: 

    function verifyCreditCard() {
       var newCreditCardForm = app.getForm('paymentinstruments.creditcards.newcreditcard');
     
       // ---------------------- ADD THE CODE BELOW ----------------------
       if (AdyenHelper.getAdyenCseEnabled())   {
          return true;
       } 

Next steps

Set up the cartridge

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

link


Set up the payment methods

Set up the payment methods that you wish to offer.

link