diff --git a/payment/amd/build/gateways_modal.min.js b/payment/amd/build/gateways_modal.min.js
index a2d21ee55ad..aa2086b6e22 100644
--- a/payment/amd/build/gateways_modal.min.js
+++ b/payment/amd/build/gateways_modal.min.js
@@ -1,2 +1,2 @@
-define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","./repository","./selectors","core/modal_events","core_payment/events","core/toast","core/notification","./modal_gateways"],function(a,b,c,d,e,f,g,h,i,j,k){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=a.registerEventListenersBySelector=void 0;b=l(b);c=l(c);f=l(f);g=l(g);h=l(h);j=l(j);k=l(k);var o="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function l(a){return a&&a.__esModule?a:{default:a}}function m(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function n(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){m(h,d,e,f,g,"next",a)}function g(a){m(h,d,e,f,g,"throw",a)}f(void 0)})}}a.registerEventListenersBySelector=function registerEventListenersBySelector(a){document.querySelectorAll(a).forEach(function(a){p(a)})};var p=function(a){a.addEventListener("click",function(b){b.preventDefault();q(a,{focusOnClose:b.target})})};a.registerEventListeners=p;var q=function(){var a=n(regeneratorRuntime.mark(function a(l){var m,n,o,p,q,s,t,u,v,w,x=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:m=1<x.length&&x[1]!==void 0?x[1]:{},n=m.focusOnClose,o=void 0===n?null:n;a.t0=b.default;a.t1=k.default.TYPE;a.next=5;return(0,d.get_string)("selectpaymenttype","core_payment");case 5:a.t2=a.sent;a.next=8;return c.default.render("core_payment/gateways_modal",{});case 8:a.t3=a.sent;a.t4={type:a.t1,title:a.t2,body:a.t3};a.next=12;return a.t0.create.call(a.t0,a.t4);case 12:p=a.sent;(0,i.addToastRegion)(p.getRoot()[0]);p.show();p.getRoot().on(g.default.hidden,function(){p.destroy();try{o.focus()}catch(a){}});p.getRoot().on(h.default.proceed,function(a){var b=p.getRoot()[0],c=(b.querySelector(f.default.values.gateway)||{value:""}).value;if(c){r(c,l.dataset.amount,l.dataset.currency,l.dataset.component,l.dataset.componentid,l.dataset.description,function(a){var b=a.success,c=a.message,d=void 0===c?"":c;p.hide();if(b){j.default.addNotification({message:d,type:"success"});location.reload()}else{j.default.alert("",d)}})}else{(0,d.get_string)("nogatewayselected","core_payment").then(function(a){return(0,i.add)(a)})}a.preventDefault()});q=l.dataset.currency;a.next=20;return(0,e.getGatewaysSupportingCurrency)(q);case 20:s=a.sent;t={gateways:s};a.next=24;return c.default.renderForPromise("core_payment/gateways",t);case 24:u=a.sent;v=u.html;w=u.js;c.default.replaceNodeContents(p.getRoot().find(f.default.regions.gatewaysContainer),v,w);case 28:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),r=function(){var a=n(regeneratorRuntime.mark(function a(b,c,d,e,f,g,h){var i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return"function"==typeof o.define&&o.define.amd?new Promise(function(a,c){o.require(["pg_".concat(b,"/gateways_modal")],a,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("pg_".concat(b,"/gateways_modal")))):Promise.resolve(o["pg_".concat(b,"/gateways_modal")]);case 2:i=a.sent;i.process(c,d,e,f,g,h);case 4:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}()});
+define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","./repository","./selectors","core/modal_events","core_payment/events","core/toast","core/notification","./modal_gateways"],function(a,b,c,d,e,f,g,h,i,j,k){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=a.registerEventListenersBySelector=void 0;b=l(b);c=l(c);f=l(f);g=l(g);h=l(h);j=l(j);k=l(k);var o="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function l(a){return a&&a.__esModule?a:{default:a}}function m(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function n(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){m(h,d,e,f,g,"next",a)}function g(a){m(h,d,e,f,g,"throw",a)}f(void 0)})}}a.registerEventListenersBySelector=function registerEventListenersBySelector(a){document.querySelectorAll(a).forEach(function(a){p(a)})};var p=function(a){a.addEventListener("click",function(b){b.preventDefault();q(a,{focusOnClose:b.target})})};a.registerEventListeners=p;var q=function(){var a=n(regeneratorRuntime.mark(function a(l){var m,n,o,p,q,t,u,v,w,x,y,z=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:m=1<z.length&&z[1]!==void 0?z[1]:{},n=m.focusOnClose,o=void 0===n?null:n;a.t0=b.default;a.t1=k.default.TYPE;a.next=5;return(0,d.get_string)("selectpaymenttype","core_payment");case 5:a.t2=a.sent;a.next=8;return c.default.render("core_payment/gateways_modal",{});case 8:a.t3=a.sent;a.t4={type:a.t1,title:a.t2,body:a.t3};a.next=12;return a.t0.create.call(a.t0,a.t4);case 12:p=a.sent;(0,i.addToastRegion)(p.getRoot()[0]);p.show();p.getRoot().on(g.default.hidden,function(){p.destroy();try{o.focus()}catch(a){}});p.getRoot().on(h.default.proceed,function(a){var b=p.getRoot()[0],c=(b.querySelector(f.default.values.gateway)||{value:""}).value;if(c){s(c,l.dataset.amount,l.dataset.currency,l.dataset.component,l.dataset.componentid,l.dataset.description,function(a){var b=a.success,c=a.message,d=void 0===c?"":c;p.hide();if(b){j.default.addNotification({message:d,type:"success"});location.reload()}else{j.default.alert("",d)}})}else{(0,d.get_string)("nogatewayselected","core_payment").then(function(a){return(0,i.add)(a)})}a.preventDefault()});q=l.dataset.currency;a.next=20;return(0,e.getGatewaysSupportingCurrency)(q);case 20:t=a.sent;u={gateways:t};a.next=24;return c.default.renderForPromise("core_payment/gateways",u);case 24:v=a.sent;w=v.html;x=v.js;y=p.getRoot()[0];c.default.replaceNodeContents(y.querySelector(f.default.regions.gatewaysContainer),w,x);r(y,parseFloat(l.dataset.amount),l.dataset.currency);case 30:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),r=function(){var a=n(regeneratorRuntime.mark(function a(b,d,e){var g,h,i,j,k;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return r.locale;case 2:g=a.sent;h=d.toLocaleString(g,{style:"currency",currency:e});a.next=6;return c.default.renderForPromise("core_payment/fee_breakdown",{fee:h});case 6:i=a.sent;j=i.html;k=i.js;c.default.replaceNodeContents(b.querySelector(f.default.regions.costContainer),j,k);case 10:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();r.locale=(0,d.get_string)("localecldr","langconfig");var s=function(){var a=n(regeneratorRuntime.mark(function a(b,c,d,e,f,g,h){var i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return"function"==typeof o.define&&o.define.amd?new Promise(function(a,c){o.require(["pg_".concat(b,"/gateways_modal")],a,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("pg_".concat(b,"/gateways_modal")))):Promise.resolve(o["pg_".concat(b,"/gateways_modal")]);case 2:i=a.sent;i.process(c,d,e,f,g,h);case 4:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}()});
 //# sourceMappingURL=gateways_modal.min.js.map
diff --git a/payment/amd/build/gateways_modal.min.js.map b/payment/amd/build/gateways_modal.min.js.map
index 57e85ac5fbd..0a2256d28ac 100644
--- a/payment/amd/build/gateways_modal.min.js.map
+++ b/payment/amd/build/gateways_modal.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/gateways_modal.js"],"names":["registerEventListenersBySelector","nodeSelector","document","querySelectorAll","forEach","element","registerEventListeners","rootNode","addEventListener","e","preventDefault","show","focusOnClose","target","ModalFactory","ModalGateways","TYPE","Templates","render","type","title","body","create","modal","getRoot","on","ModalEvents","hidden","destroy","focus","PaymentEvents","proceed","root","gateway","querySelector","Selectors","values","value","processPayment","dataset","amount","currency","component","componentid","description","success","message","hide","Notification","addNotification","location","reload","alert","then","gateways","context","renderForPromise","html","js","replaceNodeContents","find","regions","gatewaysContainer","callback","paymentMethod","process"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Contain the logic for the gateways modal.\n *\n * @module     core_payment/gateways_modal\n * @package    core_payment\n * @copyright  2019 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalFactory from 'core/modal_factory';\nimport Templates from 'core/templates';\nimport {get_string as getString} from 'core/str';\nimport {getGatewaysSupportingCurrency} from './repository';\nimport Selectors from './selectors';\nimport ModalEvents from 'core/modal_events';\nimport PaymentEvents from 'core_payment/events';\nimport {add as addToast, addToastRegion} from 'core/toast';\nimport Notification from 'core/notification';\nimport ModalGateways from './modal_gateways';\n\n/**\n * Register event listeners for the module.\n *\n * @param {string} nodeSelector The root to listen to.\n */\nexport const registerEventListenersBySelector = (nodeSelector) => {\n    document.querySelectorAll(nodeSelector).forEach((element) => {\n        registerEventListeners(element);\n    });\n};\n\n/**\n * Register event listeners for the module.\n *\n * @param {HTMLElement} rootNode The root to listen to.\n */\nexport const registerEventListeners = (rootNode) => {\n    rootNode.addEventListener('click', (e) => {\n        e.preventDefault();\n        show(rootNode, {focusOnClose: e.target});\n    });\n};\n\n/**\n * Shows the gateway selector modal.\n *\n * @param {HTMLElement} rootNode\n * @param {Object} options - Additional options\n * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.\n */\nconst show = async(rootNode, {\n    focusOnClose = null,\n} = {}) => {\n    const modal = await ModalFactory.create({\n        type: ModalGateways.TYPE,\n        title: await getString('selectpaymenttype', 'core_payment'),\n        body: await Templates.render('core_payment/gateways_modal', {}),\n    });\n\n    addToastRegion(modal.getRoot()[0]);\n\n    modal.show();\n\n    modal.getRoot().on(ModalEvents.hidden, () => {\n        // Destroy when hidden.\n        modal.destroy();\n        try {\n            focusOnClose.focus();\n        } catch (e) {\n            // eslint-disable-line\n        }\n    });\n\n    modal.getRoot().on(PaymentEvents.proceed, (e) => {\n        const root = modal.getRoot()[0];\n        const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;\n\n        if (gateway) {\n            processPayment(\n                gateway,\n                rootNode.dataset.amount,\n                rootNode.dataset.currency,\n                rootNode.dataset.component,\n                rootNode.dataset.componentid,\n                rootNode.dataset.description,\n                ({success, message = ''}) => {\n                    modal.hide();\n                    if (success) {\n                        Notification.addNotification({\n                            message: message,\n                            type: 'success',\n                        });\n                        location.reload();\n                    } else {\n                        Notification.alert('', message);\n                    }\n                },\n            );\n        } else {\n            // We cannot use await in the following line.\n            // The reason is that we are preventing the default action of the save event being triggered,\n            // therefore we cannot define the event handler function asynchronous.\n            getString('nogatewayselected', 'core_payment').then(message => addToast(message));\n        }\n\n        e.preventDefault();\n    });\n\n    const currency = rootNode.dataset.currency;\n    const gateways = await getGatewaysSupportingCurrency(currency);\n    const context = {\n        gateways\n    };\n\n    const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);\n    Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);\n};\n\n/**\n * Process payment using the selected gateway.\n *\n * @param {string} gateway The gateway to be used for payment\n * @param {number} amount Amount of payment\n * @param {string} currency The currency in the three-character ISO-4217 format\n * @param {string} component Name of the component that the componentid belongs to\n * @param {number} componentid An internal identifier that is used by the component\n * @param {string} description Description of the payment\n * @param {processPaymentCallback} callback The callback function to call when processing is finished\n * @returns {Promise<void>}\n */\nconst processPayment = async(gateway, amount, currency, component, componentid, description, callback) => {\n    const paymentMethod = await import(`pg_${gateway}/gateways_modal`);\n\n    paymentMethod.process(amount, currency, component, componentid, description, callback);\n};\n\n/**\n * The callback definition for processPayment.\n *\n * @callback processPaymentCallback\n * @param {bool} success\n * @param {string} message\n */\n"],"file":"gateways_modal.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/gateways_modal.js"],"names":["registerEventListenersBySelector","nodeSelector","document","querySelectorAll","forEach","element","registerEventListeners","rootNode","addEventListener","e","preventDefault","show","focusOnClose","target","ModalFactory","ModalGateways","TYPE","Templates","render","type","title","body","create","modal","getRoot","on","ModalEvents","hidden","destroy","focus","PaymentEvents","proceed","root","gateway","querySelector","Selectors","values","value","processPayment","dataset","amount","currency","component","componentid","description","success","message","hide","Notification","addNotification","location","reload","alert","then","gateways","context","renderForPromise","html","js","replaceNodeContents","regions","gatewaysContainer","updateCostRegion","parseFloat","locale","localisedCost","toLocaleString","style","fee","costContainer","callback","paymentMethod","process"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Contain the logic for the gateways modal.\n *\n * @module     core_payment/gateways_modal\n * @package    core_payment\n * @copyright  2019 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalFactory from 'core/modal_factory';\nimport Templates from 'core/templates';\nimport {get_string as getString} from 'core/str';\nimport {getGatewaysSupportingCurrency} from './repository';\nimport Selectors from './selectors';\nimport ModalEvents from 'core/modal_events';\nimport PaymentEvents from 'core_payment/events';\nimport {add as addToast, addToastRegion} from 'core/toast';\nimport Notification from 'core/notification';\nimport ModalGateways from './modal_gateways';\n\n/**\n * Register event listeners for the module.\n *\n * @param {string} nodeSelector The root to listen to.\n */\nexport const registerEventListenersBySelector = (nodeSelector) => {\n    document.querySelectorAll(nodeSelector).forEach((element) => {\n        registerEventListeners(element);\n    });\n};\n\n/**\n * Register event listeners for the module.\n *\n * @param {HTMLElement} rootNode The root to listen to.\n */\nexport const registerEventListeners = (rootNode) => {\n    rootNode.addEventListener('click', (e) => {\n        e.preventDefault();\n        show(rootNode, {focusOnClose: e.target});\n    });\n};\n\n/**\n * Shows the gateway selector modal.\n *\n * @param {HTMLElement} rootNode\n * @param {Object} options - Additional options\n * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.\n */\nconst show = async(rootNode, {\n    focusOnClose = null,\n} = {}) => {\n    const modal = await ModalFactory.create({\n        type: ModalGateways.TYPE,\n        title: await getString('selectpaymenttype', 'core_payment'),\n        body: await Templates.render('core_payment/gateways_modal', {}),\n    });\n\n    addToastRegion(modal.getRoot()[0]);\n\n    modal.show();\n\n    modal.getRoot().on(ModalEvents.hidden, () => {\n        // Destroy when hidden.\n        modal.destroy();\n        try {\n            focusOnClose.focus();\n        } catch (e) {\n            // eslint-disable-line\n        }\n    });\n\n    modal.getRoot().on(PaymentEvents.proceed, (e) => {\n        const root = modal.getRoot()[0];\n        const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;\n\n        if (gateway) {\n            processPayment(\n                gateway,\n                rootNode.dataset.amount,\n                rootNode.dataset.currency,\n                rootNode.dataset.component,\n                rootNode.dataset.componentid,\n                rootNode.dataset.description,\n                ({success, message = ''}) => {\n                    modal.hide();\n                    if (success) {\n                        Notification.addNotification({\n                            message: message,\n                            type: 'success',\n                        });\n                        location.reload();\n                    } else {\n                        Notification.alert('', message);\n                    }\n                },\n            );\n        } else {\n            // We cannot use await in the following line.\n            // The reason is that we are preventing the default action of the save event being triggered,\n            // therefore we cannot define the event handler function asynchronous.\n            getString('nogatewayselected', 'core_payment').then(message => addToast(message));\n        }\n\n        e.preventDefault();\n    });\n\n    const currency = rootNode.dataset.currency;\n    const gateways = await getGatewaysSupportingCurrency(currency);\n    const context = {\n        gateways\n    };\n\n    const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);\n    const root = modal.getRoot()[0];\n    Templates.replaceNodeContents(root.querySelector(Selectors.regions.gatewaysContainer), html, js);\n    updateCostRegion(root, parseFloat(rootNode.dataset.amount), rootNode.dataset.currency);\n};\n\n/**\n * Shows the cost of the item the user is purchasing in the cost region.\n *\n * @param {HTMLElement} root An HTMLElement that contains the cost region\n * @param {number} amount The amount part of cost\n * @param {string} currency The currency part of cost in the 3-letter ISO-4217 format\n * @returns {Promise<void>}\n */\nconst updateCostRegion = async(root, amount, currency) => {\n    const locale = await updateCostRegion.locale; // This only takes a bit the first time.\n    const localisedCost = amount.toLocaleString(locale, {style: \"currency\", currency: currency});\n\n    const {html, js} = await Templates.renderForPromise('core_payment/fee_breakdown', {fee: localisedCost});\n    Templates.replaceNodeContents(root.querySelector(Selectors.regions.costContainer), html, js);\n};\nupdateCostRegion.locale = getString(\"localecldr\", \"langconfig\");\n\n/**\n * Process payment using the selected gateway.\n *\n * @param {string} gateway The gateway to be used for payment\n * @param {number} amount Amount of payment\n * @param {string} currency The currency in the three-character ISO-4217 format\n * @param {string} component Name of the component that the componentid belongs to\n * @param {number} componentid An internal identifier that is used by the component\n * @param {string} description Description of the payment\n * @param {processPaymentCallback} callback The callback function to call when processing is finished\n * @returns {Promise<void>}\n */\nconst processPayment = async(gateway, amount, currency, component, componentid, description, callback) => {\n    const paymentMethod = await import(`pg_${gateway}/gateways_modal`);\n\n    paymentMethod.process(amount, currency, component, componentid, description, callback);\n};\n\n/**\n * The callback definition for processPayment.\n *\n * @callback processPaymentCallback\n * @param {bool} success\n * @param {string} message\n */\n"],"file":"gateways_modal.min.js"}
\ No newline at end of file
diff --git a/payment/amd/build/modal_gateways.min.js b/payment/amd/build/modal_gateways.min.js
index 54d199f8694..4f3288315b1 100644
--- a/payment/amd/build/modal_gateways.min.js
+++ b/payment/amd/build/modal_gateways.min.js
@@ -1,2 +1,2 @@
-define ("core_payment/modal_gateways",["exports","jquery","core/custom_interaction_events","core/modal","core/modal_events","core_payment/events","core/modal_registry"],function(a,b,c,d,f,g,h){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=i(b);c=i(c);d=i(d);f=i(f);g=i(g);h=i(h);function i(a){return a&&a.__esModule?a:{default:a}}function j(a){if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){j=function(a){return typeof a}}else{j=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return j(a)}function k(a,b){if(!(a instanceof b)){throw new TypeError("Cannot call a class as a function")}}function l(a,b){for(var c=0,d;c<b.length;c++){d=b[c];d.enumerable=d.enumerable||!1;d.configurable=!0;if("value"in d)d.writable=!0;Object.defineProperty(a,d.key,d)}}function m(a,b,c){if(b)l(a.prototype,b);if(c)l(a,c);return a}function n(a,b){if(b&&("object"===j(b)||"function"==typeof b)){return b}return o(a)}function o(a){if(void 0===a){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return a}function p(a,b,c){if("undefined"!=typeof Reflect&&Reflect.get){p=Reflect.get}else{p=function(a,b,c){var d=q(a,b);if(!d)return;var e=Object.getOwnPropertyDescriptor(d,b);if(e.get){return e.get.call(c)}return e.value}}return p(a,b,c||a)}function q(a,b){while(!Object.prototype.hasOwnProperty.call(a,b)){a=r(a);if(null===a)break}return a}function r(a){r=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)};return r(a)}function s(a,b){if("function"!=typeof b&&null!==b){throw new TypeError("Super expression must either be null or a function")}a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}});if(b)t(a,b)}function t(a,b){t=Object.setPrototypeOf||function(a,b){a.__proto__=b;return a};return t(a,b)}var u=!1,v={PROCEED_BUTTON:"[data-action=\"proceed\"]",CANCEL_BUTTON:"[data-action=\"cancel\"]"},w=function(a){s(d,a);function d(a){k(this,d);return n(this,r(d).call(this,a))}m(d,[{key:"registerEventListeners",value:function registerEventListeners(){var a=this;p(r(d.prototype),"registerEventListeners",this).call(this);this.getModal().on(c.default.events.activate,v.PROCEED_BUTTON,function(c,d){var e=b.default.Event(g.default.proceed);a.getRoot().trigger(e,a);if(!e.isDefaultPrevented()){a.hide();d.originalEvent.preventDefault()}});this.getModal().on(c.default.events.activate,v.CANCEL_BUTTON,function(c,d){var e=b.default.Event(f.default.cancel);a.getRoot().trigger(e,a);if(!e.isDefaultPrevented()){a.hide();d.originalEvent.preventDefault()}})}}]);return d}(d.default);a.default=w;w.TYPE="core_payment-modal_gateways";if(!u){h.default.register(w.TYPE,w,"core_payment/modal_gateways");u=!0}return a.default});
+define ("core_payment/modal_gateways",["exports","jquery","core/custom_interaction_events","core/modal","core/modal_events","core_payment/events","core/modal_registry"],function(a,b,c,d,f,g,h){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=i(b);c=i(c);d=i(d);f=i(f);g=i(g);h=i(h);function i(a){return a&&a.__esModule?a:{default:a}}function j(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){j=function(a){return typeof a}}else{j=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return j(a)}function k(a,b){if(!(a instanceof b)){throw new TypeError("Cannot call a class as a function")}}function l(a,b){for(var c=0,d;c<b.length;c++){d=b[c];d.enumerable=d.enumerable||!1;d.configurable=!0;if("value"in d)d.writable=!0;Object.defineProperty(a,d.key,d)}}function m(a,b,c){if(b)l(a.prototype,b);if(c)l(a,c);return a}function n(a,b,c){if("undefined"!=typeof Reflect&&Reflect.get){n=Reflect.get}else{n=function(a,b,c){var d=o(a,b);if(!d)return;var e=Object.getOwnPropertyDescriptor(d,b);if(e.get){return e.get.call(c)}return e.value}}return n(a,b,c||a)}function o(a,b){while(!Object.prototype.hasOwnProperty.call(a,b)){a=v(a);if(null===a)break}return a}function p(a,b){if("function"!=typeof b&&null!==b){throw new TypeError("Super expression must either be null or a function")}a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}});if(b)q(a,b)}function q(a,b){q=Object.setPrototypeOf||function(a,b){a.__proto__=b;return a};return q(a,b)}function r(a){return function(){var b=v(a),c;if(u()){var d=v(this).constructor;c=Reflect.construct(b,arguments,d)}else{c=b.apply(this,arguments)}return s(this,c)}}function s(a,b){if(b&&("object"===j(b)||"function"==typeof b)){return b}return t(a)}function t(a){if(void 0===a){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return a}function u(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{Date.prototype.toString.call(Reflect.construct(Date,[],function(){}));return!0}catch(a){return!1}}function v(a){v=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)};return v(a)}var w=!1,x={PROCEED_BUTTON:"[data-action=\"proceed\"]",CANCEL_BUTTON:"[data-action=\"cancel\"]"},y=function(a){p(d,a);var e=r(d);function d(a){k(this,d);return e.call(this,a)}m(d,[{key:"registerEventListeners",value:function registerEventListeners(){var a=this;n(v(d.prototype),"registerEventListeners",this).call(this);this.getModal().on(c.default.events.activate,x.PROCEED_BUTTON,function(c,d){var e=b.default.Event(g.default.proceed);a.getRoot().trigger(e,a);if(!e.isDefaultPrevented()){a.hide();d.originalEvent.preventDefault()}});this.getModal().on(c.default.events.activate,x.CANCEL_BUTTON,function(c,d){var e=b.default.Event(f.default.cancel);a.getRoot().trigger(e,a);if(!e.isDefaultPrevented()){a.hide();d.originalEvent.preventDefault()}})}}]);return d}(d.default);a.default=y;y.TYPE="core_payment-modal_gateways";if(!w){h.default.register(y.TYPE,y,"core_payment/modal_gateways");w=!0}return a.default});
 //# sourceMappingURL=modal_gateways.min.js.map
diff --git a/payment/amd/build/modal_gateways.min.js.map b/payment/amd/build/modal_gateways.min.js.map
index 7be1ed0282a..6a1a4242121 100644
--- a/payment/amd/build/modal_gateways.min.js.map
+++ b/payment/amd/build/modal_gateways.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/modal_gateways.js"],"names":["registered","SELECTORS","PROCEED_BUTTON","CANCEL_BUTTON","ModalGateways","root","getModal","on","CustomEvents","events","activate","e","data","proceedEvent","$","Event","PaymentEvents","proceed","getRoot","trigger","isDefaultPrevented","hide","originalEvent","preventDefault","cancelEvent","ModalEvents","cancel","Modal","TYPE","ModalRegistry","register"],"mappings":"gRAwBA,OACA,OACA,OACA,OACA,OACA,O,6kDAEIA,CAAAA,CAAU,G,CACRC,CAAS,CAAG,CACdC,cAAc,CAAE,2BADF,CAEdC,aAAa,CAAE,0BAFD,C,CAKGC,C,oBAOjB,WAAYC,CAAZ,CAAkB,wCACRA,CADQ,EAEjB,C,0EAOwB,YAErB,2DAEA,KAAKC,QAAL,GAAgBC,EAAhB,CAAmBC,UAAaC,MAAb,CAAoBC,QAAvC,CAAiDT,CAAS,CAACC,cAA3D,CAA2E,SAACS,CAAD,CAAIC,CAAJ,CAAa,CACpF,GAAIC,CAAAA,CAAY,CAAGC,UAAEC,KAAF,CAAQC,UAAcC,OAAtB,CAAnB,CACA,CAAI,CAACC,OAAL,GAAeC,OAAf,CAAuBN,CAAvB,CAAqC,CAArC,EAEA,GAAI,CAACA,CAAY,CAACO,kBAAb,EAAL,CAAwC,CACpC,CAAI,CAACC,IAAL,GACAT,CAAI,CAACU,aAAL,CAAmBC,cAAnB,EACH,CACJ,CARD,EAUA,KAAKjB,QAAL,GAAgBC,EAAhB,CAAmBC,UAAaC,MAAb,CAAoBC,QAAvC,CAAiDT,CAAS,CAACE,aAA3D,CAA0E,SAACQ,CAAD,CAAIC,CAAJ,CAAa,CACnF,GAAIY,CAAAA,CAAW,CAAGV,UAAEC,KAAF,CAAQU,UAAYC,MAApB,CAAlB,CACA,CAAI,CAACR,OAAL,GAAeC,OAAf,CAAuBK,CAAvB,CAAoC,CAApC,EAEA,GAAI,CAACA,CAAW,CAACJ,kBAAZ,EAAL,CAAuC,CACnC,CAAI,CAACC,IAAL,GACAT,CAAI,CAACU,aAAL,CAAmBC,cAAnB,EACH,CACJ,CARD,CASH,C,cAvCsCI,S,cA0C3CvB,CAAa,CAACwB,IAAd,CAAqB,6BAArB,CAIA,GAAI,CAAC5B,CAAL,CAAiB,CACb6B,UAAcC,QAAd,CAAuB1B,CAAa,CAACwB,IAArC,CAA2CxB,CAA3C,CAA0D,6BAA1D,EACAJ,CAAU,GACb,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.\n *\n * @module     core_payment/modal_gateways\n * @package    core_payment\n * @copyright  2020 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport CustomEvents from 'core/custom_interaction_events';\nimport Modal from 'core/modal';\nimport ModalEvents from 'core/modal_events';\nimport PaymentEvents from 'core_payment/events';\nimport ModalRegistry from 'core/modal_registry';\n\nlet registered = false;\nconst SELECTORS = {\n    PROCEED_BUTTON: '[data-action=\"proceed\"]',\n    CANCEL_BUTTON: '[data-action=\"cancel\"]',\n};\n\nexport default class ModalGateways extends Modal {\n\n    /**\n     * Constructor for the Modal.\n     *\n     * @param {object} root The root jQuery element for the modal\n     */\n    constructor(root) {\n        super(root);\n    }\n\n    /**\n     * Set up all of the event handling for the modal.\n     *\n     * @method registerEventListeners\n     */\n    registerEventListeners() {\n        // Apply parent event listeners.\n        super.registerEventListeners();\n\n        this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, (e, data) => {\n            var proceedEvent = $.Event(PaymentEvents.proceed);\n            this.getRoot().trigger(proceedEvent, this);\n\n            if (!proceedEvent.isDefaultPrevented()) {\n                this.hide();\n                data.originalEvent.preventDefault();\n            }\n        });\n\n        this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, (e, data) => {\n            var cancelEvent = $.Event(ModalEvents.cancel);\n            this.getRoot().trigger(cancelEvent, this);\n\n            if (!cancelEvent.isDefaultPrevented()) {\n                this.hide();\n                data.originalEvent.preventDefault();\n            }\n        });\n    }\n}\n\nModalGateways.TYPE = 'core_payment-modal_gateways';\n\n// Automatically register with the modal registry the first time this module is imported so that you can create modals\n// of this type using the modal factory.\nif (!registered) {\n    ModalRegistry.register(ModalGateways.TYPE, ModalGateways, 'core_payment/modal_gateways');\n    registered = true;\n}\n"],"file":"modal_gateways.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/modal_gateways.js"],"names":["registered","SELECTORS","PROCEED_BUTTON","CANCEL_BUTTON","ModalGateways","root","getModal","on","CustomEvents","events","activate","e","data","proceedEvent","$","Event","PaymentEvents","proceed","getRoot","trigger","isDefaultPrevented","hide","originalEvent","preventDefault","cancelEvent","ModalEvents","cancel","Modal","TYPE","ModalRegistry","register"],"mappings":"gRAwBA,OACA,OACA,OACA,OACA,OACA,O,igEAEIA,CAAAA,CAAU,G,CACRC,CAAS,CAAG,CACdC,cAAc,CAAE,2BADF,CAEdC,aAAa,CAAE,0BAFD,C,CAKGC,C,+BAOjB,WAAYC,CAAZ,CAAkB,8BACRA,CADQ,CAEjB,C,0EAOwB,YAErB,2DAEA,KAAKC,QAAL,GAAgBC,EAAhB,CAAmBC,UAAaC,MAAb,CAAoBC,QAAvC,CAAiDT,CAAS,CAACC,cAA3D,CAA2E,SAACS,CAAD,CAAIC,CAAJ,CAAa,CACpF,GAAIC,CAAAA,CAAY,CAAGC,UAAEC,KAAF,CAAQC,UAAcC,OAAtB,CAAnB,CACA,CAAI,CAACC,OAAL,GAAeC,OAAf,CAAuBN,CAAvB,CAAqC,CAArC,EAEA,GAAI,CAACA,CAAY,CAACO,kBAAb,EAAL,CAAwC,CACpC,CAAI,CAACC,IAAL,GACAT,CAAI,CAACU,aAAL,CAAmBC,cAAnB,EACH,CACJ,CARD,EAUA,KAAKjB,QAAL,GAAgBC,EAAhB,CAAmBC,UAAaC,MAAb,CAAoBC,QAAvC,CAAiDT,CAAS,CAACE,aAA3D,CAA0E,SAACQ,CAAD,CAAIC,CAAJ,CAAa,CACnF,GAAIY,CAAAA,CAAW,CAAGV,UAAEC,KAAF,CAAQU,UAAYC,MAApB,CAAlB,CACA,CAAI,CAACR,OAAL,GAAeC,OAAf,CAAuBK,CAAvB,CAAoC,CAApC,EAEA,GAAI,CAACA,CAAW,CAACJ,kBAAZ,EAAL,CAAuC,CACnC,CAAI,CAACC,IAAL,GACAT,CAAI,CAACU,aAAL,CAAmBC,cAAnB,EACH,CACJ,CARD,CASH,C,cAvCsCI,S,cA0C3CvB,CAAa,CAACwB,IAAd,CAAqB,6BAArB,CAIA,GAAI,CAAC5B,CAAL,CAAiB,CACb6B,UAAcC,QAAd,CAAuB1B,CAAa,CAACwB,IAArC,CAA2CxB,CAA3C,CAA0D,6BAA1D,EACAJ,CAAU,GACb,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.\n *\n * @module     core_payment/modal_gateways\n * @package    core_payment\n * @copyright  2020 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport CustomEvents from 'core/custom_interaction_events';\nimport Modal from 'core/modal';\nimport ModalEvents from 'core/modal_events';\nimport PaymentEvents from 'core_payment/events';\nimport ModalRegistry from 'core/modal_registry';\n\nlet registered = false;\nconst SELECTORS = {\n    PROCEED_BUTTON: '[data-action=\"proceed\"]',\n    CANCEL_BUTTON: '[data-action=\"cancel\"]',\n};\n\nexport default class ModalGateways extends Modal {\n\n    /**\n     * Constructor for the Modal.\n     *\n     * @param {object} root The root jQuery element for the modal\n     */\n    constructor(root) {\n        super(root);\n    }\n\n    /**\n     * Set up all of the event handling for the modal.\n     *\n     * @method registerEventListeners\n     */\n    registerEventListeners() {\n        // Apply parent event listeners.\n        super.registerEventListeners();\n\n        this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, (e, data) => {\n            var proceedEvent = $.Event(PaymentEvents.proceed);\n            this.getRoot().trigger(proceedEvent, this);\n\n            if (!proceedEvent.isDefaultPrevented()) {\n                this.hide();\n                data.originalEvent.preventDefault();\n            }\n        });\n\n        this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, (e, data) => {\n            var cancelEvent = $.Event(ModalEvents.cancel);\n            this.getRoot().trigger(cancelEvent, this);\n\n            if (!cancelEvent.isDefaultPrevented()) {\n                this.hide();\n                data.originalEvent.preventDefault();\n            }\n        });\n    }\n}\n\nModalGateways.TYPE = 'core_payment-modal_gateways';\n\n// Automatically register with the modal registry the first time this module is imported so that you can create modals\n// of this type using the modal factory.\nif (!registered) {\n    ModalRegistry.register(ModalGateways.TYPE, ModalGateways, 'core_payment/modal_gateways');\n    registered = true;\n}\n"],"file":"modal_gateways.min.js"}
\ No newline at end of file
diff --git a/payment/amd/build/selectors.min.js b/payment/amd/build/selectors.min.js
index 480f147c206..ac36b9675a6 100644
--- a/payment/amd/build/selectors.min.js
+++ b/payment/amd/build/selectors.min.js
@@ -1,2 +1,2 @@
-define ("core_payment/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={regions:{gatewaysContainer:"[data-region=\"gateways-container\"]"},values:{gateway:"[data-region=\"gateways-container\"] input[type=\"radio\"]:checked"}};return a.default});
+define ("core_payment/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={regions:{gatewaysContainer:"[data-region=\"gateways-container\"]",costContainer:"[data-region=\"fee-breakdown-container\"]"},values:{gateway:"[data-region=\"gateways-container\"] input[type=\"radio\"]:checked"}};return a.default});
 //# sourceMappingURL=selectors.min.js.map
diff --git a/payment/amd/build/selectors.min.js.map b/payment/amd/build/selectors.min.js.map
index fc5d505e555..e6532f225b6 100644
--- a/payment/amd/build/selectors.min.js.map
+++ b/payment/amd/build/selectors.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/selectors.js"],"names":["regions","gatewaysContainer","values","gateway"],"mappings":"kJAwBe,CACXA,OAAO,CAAE,CACLC,iBAAiB,CAAE,sCADd,CADE,CAIXC,MAAM,CAAE,CACJC,OAAO,CAAE,oEADL,CAJG,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the payment interface.\n *\n * @module     core_payment/selectors\n * @package    core_payment\n * @copyright  2019 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    regions: {\n        gatewaysContainer: '[data-region=\"gateways-container\"]',\n    },\n    values: {\n        gateway: '[data-region=\"gateways-container\"] input[type=\"radio\"]:checked',\n    },\n};\n"],"file":"selectors.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/selectors.js"],"names":["regions","gatewaysContainer","costContainer","values","gateway"],"mappings":"kJAwBe,CACXA,OAAO,CAAE,CACLC,iBAAiB,CAAE,sCADd,CAELC,aAAa,CAAE,2CAFV,CADE,CAKXC,MAAM,CAAE,CACJC,OAAO,CAAE,oEADL,CALG,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the payment interface.\n *\n * @module     core_payment/selectors\n * @package    core_payment\n * @copyright  2019 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    regions: {\n        gatewaysContainer: '[data-region=\"gateways-container\"]',\n        costContainer: '[data-region=\"fee-breakdown-container\"]',\n    },\n    values: {\n        gateway: '[data-region=\"gateways-container\"] input[type=\"radio\"]:checked',\n    },\n};\n"],"file":"selectors.min.js"}
\ No newline at end of file
diff --git a/payment/amd/src/gateways_modal.js b/payment/amd/src/gateways_modal.js
index 01cf70b61dd..e1488d05278 100644
--- a/payment/amd/src/gateways_modal.js
+++ b/payment/amd/src/gateways_modal.js
@@ -128,9 +128,28 @@ const show = async(rootNode, {
     };
 
     const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);
-    Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);
+    const root = modal.getRoot()[0];
+    Templates.replaceNodeContents(root.querySelector(Selectors.regions.gatewaysContainer), html, js);
+    updateCostRegion(root, parseFloat(rootNode.dataset.amount), rootNode.dataset.currency);
 };
 
