How to customize your SFCC cartridge

How to customize your Salesforce Commerce Cloud cartridge

How to enable quick upgrades through a modular cartridge with customisations in your SFCC payments cartridge.

Let’s say you want to extend the unmodified Adyen payments cartridge by creating a customization that includes a terms and conditions verification on the Order review page.

This customisation ensures that users must acknowledge the terms and conditions before proceeding to Place Order and Pay.

If no customization is applied, the unmodified order review page will lack the Terms and Conditions check prior to the "Place Order" button.

In the Business Manager on the Salesforce Commerce Cloud instance, the shop admin only observes the unmodified Adyen SFCC Payment cartridge in the cartridge path.

At this stage, no customization has been enabled.

To create Terms and Conditions customization: Set up a custom cartridge folder named "int_custom_cartridge" in your SFCC project.

This folder will contain all your customizations.

Inside your custom cartridge, create two new templates: a new Terms and Conditions (T&C) ISML template file under "templates/default/checkout" and a Checkout.isml template, and a Checkout.isml template, a copy of the original Checkout.isml template from the app_storefront_base cartridge.

Connect the two custom templates by including the terms and conditions template in the custom checkout template.

To integrate the custom templates with the cartridge's backend, you need to pass the template data to the API endpoint that the "Place Order" button is calling, when the shopper presses this button on the checkout.

To do this, create new JavaScript files, CheckoutSFRA5 and CheckoutSFRA6, in your custom cartridge by copying them from the int_adyen_SFRA cartridge.

Adjust the shopper flow of placing the order by incorporating the Terms and Conditions form into the checkout process. This customization ensures that shoppers must accept the terms before proceeding with the order.

To validate on the backend that the front-end custom conditions have been met, customize the back-end. First, visit ""controllers” to create a new ‘middleware’ called Terms and Conditions." The middleware will verify if the front-end Terms & Condition form was completed to allow the unmodified Adyen cartridge int_adyen_SFRA to continue the payment process, otherwise the middleware throws an error.

Secondly, you need to add created middleware to CheckoutServices controller as a “prepend” to make sure the Place order flow is customized correctly.

Now the code customization on the front end and back end is done!

Next, Let’s build the cartridge to upload it into your instance.

In the file package.json, replace name attribute from int_adyen_SFRA with the name of your custom cartridge.

Run NPM RUN BUILD command in the terminal to transiple, compile the code and upload the cartridge into your sandbox.

To enable your customization in your SFCC instance, add the name of the customization folder at the beginning of the cartridge path and click Apply.

Refresh the page to see the customization on the storefront.

Terms and conditions check shows up on the page.

Here we can see that the change is implemented in the order placement process, because order placement throws an error if the shopper hasn’t checked terms and conditions.

If the shopper checks T&C, they can successfully place an order.

Once your customization is modular, like the example in this video, you can easily upgrade your Adyen payments plugin to a higher version.

Check out our other video for details.