{"id":6,"date":"2024-03-18T20:08:22","date_gmt":"2024-03-18T20:08:22","guid":{"rendered":"https:\/\/pay.actraonline.ca\/ubcp\/?page_id=6"},"modified":"2025-03-03T13:00:39","modified_gmt":"2025-03-03T18:00:39","slug":"home","status":"publish","type":"page","link":"https:\/\/pay.actra.ca\/ubcp\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-group paymentpanel 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\">ONLINE PAYMENT SYSTEM<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Outstanding Balance<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group paymentpanel 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\">ONLINE PAYMENT SYSTEM<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\">Only&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>VISA &amp; MASTERCARD<\/strong><\/mark>&nbsp;are accepted (including&nbsp;VISA and MASTERCARD DEBIT)<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Paying your dues online is safe and easy. <\/p>\n\n\n\n<p class=\"has-text-align-left\">For security and to protect your privacy, you will be required to provide your full name and&nbsp;<strong><u>either your UBCP\/ACTRA or ACTRA number<\/u><\/strong>.<\/p>\n<\/div><\/div>\n\n\n<link rel=\"stylesheet\" href=\"\/ubcp\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\/css\/main.css?94\">\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=\"\/ubcp\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\/js\/main.js?76\"><\/script>\n<main id=\"paymentWrapper\"><script false src=\"https:\/\/gateway.moneris.com\/chkt\/js\/chkt_v1.00.js\"><\/script><script>var currentBranch = \"bc\".toLowerCase();var currentPath = \"\/ubcp\/wp-content\/plugins\/actra-membership-payment\/membership\/assets\"<\/script><!-- <div>\n    <button>y<\/button>\n<\/div> -->\n<form action=\"\/ubcp\/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            <h3 id=\"membershipButtonContaineLabel\">Please select one of the following:<\/h3>\n        <div class=\"membershipButtonContainer\">\n            <!-- <h3 style=\"text-align: center;\">Please select one of the following:<\/h3> -->\n            <!-- <button class=\"btn\">I'm a Full Member<\/button>\n            <button class=\"btn\">I'm a Apprentice Member<\/button>\n            <button class=\"btn\">I'm a Background Member<\/button> -->\n            <button class=\"btn\">Full Member<\/button>\n            <button class=\"btn\">Apprentice Member<\/button>\n            <button class=\"btn\">Background Member<\/button>\n        <\/div>\n        <div class=\"membershipContainer\">\n            <div class=\"membershipInput memFull hide\">\n                <div>\n                    <label for=\"member_ubcp_id\">UBCP\/ACTRA Number <span><\/span><\/label>\n                    <input type=\"text\" id=\"member_ubcp_id\" name=\"member_ubcp_id\" maxlength=\"8\" placeholder=\"123456\" value=\"\" autocomplete=\"on\">\n                <\/div>\n                <div><span>OR<\/span><\/div>\n                <div>\n                    <label for=\"member_id\">ACTRA Number <span>(01-12345 including dash with no spaces)<\/span><\/label>\n                    <input type=\"text\" id=\"member_id\" name=\"member_id\" maxlength=\"8\" placeholder=\"01-12345\" value=\"\" autocomplete=\"on\">\n                <\/div>\n                <button class=\"btn\">Back<\/button>\n                <!-- <div><button>Back<\/button><\/div> -->\n            <\/div>\n            <div class=\"membershipInput memApp hide\">\n                <label for=\"appMember_id\">Apprentice Membership ID <span>(including dash with no spaces)<\/span><\/label>\n                <input type=\"text\" id=\"appMember_id\" name=\"appMember_id\" maxlength=\"8\" placeholder=\"AM-00000\" value=\"\" autocomplete=\"on\">\n                <button class=\"btn\">Back<\/button>\n            <\/div>\n            <div class=\"membershipInput memBackground hide\">\n                <label for=\"backgroundMember_id\">Background Membership ID <span>(including dash with no spaces)<\/span><\/label>\n                <input type=\"text\" id=\"backgroundMember_id\" name=\"backgroundMember_id\" maxlength=\"8\" placeholder=\"EX-00000\" value=\"\" autocomplete=\"on\">\n                <button class=\"btn\">Back<\/button>\n            <\/div>\n        <\/div>\n        <input type=\"hidden\" name=\"idType\" value=\"\">\n    <!-- \"Apprentice\",\"Background\" -->\n    <input type=\"hidden\" name=\"token\" value=90b318b519b250ca113cd0a06b88945ad45e3605df53accba3076702b6dcd35ab47f8f>\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_ubcp_id').value = \"\";                \n                    document.getElementById('appMember_id').value = \"\";                \n                    document.getElementById('backgroundMember_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\n\n\n<h3 class=\"wp-block-heading\">Other Ways to Pay<\/h3>\n\n\n\n<p><strong>Email:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Send transfer to&nbsp;<a href=\"mailto:etransfers@ubcpactra.ca\">etransfers@ubcpactra.ca<\/a><\/li>\n\n\n\n<li>The security question must be your name and member number<\/li>\n\n\n\n<li>The security answer (password) must be&nbsp;<strong>Transfer-4UBCP<\/strong>&nbsp;or&nbsp;<strong>Transfer4UBCP<\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>Mail:<\/strong>\u00a0Send a cheque made payable to UBCP\/ACTRA to the union office<br><strong>In person:<\/strong>\u00a0Visit the Union office at 300 \u2013 380 West 2nd Avenue, Vancouver BC V5Y 1C8<\/p>\n\n\n\n<script>\n    function paymentTransition() {\n        const listpaymentpanel = document.querySelectorAll('.wp-block-group.paymentpanel');\n\n        listpaymentpanel.forEach(element => {\n            element.classList.remove(\"paymentpanel\");\n        });\n\n        document.getElementsByClassName(window.location.hash.substring(1))[0].classList.add('paymentpanel');\n    }\n\n    window.addEventListener('load', function () {\n        if (location.hash == '') {\n            location.hash = \"primary\";\n        }\n        $(document).ready(function () {\n            $(\"#modal\").show();\n\n            $(\"#close-modal-btn\").click(function () {\n                $(\"#modal\").hide();\n            });\n\n            $(window).click(function (event) {\n                if (event.target === document.getElementById(\"modal\")) {\n                    $(\"#modal\").hide();\n                }\n            });\n        });\n        paymentTransition();\n        \n        if (window.innerWidth <= 1040) {\n            \/\/mobileMenuCommittee();\n        }\n    });\n\n    window.addEventListener('hashchange', function () {\n        paymentTransition();\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>ONLINE PAYMENT SYSTEM Outstanding Balance ONLINE PAYMENT SYSTEM Only&nbsp;VISA &amp; MASTERCARD&nbsp;are accepted (including&nbsp;VISA and MASTERCARD DEBIT) Paying your dues online is safe and easy. For security and to protect your privacy, you will be required to provide your full name and&nbsp;either your UBCP\/ACTRA or ACTRA number. Other Ways to Pay Email: Mail:\u00a0Send a cheque made [&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\/ubcp\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/pages\/6\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/pay.actra.ca\/ubcp\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}