+/**
+ * Shows the cost of the item the user is purchasing in the cost region.
+ *
+ * @param {HTMLElement} root An HTMLElement that contains the cost region
+ * @param {number} amount The amount part of cost
+ * @param {string} currency The currency part of cost in the 3-letter ISO-4217 format
+ * @returns {Promise<void>}
+ */
+const updateCostRegion = async(root, amount, currency) => {
+    const locale = await updateCostRegion.locale; // This only takes a bit the first time.
+    const localisedCost = amount.toLocaleString(locale, {style: "currency", currency: currency});
+
+    const {html, js} = await Templates.renderForPromise('core_payment/fee_breakdown', {fee: localisedCost});
+    Templates.replaceNodeContents(root.querySelector(Selectors.regions.costContainer), html, js);
+};
+updateCostRegion.locale = getString("localecldr", "langconfig");
+
 /**
  * Process payment using the selected gateway.
  *
diff --git a/payment/amd/src/selectors.js b/payment/amd/src/selectors.js
index 5bfc1af82b1..1a571e8b458 100644
--- a/payment/amd/src/selectors.js
+++ b/payment/amd/src/selectors.js
@@ -25,6 +25,7 @@
 export default {
     regions: {
         gatewaysContainer: '[data-region="gateways-container"]',
+        costContainer: '[data-region="fee-breakdown-container"]',
     },
     values: {
         gateway: '[data-region="gateways-container"] input[type="radio"]:checked',
diff --git a/payment/templates/fee_breakdown.mustache b/payment/templates/fee_breakdown.mustache
new file mode 100644
index 00000000000..2e74fd031b6
--- /dev/null
+++ b/payment/templates/fee_breakdown.mustache
@@ -0,0 +1,38 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_payment/fee_breakdown_placeholder
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+
+}}
+<div class="core_payment_fee_breakdown">
+    {{# str }} labelvalue, core, {
+        "label": {{# quote }}{{# str }} cost {{/ str }}{{/ quote }},
+        "value": "{{fee}}"
+        } {{/ str }}
+</div>
diff --git a/payment/templates/gateways_modal.mustache b/payment/templates/gateways_modal.mustache
index bda71e1fa85..8c1139cf028 100644
--- a/payment/templates/gateways_modal.mustache
+++ b/payment/templates/gateways_modal.mustache
@@ -32,6 +32,11 @@
     {}
 
 }}
-<div class="core_payment_gateways_modal" data-region="gateways-container">
-    {{> core_payment/gateways_placeholder }}
+<div class="core_payment_gateways_modal">
+    <div data-region="gateways-container">
+        {{> core_payment/gateways_placeholder }}
+    </div>
+    <div data-region="fee-breakdown-container">
+        <div class="bg-pulse-grey" style="height: 22px; width: 90px"></div>
+    </div>
 </div>
\ No newline at end of file