Adyen Payment Options Integration

Follow this guide to implement the Adyen Payment Options integration for use on your websites checkout page.

Files & Templates

Please see the following list of templates and assets used by this integration that should be added to your site templates. Please review each of the items below.

File	Purpose	Notes
templates/example.com/_js/adyen.payments.js	Aurora Adyen Payment Options Javascript Library	This script should be added to the checkout page on the frontend (already added in the template below by default).
templates/example.com/checkout/adyen/payment-methods.tpl.html	Template for the additional Adyen Payment Methods	This template will be loaded when Adyen is available at the checkout page. It includes: - templates/example.com/_js/adyen.payments.js - the template for the additional Adyen methods
templates/example.com/checkout/payment-adyen-setup.tpl.html	Template for the Adyen Payment Setup page	The Adyen Javascript Widget is loaded on this page and the response from Adyen is passed to the Adyen SDK. This page should not be called directly! The user will be redirected to it from the checkout page, when there is a required 3DS or any other interaction.

🚧
You may need to include the above files and template unless you are already using the most recent copy of the Aurora Example Templates.

🚧
The form redirection template is also required, see Form Redirect From External Site

🚧
Please note that these are all provided with a view to having them working within the Aurora demo website. As such, if you have customised your templates and their supporting JavaScript files away from the standard Aurora Demo implementations, you may need to use these files for 'inspiration' only.

JavaScript configuration

window.AdyenPayments.initPaymentMethods(
{
	'currency': 'currency-of-the-payment',
	'language': 'language-of-instance',
	'amountTotal': 'total-amount',
	'userId': 'user-id',
	'template': $('#adyen-payment-methods-template'),
	'container': $('#adyen-payment-options-container'),
	'country': 'country',
	'prefixPaymentMethods': 'Adyen'
}

This snippet of code is by default found in templates/example.com/checkout/adyen/payment-methods.tpl.html and is used to initialise the Adyen Payment Options on the checkout page.

Please find below an explanation of each configuration option.

Option	Type	Example value	Notes
container	DOM Selector as String	`$('#adyen-payment-options-container')`	Adyen's Widget will be loaded within the element with this object.
template	Selector of template usage	`$('#adyen-payment-methods-template')`	Template which will be used to generate the bullet list payment method.
prefixPaymentMethods	String	`Adyen`	The option will add the value in front of the payment options.

Template Breakdown

Template For The Additional Adyen Payment Methods

templates/example.com/checkout/adyen/payment-methods.tpl.html

These code blocks below contain the minimal code required to enable and render all the additional Adyen Payment Methods. Here are the parts of the template that are required and should be used:

Include the required javascript

{include_js files="adyen.payments"}

The template to be used for each additional payment type

<!-- Template for customising the payment methods -->
<script type="text/template" id="adyen-payment-methods-template">
	{literal}
	<p>
		<input type="radio" class="radio" name="payment_type" value="proxy-adyen" id="{payment_category_id}"/>
		<label class="checkout_label_radio"  for="{payment_category_id}" >{payment_category_label}</label>
	</p>
	{/literal}
</script>

The required input fields that should be available within the template. These fields will be used to send all the additional information required by the Adyen implementation

<div id="adyen-payment-hidden-inputs-container">
	<input name="payment_custom_fields[adyen_data]" id="adyen_data" type="hidden" />
</div>

The script that will initialise Adyen Payments JavaScript library

<script type="text/javascript">
	{literal}
    (function ($) {
    {/literal}
		var currency = '{$currency_iso_chargeable|upper}';
		var language = '{$language_iso_selected}';
		var amountTotal = '{$payment_total_chargeable}';
		var userId = '{$smarty.session.user.id}';
		var country = '{$shipping_country_data.iso2}';

		var country_list = [];

		{foreach from = $country_list item="info"}
			country_list['{$info.id}'] = '{$info.iso2}';
		{/foreach}
		{literal}

		$(document).ready(function () {
			try {
				window.AdyenPayments.initPaymentMethods(
					{
						'currency': currency,
						'language': language,
						'amountTotal': amountTotal,
						'userId': userId,
						'country': country.toUpperCase(),
						'template': $('#adyen-payment-methods-template'),
						'container': $('#adyen-payment-options-container'),
						'prefixPaymentMethods': 'Adyen',
						'country_list': country_list
					}
				);
			} catch (err) {
				console.log(err);
			}
		});
	})(jQuery);
	{/literal}
</script>

The option prefixPaymentMethods will add the value in front of the payment options. Country should always be uppercase.

Template For The Adyen Payment Setup Page

These code blocks contain the minimal code required to enable and render all the additional Adyen Payment Setup page. This page should not be accessed directly. The customer will be redirected here if there is a required interaction such as entering 3DS details or Bank details for GiroPay.

Here are the parts of the template that are required and should be used:

{include_js files="adyen.payments"}

{assign var="metaTitle" value="Adyen Checkout"}
{$fragment}

<div id="adyen-payment-3ds-container"></div>
<script type="text/javascript">
    {literal}
    (function ($) {
        {/literal}
            var currency = '{$currency_iso_chargeable|upper}';
            var language = '{$language_iso_selected}';
            var amountTotal = '{$payment_total_chargeable}';
            var userId = '{$smarty.session.user.id}';
            var country = '{$shipping_country_data.iso2}';
            var action = {$parameters.action|@json_encode nofilter};

            var country_list = [];

            {foreach from = $country_list item="info"}
            country_list['{$info.id}'] = '{$info.iso2}';
            {/foreach}
                {literal}

                document.addEventListener("DOMContentLoaded", async () => {

                    try {
                        const data = await window.AdyenPayments.loadPaymentMethodData(
                            {
                                'currency': currency,
                                'language': language,
                                'amountTotal': amountTotal,
                                'userId': userId,
                                'country': country.toUpperCase(),
                                'prefixPaymentMethods': 'Adyen',
                                'country_list': country_list
                            }
                        );

                        await AdyenPayments.loadSDK();
                        const checkout = await AdyenPayments.loadCheckout(data);
                        checkout.createFromAction(action).mount('#adyen-payment-3ds-container');
                    } catch (err) {
                        console.log(err);
                    }
                });
            })(jQuery);
        {/literal}
</script>

Updated over 2 years ago