first commit

payment/amd/build/events.min.js

@@ -0,0 +1,3 @@
+define("core_payment/events",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={proceed:"core_payment-modal_gateways:proceed"},_exports.default}));
+
+//# sourceMappingURL=events.min.js.map

payment/amd/build/events.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.min.js","sources":["../src/events.js"],"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 events the payment modal can fire.\n *\n * @module     core_payment/events\n * @copyright  2020 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    proceed: 'core_payment-modal_gateways:proceed',\n};\n"],"names":["proceed"],"mappings":"qKAuBe,CACXA,QAAS"}

payment/amd/build/gateways_modal.min.js

@@ -0,0 +1,3 @@
+define("core_payment/gateways_modal",["exports","core/templates","core/str","./repository","./selectors","core/modal_events","core_payment/events","core/toast","core/notification","./modal_gateways"],(function(_exports,_templates,_str,_repository,_selectors,_modal_events,_events,_toast,_notification,_modal_gateways){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_templates=_interopRequireDefault(_templates),_selectors=_interopRequireDefault(_selectors),_modal_events=_interopRequireDefault(_modal_events),_events=_interopRequireDefault(_events),_notification=_interopRequireDefault(_notification),_modal_gateways=_interopRequireDefault(_modal_gateways);var _systemImportTransformerGlobalIdentifier="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}const show=async function(rootNode){let{focusOnClose:focusOnClose=null}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const body=await _templates.default.render("core_payment/gateways_modal",{}),modal=await _modal_gateways.default.create({title:(0,_str.getString)("selectpaymenttype","core_payment"),body:body,show:!0,removeOnClose:!0}),rootElement=modal.getRoot()[0];(0,_toast.addToastRegion)(rootElement),modal.getRoot().on(_modal_events.default.hidden,(()=>{null==focusOnClose||focusOnClose.focus()})),modal.getRoot().on(_events.default.proceed,(async e=>{e.preventDefault();const gateway=(rootElement.querySelector(_selectors.default.values.gateway)||{value:""}).value;gateway?processPayment(gateway,rootNode.dataset.component,rootNode.dataset.paymentarea,rootNode.dataset.itemid,rootNode.dataset.description).then((message=>{modal.hide(),_notification.default.addNotification({message:message,type:"success"}),location.href=rootNode.dataset.successurl})).catch((message=>_notification.default.alert("",message))):(0,_toast.add)((0,_str.getString)("nogatewayselected","core_payment"),{type:"warning"})})),rootElement.addEventListener("change",(e=>{e.target.matches(_selectors.default.elements.gateways)&&updateCostRegion(rootElement,rootNode.dataset.cost)}));const gateways=await(0,_repository.getAvailableGateways)(rootNode.dataset.component,rootNode.dataset.paymentarea,rootNode.dataset.itemid),context={gateways:gateways},{html:html,js:js}=await _templates.default.renderForPromise("core_payment/gateways",context);_templates.default.replaceNodeContents(rootElement.querySelector(_selectors.default.regions.gatewaysContainer),html,js),selectSingleGateway(rootElement),await updateCostRegion(rootElement,rootNode.dataset.cost)},selectSingleGateway=root=>{const gateways=root.querySelectorAll(_selectors.default.elements.gateways);1==gateways.length&&(gateways[0].checked=!0)},updateCostRegion=async function(root){let defaultCost=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const gatewayElement=root.querySelector(_selectors.default.values.gateway),surcharge=parseInt((gatewayElement||{dataset:{surcharge:0}}).dataset.surcharge),cost=(gatewayElement||{dataset:{cost:defaultCost}}).dataset.cost,valueStr=surcharge?await(0,_str.getString)("feeincludesurcharge","core_payment",{fee:cost,surcharge:surcharge}):cost,surchargeStr=await(0,_str.getString)("labelvalue","core",{label:await(0,_str.getString)("cost","core"),value:valueStr}),{html:html,js:js}=await _templates.default.renderForPromise("core_payment/fee_breakdown",{surchargestr:surchargeStr});_templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.costContainer),html,js)},processPayment=async(gateway,component,paymentArea,itemId,description)=>(await("function"==typeof _systemImportTransformerGlobalIdentifier.define&&_systemImportTransformerGlobalIdentifier.define.amd?new Promise((function(resolve,reject){_systemImportTransformerGlobalIdentifier.require(["paygw_".concat(gateway,"/gateways_modal")],resolve,reject)})):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&_systemImportTransformerGlobalIdentifier.require&&"component"===_systemImportTransformerGlobalIdentifier.require.loader?Promise.resolve(require("paygw_".concat(gateway,"/gateways_modal"))):Promise.resolve(_systemImportTransformerGlobalIdentifier["paygw_".concat(gateway,"/gateways_modal")]))).process(component,paymentArea,itemId,description),init=()=>{init.initialised||(init.initialised=!0,document.addEventListener("click",(e=>{const gatewayTrigger=e.target.closest('[data-action="core_payment/triggerPayment"]');gatewayTrigger&&(e.preventDefault(),show(gatewayTrigger,{focusOnClose:e.target}))})))};_exports.init=init,init.initialised=!1}));
+
+//# sourceMappingURL=gateways_modal.min.js.map

payment/amd/build/modal_gateways.min.js

@@ -0,0 +1,3 @@
+define("core_payment/modal_gateways",["exports","jquery","core/custom_interaction_events","core/modal","core/modal_events","core_payment/events"],(function(_exports,_jquery,_custom_interaction_events,_modal,_modal_events,_events){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_custom_interaction_events=_interopRequireDefault(_custom_interaction_events),_modal=_interopRequireDefault(_modal),_modal_events=_interopRequireDefault(_modal_events),_events=_interopRequireDefault(_events);const SELECTORS_PROCEED_BUTTON='[data-action="proceed"]',SELECTORS_CANCEL_BUTTON='[data-action="cancel"]';class ModalGateways extends _modal.default{constructor(root){super(root)}registerEventListeners(){super.registerEventListeners(),this.getModal().on(_custom_interaction_events.default.events.activate,SELECTORS_PROCEED_BUTTON,((e,data)=>{var proceedEvent=_jquery.default.Event(_events.default.proceed);this.getRoot().trigger(proceedEvent,this),proceedEvent.isDefaultPrevented()||(this.hide(),data.originalEvent.preventDefault())})),this.getModal().on(_custom_interaction_events.default.events.activate,SELECTORS_CANCEL_BUTTON,((e,data)=>{var cancelEvent=_jquery.default.Event(_modal_events.default.cancel);this.getRoot().trigger(cancelEvent,this),cancelEvent.isDefaultPrevented()||(this.hide(),data.originalEvent.preventDefault())}))}}return _exports.default=ModalGateways,_defineProperty(ModalGateways,"TYPE","core_payment-modal_gateways"),_defineProperty(ModalGateways,"TEMPLATE","core_payment/modal_gateways"),ModalGateways.registerModalType(),_exports.default}));
+
+//# sourceMappingURL=modal_gateways.min.js.map

payment/amd/build/modal_gateways.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal_gateways.min.js","sources":["../src/modal_gateways.js"],"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 * @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';\n\nconst SELECTORS = {\n    PROCEED_BUTTON: '[data-action=\"proceed\"]',\n    CANCEL_BUTTON: '[data-action=\"cancel\"]',\n};\n\nexport default class ModalGateways extends Modal {\n    static TYPE = 'core_payment-modal_gateways';\n    static TEMPLATE = 'core_payment/modal_gateways';\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.registerModalType();\n"],"names":["SELECTORS","ModalGateways","Modal","constructor","root","registerEventListeners","getModal","on","CustomEvents","events","activate","e","data","proceedEvent","$","Event","PaymentEvents","proceed","getRoot","trigger","this","isDefaultPrevented","hide","originalEvent","preventDefault","cancelEvent","ModalEvents","cancel","registerModalType"],"mappings":"0yBA6BMA,yBACc,0BADdA,wBAEa,+BAGEC,sBAAsBC,eASvCC,YAAYC,YACFA,MAQVC,+BAEUA,8BAEDC,WAAWC,GAAGC,mCAAaC,OAAOC,SAAUV,0BAA0B,CAACW,EAAGC,YACvEC,aAAeC,gBAAEC,MAAMC,gBAAcC,cACpCC,UAAUC,QAAQN,aAAcO,MAEhCP,aAAaQ,4BACTC,OACLV,KAAKW,cAAcC,0BAItBlB,WAAWC,GAAGC,mCAAaC,OAAOC,SAAUV,yBAAyB,CAACW,EAAGC,YACtEa,YAAcX,gBAAEC,MAAMW,sBAAYC,aACjCT,UAAUC,QAAQM,YAAaL,MAE/BK,YAAYJ,4BACRC,OACLV,KAAKW,cAAcC,4EAtCdvB,qBACH,+CADGA,yBAEC,+BA0CtBA,cAAc2B"}

payment/amd/build/repository.min.js

@@ -0,0 +1,10 @@
+define("core_payment/repository",["exports","core/ajax"],(function(_exports,_ajax){var obj;
+/**
+   * Repository for payment subsystem.
+   *
+   * @module     core_payment/repository
+   * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.getAvailableGateways=void 0,_ajax=(obj=_ajax)&&obj.__esModule?obj:{default:obj};_exports.getAvailableGateways=(component,paymentArea,itemId)=>{const request={methodname:"core_payment_get_available_gateways",args:{component:component,paymentarea:paymentArea,itemid:itemId}};return _ajax.default.call([request])[0]}}));
+
+//# sourceMappingURL=repository.min.js.map

payment/amd/build/repository.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repository.min.js","sources":["../src/repository.js"],"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 * Repository for payment subsystem.\n *\n * @module     core_payment/repository\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 Ajax from 'core/ajax';\n\n/**\n * @typedef {Object} PaymentGateway A Payment Gateway\n * @property {string} shortname\n * @property {string} name\n * @property {string} description\n */\n\n/**\n * Returns the list of gateways that can process payments in the given currency.\n *\n * @method getAvailableGateways\n * @param {string} component\n * @param {string} paymentArea\n * @param {number} itemId\n * @returns {Promise<PaymentGateway[]>}\n */\nexport const getAvailableGateways = (component, paymentArea, itemId) => {\n    const request = {\n        methodname: 'core_payment_get_available_gateways',\n        args: {\n            component,\n            paymentarea: paymentArea,\n            itemid: itemId,\n        }\n    };\n    return Ajax.call([request])[0];\n};\n"],"names":["component","paymentArea","itemId","request","methodname","args","paymentarea","itemid","Ajax","call"],"mappings":";;;;;;;oLAyCoC,CAACA,UAAWC,YAAaC,gBACnDC,QAAU,CACZC,WAAY,sCACZC,KAAM,CACFL,UAAAA,UACAM,YAAaL,YACbM,OAAQL,gBAGTM,cAAKC,KAAK,CAACN,UAAU"}

payment/amd/build/selectors.min.js

@@ -0,0 +1,3 @@
+define("core_payment/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={elements:{gateways:'[data-region="gateways-container"] input[type="radio"]'},regions:{gatewaysContainer:'[data-region="gateways-container"]',costContainer:'[data-region="fee-breakdown-container"]'},values:{gateway:'[data-region="gateways-container"] input[type="radio"]:checked'}},_exports.default}));
+
+//# sourceMappingURL=selectors.min.js.map

payment/amd/build/selectors.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.min.js","sources":["../src/selectors.js"],"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 * @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    elements: {\n        gateways: '[data-region=\"gateways-container\"] input[type=\"radio\"]',\n    },\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"],"names":["elements","gateways","regions","gatewaysContainer","costContainer","values","gateway"],"mappings":"wKAuBe,CACXA,SAAU,CACNC,SAAU,0DAEdC,QAAS,CACLC,kBAAmB,qCACnBC,cAAe,2CAEnBC,OAAQ,CACJC,QAAS"}

payment/amd/src/events.js

@@ -0,0 +1,26 @@
+// 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/>.
+
+/**
+ * Contain the events the payment modal can fire.
+ *
+ * @module     core_payment/events
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    proceed: 'core_payment-modal_gateways:proceed',
+};

payment/amd/src/gateways_modal.js

@@ -0,0 +1,194 @@
+// 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/>.
+
+/**
+ * Contain the logic for the gateways modal.
+ *
+ * @module     core_payment/gateways_modal
+ * @copyright  2019 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Templates from 'core/templates';
+import {getString} from 'core/str';
+import {getAvailableGateways} from './repository';
+import Selectors from './selectors';
+import ModalEvents from 'core/modal_events';
+import PaymentEvents from 'core_payment/events';
+import {add as addToast, addToastRegion} from 'core/toast';
+import Notification from 'core/notification';
+import ModalGateways from './modal_gateways';
+
+/**
+ * Register event listeners for the module.
+ */
+const registerEventListeners = () => {
+    document.addEventListener('click', e => {
+        const gatewayTrigger = e.target.closest('[data-action="core_payment/triggerPayment"]');
+        if (gatewayTrigger) {
+            e.preventDefault();
+
+            show(gatewayTrigger, {focusOnClose: e.target});
+        }
+    });
+};
+
+/**
+ * Shows the gateway selector modal.
+ *
+ * @param {HTMLElement} rootNode
+ * @param {Object} options - Additional options
+ * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.
+ */
+const show = async(rootNode, {
+    focusOnClose = null,
+} = {}) => {
+
+    // Load upfront, so we don't try to inject the internal content into a possibly-not-yet-resolved promise.
+    const body = await Templates.render('core_payment/gateways_modal', {});
+
+    const modal = await ModalGateways.create({
+        title: getString('selectpaymenttype', 'core_payment'),
+        body: body,
+        show: true,
+        removeOnClose: true,
+    });
+
+    const rootElement = modal.getRoot()[0];
+    addToastRegion(rootElement);
+
+    modal.getRoot().on(ModalEvents.hidden, () => {
+        focusOnClose?.focus();
+    });
+
+    modal.getRoot().on(PaymentEvents.proceed, async(e) => {
+        e.preventDefault();
+        const gateway = (rootElement.querySelector(Selectors.values.gateway) || {value: ''}).value;
+
+        if (gateway) {
+            processPayment(
+                gateway,
+                rootNode.dataset.component,
+                rootNode.dataset.paymentarea,
+                rootNode.dataset.itemid,
+                rootNode.dataset.description
+            ).then((message) => {
+                modal.hide();
+                Notification.addNotification({
+                    message,
+                    type: 'success',
+                });
+                location.href = rootNode.dataset.successurl;
+
+                return;
+            }).catch(message => Notification.alert('', message));
+        } else {
+            // We cannot use await in the following line.
+            // The reason is that we are preventing the default action of the save event being triggered,
+            // therefore we cannot define the event handler function asynchronous.
+            addToast(getString('nogatewayselected', 'core_payment'), {
+                type: 'warning',
+            });
+        }
+    });
+
+    // Re-calculate the cost when gateway is changed.
+    rootElement.addEventListener('change', e => {
+        if (e.target.matches(Selectors.elements.gateways)) {
+            updateCostRegion(rootElement, rootNode.dataset.cost);
+        }
+    });
+
+    const gateways = await getAvailableGateways(rootNode.dataset.component, rootNode.dataset.paymentarea, rootNode.dataset.itemid);
+    const context = {
+        gateways
+    };
+
+    const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);
+    Templates.replaceNodeContents(rootElement.querySelector(Selectors.regions.gatewaysContainer), html, js);
+    selectSingleGateway(rootElement);
+    await updateCostRegion(rootElement, rootNode.dataset.cost);
+};
+
+/**
+ * Auto-select the gateway if there is only one gateway.
+ *
+ * @param {HTMLElement} root An HTMLElement that contains the cost region
+ */
+const selectSingleGateway = root => {
+    const gateways = root.querySelectorAll(Selectors.elements.gateways);
+
+    if (gateways.length == 1) {
+        gateways[0].checked = true;
+    }
+};
+
+/**
+ * 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 {string} defaultCost The default cost that is going to be displayed if no gateway is selected
+ * @returns {Promise<void>}
+ */
+const updateCostRegion = async(root, defaultCost = '') => {
+    const gatewayElement = root.querySelector(Selectors.values.gateway);
+    const surcharge = parseInt((gatewayElement || {dataset: {surcharge: 0}}).dataset.surcharge);
+    const cost = (gatewayElement || {dataset: {cost: defaultCost}}).dataset.cost;
+    const valueStr = surcharge ? await getString('feeincludesurcharge', 'core_payment', {fee: cost, surcharge: surcharge}) : cost;
+
+    const surchargeStr = await getString('labelvalue', 'core',
+        {
+            label: await getString('cost', 'core'),
+            value: valueStr
+        }
+    );
+
+    const {html, js} = await Templates.renderForPromise('core_payment/fee_breakdown', {surchargestr: surchargeStr});
+    Templates.replaceNodeContents(root.querySelector(Selectors.regions.costContainer), html, js);
+};
+
+/**
+ * Process payment using the selected gateway.
+ *
+ * @param {string} gateway The gateway to be used for payment
+ * @param {string} component Name of the component that the itemId belongs to
+ * @param {string} paymentArea Name of the area in the component that the itemId belongs to
+ * @param {number} itemId An internal identifier that is used by the component
+ * @param {string} description Description of the payment
+ * @returns {Promise<string>}
+ */
+const processPayment = async(gateway, component, paymentArea, itemId, description) => {
+    const paymentMethod = await import(`paygw_${gateway}/gateways_modal`);
+    return paymentMethod.process(component, paymentArea, itemId, description);
+};
+
+/**
+ * Set up the payment actions.
+ */
+export const init = () => {
+    if (!init.initialised) {
+        // Event listeners should only be registered once.
+        init.initialised = true;
+        registerEventListeners();
+    }
+};
+
+/**
+ * Whether the init function was called before.
+ *
+ * @static
+ * @type {boolean}
+ */
+init.initialised = false;

payment/amd/src/modal_gateways.js

@@ -0,0 +1,79 @@
+// 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/>.
+
+/**
+ * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.
+ *
+ * @module     core_payment/modal_gateways
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import $ from 'jquery';
+import CustomEvents from 'core/custom_interaction_events';
+import Modal from 'core/modal';
+import ModalEvents from 'core/modal_events';
+import PaymentEvents from 'core_payment/events';
+
+const SELECTORS = {
+    PROCEED_BUTTON: '[data-action="proceed"]',
+    CANCEL_BUTTON: '[data-action="cancel"]',
+};
+
+export default class ModalGateways extends Modal {
+    static TYPE = 'core_payment-modal_gateways';
+    static TEMPLATE = 'core_payment/modal_gateways';
+
+    /**
+     * Constructor for the Modal.
+     *
+     * @param {object} root The root jQuery element for the modal
+     */
+    constructor(root) {
+        super(root);
+    }
+
+    /**
+     * Set up all of the event handling for the modal.
+     *
+     * @method registerEventListeners
+     */
+    registerEventListeners() {
+        // Apply parent event listeners.
+        super.registerEventListeners();
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, (e, data) => {
+            var proceedEvent = $.Event(PaymentEvents.proceed);
+            this.getRoot().trigger(proceedEvent, this);
+
+            if (!proceedEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        });
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, (e, data) => {
+            var cancelEvent = $.Event(ModalEvents.cancel);
+            this.getRoot().trigger(cancelEvent, this);
+
+            if (!cancelEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        });
+    }
+}
+
+ModalGateways.registerModalType();

payment/amd/src/repository.js

@@ -0,0 +1,52 @@
+// 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/>.
+
+/**
+ * Repository for payment subsystem.
+ *
+ * @module     core_payment/repository
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Ajax from 'core/ajax';
+
+/**
+ * @typedef {Object} PaymentGateway A Payment Gateway
+ * @property {string} shortname
+ * @property {string} name
+ * @property {string} description
+ */
+
+/**
+ * Returns the list of gateways that can process payments in the given currency.
+ *
+ * @method getAvailableGateways
+ * @param {string} component
+ * @param {string} paymentArea
+ * @param {number} itemId
+ * @returns {Promise<PaymentGateway[]>}
+ */
+export const getAvailableGateways = (component, paymentArea, itemId) => {
+    const request = {
+        methodname: 'core_payment_get_available_gateways',
+        args: {
+            component,
+            paymentarea: paymentArea,
+            itemid: itemId,
+        }
+    };
+    return Ajax.call([request])[0];
+};

payment/amd/src/selectors.js

@@ -0,0 +1,35 @@
+// 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/>.
+
+/**
+ * Define all of the selectors we will be using on the payment interface.
+ *
+ * @module     core_payment/selectors
+ * @copyright  2019 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    elements: {
+        gateways: '[data-region="gateways-container"] input[type="radio"]',
+    },
+    regions: {
+        gatewaysContainer: '[data-region="gateways-container"]',
+        costContainer: '[data-region="fee-breakdown-container"]',
+    },
+    values: {
+        gateway: '[data-region="gateways-container"] input[type="radio"]:checked',
+    },
+};