{"id":6,"date":"2024-03-18T12:57:08","date_gmt":"2024-03-18T12:57:08","guid":{"rendered":"https:\/\/pay.actraonline.ca\/toronto\/?page_id=6"},"modified":"2025-05-28T10:56:59","modified_gmt":"2025-05-28T14:56:59","slug":"home","status":"publish","type":"page","link":"https:\/\/pay.actra.ca\/toronto\/","title":{"rendered":"Home"},"content":{"rendered":"\n<script>\n    function committeeSearch(){\n\n        const listCommittee = document.querySelectorAll('.wp-block-group.committeeSection');\n        const committeeList = document.querySelectorAll('.committeeList li');\n\n        committeeList.forEach(element => {\n            element.classList.remove(\"activeCommittee\")\n        });\n\n        committeeList.forEach(element => {\n            if(element.children[0].hash.substring(1) == location.hash.substring(1)){\n                element.classList.add(\"activeCommittee\");\n            }\n        });\n\n\n        listCommittee.forEach(element => {\n            element.classList.remove(\"currentCommittee\")\n        });\n\n        document.getElementsByClassName(window.location.hash.substring(1))[0].classList.add('currentCommittee')\n\n    }\n\nfunction mobileMenuCommittee(){\n        const committeeSidebar = document.querySelector('.committeeSidebar')\n        const committeeList = document.querySelectorAll('.committeeList li');\n        const mobileMenu = document.createElement('select');\n        mobileMenu.id = \"mobileCommitteeList\";\n\n        committeeList.forEach(li =>{\n            const mobileMenuItems = document.createElement('option');\n            mobileMenuItems.append(li.children[0].cloneNode(true));\n\nif(mobileMenuItems.children[0].hash == location.hash){\nmobileMenuItems.setAttribute('selected','');\n}\n \n            mobileMenu.appendChild(mobileMenuItems);\n        });\n\n        \/\/committeeSidebar.replaceChild(mobileMenu, committeeSidebar.children[0])\n        \/\/committeeSidebar.append(mobileMenu);\n\/*\n        document.getElementById('mobileCommitteeList').addEventListener('change', function() {\n            location.hash = this.selectedOptions[0].children[0].href.substring(38);\n            this.selectedOptions[0].children[0].setAttribute('selected','');\n        });\n*\/\n    }\n\n    window.addEventListener('load', function () {\n        if(location.hash == ''){\n            location.hash = \"primary\";\n        }\n        committeeSearch();\n        \/\/mobileMenuCommittee();\n\n        if(window.innerWidth <= 1040){\n            \/\/mobileMenuCommittee();\n        }\n    });\n\n    window.addEventListener('hashchange', function () {\n\n        committeeSearch();\n    });\n\n<\/script>\n\n\n\n<div id=\"toronto_content\" class=\"wp-block-group committeeSection primary\" style=\"text-align: left;\">\n\t<h2>ACTRA Toronto's Online Payment System<\/h2>\n\t<p>Paying your dues online is safe and easy. For security and to protect your\n\t\tprivacy, you will be required to provide your full name, Membership ID and\n\t\tcredit card information each time you sign in to make a payment.<\/p>\n\t<p>Please enter your full name (either legal or stage) as it appears in your ACTRA\n\t\tMember System personal profile.<\/p>\n\t<p style=\"font-size:16px; font-weight:bold; background:yellow;\">Due to high volume, you may experience a delay in\n\t\tlogging in to pay your dues. Please try again later before contacting the ACTRA Toronto office.<\/p>\n\t<p>***PLEASE NOTE*** Your payment will be applied to your balance the next business day and you will receive a\n\t\treceipt by email. <strong>To avoid making a duplicate payment, please enter your payment only once. The balance showing\n\t\there will not change, but you will get a receipt screen that shows a successful payment was processed.<\/strong> Wait\n\t\tuntil the next business day and check your balance here again or contact the Membership department at <a\n\t\t\thref=\"mailto:membership@actratoronto.com\">membership@actratoronto.com<\/a> to confirm your payment was\n\t\treceived. Thank you!<\/p>\n\n\t<div id=\"ie_clearing\">&nbsp;<\/div>\n<\/div>\n\n\n<div id=\"col1_content\" class=\"wp-block-group committeeSection payment\" style=\"text-align: left;\">\n\t<h2>ACTRA Toronto's Online Payment System<\/h2>\n\t<p><\/p>\n\t<p>The amount below is what our records show as being outstanding. If you require an explanation for the amount outstanding, please contact ACTRA Toronto Membership Services. Either by phone (416-642-6741) or by e-mail (<a href=\"mailto:membership@actratoronto.com\">membership@actratoronto.com<\/a>).<\/p>\n\t<div id=\"ie_clearing\">&nbsp;<\/div>\n<\/div>\n\n\n\n<div id=\"modal\" class=\"hide\">\n    <div class=\"modal-content\">\n        <h3>ACTRA Toronto<br>Payment Portal<\/h3>\n        <p>\n            <span>Note:<\/span> we no longer accepts <span>American Express<\/span> and <span>Discover<\/span> as a form of payment.\n        <\/p>\n        <button id=\"close-modal-btn\">Close<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    function paymentReminderInit() {\n        const closeButton = document.getElementById(\"close-modal-btn\");\n        closeButton.addEventListener(\"click\", function () {\n            modal.style.display = \"none\";\n        });\n\n        const modal = document.getElementById(\"modal\");\n\n        modal.style.display = \"block\";\n    }\n    window.addEventListener('load', function () {\n        if(location.hash == '#primary'){\n            if(document.querySelector('error').classList.length == 0){\n                if(location.href.indexOf('back') > 0 || location.href.indexOf('done') > 0){\n\n                }else{\n                    paymentReminderInit();\n                    document.querySelector('#modal').classList.remove('hide');\n                }                \n            }\n        }\n    });\n<\/script>\n\n<style>\n    #modal {\n        display: none;\n        \/* Initially hidden *\/\n        position: fixed;\n        \/* Stay in place *\/\n        z-index: 1;\n        \/* Sit on top *\/\n        left: 0;\n        top: 0;\n        width: 100%;\n        \/* Full width *\/\n        height: 100%;\n        \/* Full height *\/\n        overflow: auto;\n        \/* Enable scroll if needed *\/\n        background-color: rgba(0, 0, 0, 0.4);\n        \/* Black background with opacity *\/\n        z-index: 999999;\n    }\n\n    .modal-content {\n        background-color: #fefefe;\n        margin: 15% auto;\n        \/* 15% from the top and centered *\/\n        padding: 20px;\n        border: 1px solid #888;\n        width: 35vw;\n        \/* Adjust width as needed *\/\n        position: relative;\n        text-align: center;\n        border-radius: 15px;\n    }\n\n    .modal-content h3{\n        line-height: 1;\n        font-size: 2rem;\n        font-weight: 900;\n    }\n    .modal-content p{\n        font-size: 1rem;\n    }\n    .modal-content span{\n        font-size: 1.25rem;\n        font-weight: 900;\n    }\n    #close-modal-btn {\n        color: #fff;\n        background-color: #006eb5;\n        font-size: 1rem;\n        font-weight: 800;\n        padding: 12px 20px;\n        border: none;\n        cursor: pointer;\n        float: right;\n        position: absolute;\n        top: 0;\n        right: 0;\n        border-radius: 0 15px 0 0;\n    }\n\n    #close-modal-btn:hover {\n        background-color: #ddd;\n        color: #006eb5;\n        border-radius: 0 15px 0 0;\n        border-color: #006eb5;\n        border-left: 3px solid;\n        border-bottom: 3px solid;\n    }\n<\/style>\n\n\n\n<div class=\"wp-block-group committeeSection primary\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-left\">ACTRA TORONTO ONLINE PAYMENT<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Please enter your full name (either legal or stage) as it appears in your ACTRA Member System personal profile.<\/p>\n\n\n\n<p class=\"has-text-align-left has-white-color has-luminous-vivid-amber-background-color has-text-color has-background\">Due to high volume, you may experience a delay in logging in to pay your dues. Please try again later before contacting the ACTRA Toronto office.<\/p>\n\n\n\n<p class=\"has-text-align-left\">***PLEASE NOTE*** Your payment will be applied to your balance the next business day and you will receive a receipt by email.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">To avoid making a duplicate payment, please enter your payment only once. The balance showing here will not change, but you will get a receipt screen that shows a successful payment was processed. <\/h2>\n\n\n\n<p>Wait until the next business day and check your balance here again or contact the Membership department at&nbsp;<a href=\"mailto:membership@actratoronto.com\">membership@actratoronto.com<\/a>&nbsp;to confirm your payment was received. Thank you!<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group committeeSection payment\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-left\">ACTRA TORONTO ONLINE PAYMENT<\/h2>\n\n\n\n<p class=\"has-text-align-left\">The amount below is what our records show as being outstanding. If you require an explanation for the amount outstanding, please contact ACTRA Toronto Membership Services. Either by phone (416-642-6741) or by e-mail<\/p>\n<\/div><\/div>\n\n\n<link rel=\"stylesheet\" href=\"\/toronto\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\/css\/main.css?46\">\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n<script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n<script defer src=\"\/toronto\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\/js\/main.js?48\"><\/script>\n<main id=\"paymentWrapper\"><script false src=\"https:\/\/gateway.moneris.com\/chkt\/js\/chkt_v1.00.js\"><\/script><script>var currentBranch = \"toronto\".toLowerCase();var currentPath = \"\/toronto\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\"<\/script><!-- <div>\n    <button>y<\/button>\n<\/div> -->\n<form action=\"\/toronto\/wp-json\/wp\/v2\/pages\/6\" method=\"post\" autocomplete=\"off\">\n    <error class=\"\">\n            <\/error>\n    <header>\n        <h1>ACTRA ONLINE PAYMENT<\/h1>\n        <img decoding=\"async\" src=\"\" alt=\"\">\n    <\/header>\n    <div class=\"paymentForm2\">\n        <label for=\"member_name\">First and Last Name<\/label>\n        <input type=\"text\" name=\"member_name\" id=\"member_name\" placeholder=\"John Smith\" value=\"\" required autocomplete=\"on\">\n    <\/div>\n            <div class=\"paymentForm2\">\n\t\t\t<!--<label for=\"member_id\">Membership ID <br><span>(including dash, NO spaces, *Full members please note there are NO letters in your member number)<\/span><\/label>-->\n            <label for=\"member_id\">Membership ID <br><span style=\"background:yellow;font-weight: 600;font-style: italic;text-transform:uppercase;\">(You must include the dash, Do not include extra spaces<br>Full Members - Please Note there are no letters in your member number)<\/span><\/label>\n            <input type=\"text\" id=\"member_id\" name=\"member_id\" maxlength=\"8\" placeholder=\"AM-00000\" value=\"\" required autocomplete=\"on\"><br>\n        <\/div>\n        <input type=\"hidden\" name=\"idType\" value=\"\">\n    <!-- \"Apprentice\",\"Background\" -->\n    <input type=\"hidden\" name=\"token\" value=10f70fb16f63637bc49837f94094ad88de24dd39b5a20723e933c8e82aa359c649a5ca>\n    <input type=\"hidden\" name=\"mToken\" value=\"\">\n    <input type=\"hidden\" name=\"cBranch\" value=\"\">\n    <div class=\"membershipFormButtons\">\n        <button class=\"btn\" type=\"submit\">Submit<\/button>\n        <!-- <button class=\"btn\" onclick=\"document.getElementById('member_name').value = '';document.getElementById('member_id').value = '';console.log('Clear Button Clicked');\" type=\"reset\">Clear<\/button> -->\n        <button class=\"btn\" onclick=\"clearClick;return false;\" type=\"reset\">Clear<\/button>\n    <\/div>\n<\/form>\n<script>\n        \/\/ document.querySelector('[name=cBranch]').value = currentBranch;\n        document.addEventListener('DOMContentLoaded', function() {\n            setValues();\n\t\t\tfunction replaceQuotes(evt) {\n\t\t\t  const element = evt.target; \/\/ Get the element that triggered the event\n\t\t\t  element.textContent = element.textContent.replace(\/\u2019\/g, \"'\"); \/\/ Replace all occurrences of \u2019 with '\n\t\t\t}\n\t\t\tfunction replaceQuoteOnInput(event) {\n\t\t\t  const inputField = event.target;\n\t\t\t  const key = event.key;\n\n\t\t\t  \/\/ Check if the pressed key is the right single quote\n\t\t\t  if (key === \"\u2019\") {\n\t\t\t\tevent.preventDefault(); \/\/ Prevent default behavior (inserting the key)\n\t\t\t\tconst start = inputField.selectionStart;\n\t\t\t\tconst end = inputField.selectionEnd;\n\n\t\t\t\t\/\/ Replace the character at the cursor position\n\t\t\t\tconst replacedValue = inputField.value.substring(0, start) + \"'\" + inputField.value.substring(end);\n\t\t\t\tinputField.value = replacedValue;\n\n\t\t\t\t\/\/ Update cursor position after replacement\n\t\t\t\tinputField.selectionStart = start + 1;\n\t\t\t\tinputField.selectionEnd = start + 1;\n\t\t\t  }\n\t\t\t}\n\n\t\t\t\/\/ Attach the event listener to the desired element(s)\n\t\t\t\/\/const elementToModify = document.getElementById(\"yourElementId\"); \/\/ Replace \"yourElementId\" with the actual ID of your element\n\t\t\t\/\/elementToModify.addEventListener(\"keyup\", replaceQuotes); \/\/ This listens for keyup events (e.g., typing)\n\n\t\t\t\/\/ Alternatively, you can listen for different events:\n\t\t\t\/\/ elementToModify.addEventListener(\"click\", replaceQuotes); \/\/ This listens for clicks on the element\n\n            document.querySelector('#member_name').addEventListener(\"keydown\", function(e){\n\t\t\t\tconsole.log('member name before value: '+e.target.value);\n\t\t\t\t\/\/replaceQuotes(e);\n\t\t\t\t\/\/replaceQuoteOnInput(e);\n\t\t\t\t\/\/console.dir(e);\n\t\t\t\t\/\/console.log('member name: '+e.which);\n\t\t\t\t\/\/console.log('name: ' + e.key);\n\t\t\t\t\/\/console.log('member name after value: '+e.target.value);\n\t\t\t\tif(e.which == '48'){\n\t\t\t\t   \/\/console.log('apostrophe: '+ e.which);\n\t\t\t\t}\n\t\t\t\tif(e.which == '222'){\n\t\t\t\t   \t\/\/userInput.replace(\/\u2019\/g, \"'\");\n\t\t\t\t\t\/\/ Get the current value of the input field\n    \t\t\t\tconst currentValue = e.target.value;\n\n    \t\t\t\t\/\/ Fix the apostrophe using string replacement\n    \t\t\t\tconst fixedValue = currentValue.replace(\/\u2019\/g, \"'\");\n\n    \t\t\t\t\/\/ Update the input field value (optional)\n    \t\t\t\t\/\/e.target.value = fixedValue;\n\t\t\t\t}\n                if (e.which == '13') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            });\n            document.querySelectorAll('.membershipInput input').forEach(function (m){\n                console.dir(m);\n                m.addEventListener(\"keydown\", function(e){\n                    if (e.which == '13') {\n                        e.preventDefault();\n                        e.stopPropagation();\n                    }\n                });\n            });\n            document.querySelectorAll('.membershipInput button').forEach(function(e){\n                e.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    console.log('Back Button Pressed: ' + e.parentNode.classList);\n                    e.parentElement.classList.toggle('hide');\n                    const mbc = document.querySelector('.membershipButtonContainer');\n                    mbc.classList.toggle('hide');\n                    document.querySelector('.membershipFormButtons').style.display = 'none';\n                });            \n            });\n            if(document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[0]){\n                document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[0].addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    document.querySelectorAll('#paymentWrapper form .membershipContainer > div').forEach(function (e) {\n                        \/\/ Check if the element exists and does not have the class \"hide\"\n                        if (e && !e.classList.contains(\"hide\")) {\n                            \/\/ If not, add the class \"hide\"\n                            e.classList.add(\"hide\");\n                        }\n                    });\n                    document.querySelector('.memFull').classList.toggle('hide');\n                    document.querySelector('.membershipButtonContainer').classList.toggle('hide');\n                    \/\/document.querySelector('.membershipFormButtons')\n                    document.querySelector('.membershipFormButtons').style.display = 'block';\n                });\n            }\n            if(document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[1]){\n                document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[1].addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    document.querySelectorAll('#paymentWrapper form .membershipContainer > div').forEach(function (e) {\n                        \/\/ Check if the element exists and does not have the class \"hide\"\n                        if (e && !e.classList.contains(\"hide\")) {\n                            \/\/ If not, add the class \"hide\"\n                            e.classList.add(\"hide\");\n                        }\n                    });\n                    document.querySelector('.memApp').classList.toggle('hide');\n                    document.querySelector('.membershipButtonContainer').classList.toggle('hide');\n                    document.querySelector('.membershipFormButtons').style.display = 'block';\n                });\n            }\n            if(document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[2]){\n                document.querySelectorAll('#paymentWrapper form .membershipButtonContainer button')[2].addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    document.querySelectorAll('#paymentWrapper form .membershipContainer > div').forEach(function (e) {\n                        \/\/ Check if the element exists and does not have the class \"hide\"\n                        if (e && !e.classList.contains(\"hide\")) {\n                            \/\/ If not, add the class \"hide\"\n                            e.classList.add(\"hide\");\n                        }\n                    });\n                    document.querySelector('.memBackground').classList.toggle('hide');\n                    document.querySelector('.membershipButtonContainer').classList.toggle('hide');\n                    document.querySelector('.membershipFormButtons').style.display = 'block';\n                });\n            }\n            if(false){\n                document.querySelector('.').classList.toggle('hide');\n                document.querySelector('.membershipButtonContainer').classList.toggle('hide');\n                document.querySelector('.membershipFormButtons').style.display = 'flex';\n            }\n            function setValues(){\n                document.getElementById('member_name').value = \"\";\n                document.getElementById('member_id').value = \"\";                \n                                \/\/ document.getElementById('member_name').value = \"\";\n                \/\/ document.getElementById('member_ubcp_id').value = \"\";                \n                \/\/ document.getElementById('member_id').value = \"\";                \n            }\n            function clearClick(){\n                document.getElementById('member_name').value = \"\";\n                document.getElementById('member_ubcp_id').value = \"\";\n                document.getElementById('member_id').value = \"\";\n                console.log('Clear Button Clicked');\n            }\n            \/\/ Including the function to clear the input field\n            document.querySelector('button[type=\"reset\"]').addEventListener('click', function() {\n                clearClick();\n            });\n        });\n        document.querySelector('form').addEventListener(\"submit\", function(){\n            document.querySelectorAll('.membershipInput').forEach( function(e, i) {\n                \/\/ Check if the element exists and does not have the class \"hide\"\n                if (e && !e.classList.contains(\"hide\")) {\n                    \/\/ If not, add the class \"hide\"\n                    \/\/ e.classList.add(\"hide\");\n                    console.log(e);\n                    \/\/ console.log(e.classList);                    \n                    document.querySelector('[name=idType]').value = document.querySelectorAll('.membershipInput')[i].classList[1]\n                }\n            });\n            \/\/ const input1 = document.getElementById('member_ubcp_id');\n            \/\/ const input2 = document.getElementById('member_id');\n            \/\/ if(input1.value.length !== 0 || input2.value.length !== 0){return false;}           \n            \/\/ document.body.style.display = \"none\";\n        });\n    <\/script><\/main>\n","protected":false},"excerpt":{"rendered":"<p>ACTRA Toronto&#8217;s Online Payment System Paying your dues online is safe and easy. For security and to protect your privacy, you will be required to provide your full name, Membership ID and credit card information each time you sign in to make a payment. Please enter your full name (either legal or stage) as it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":20,"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/pages\/6\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/pay.actra.ca\/toronto\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}